Teka-teki Terbesar Ilmu Komputer: Menengahkan Elemen (`centering things`)

• Di banyak aplikasi perusahaan, elemen UI seperti teks dan ikon tidak benar-benar disejajarkan di tengah
• Padahal, dengan menggunakan flex dan grid di CSS, penengahan bisa dilakukan dengan mudah

display: flex  
justify-content: center /* pemusatan horizontal */  
align-items: center /* pemusatan vertikal */  

atau

display: grid  
justify-items: center /* pemusatan horizontal */  
align-items: center /* pemusatan vertikal */  

Faktor-faktor yang membuat penengahan jadi sulit

• Metrik font berperan penting. Sebagian besar font populer tidak memiliki bounding box yang pas dan memiliki ruang kosong, sehingga sulit untuk benar-benar menempatkannya di tengah
• Pengaturan line-height membuat hampir mustahil menyelaraskan dua elemen yang berada di kontainer berbeda
• Menyelaraskan ikon di sebelah teks juga sangat sulit. Properti CSS vertical-align tidak dapat menyelaraskan ikon secara bermakna
• Icon font yang dimasukkan ke dalam file font makin menyulitkan penyelarasan karena ukuran dan padding-nya tidak bisa diatur
• Desainer juga sering melakukan kesalahan dengan menengahkan secara mekanis tanpa mempertimbangkan bentuk ikon
• Penyelarasan horizontal pun bisa meleset jika tidak dilakukan dengan sangat cermat

Solusi

Desainer

• Jika bounding box font disesuaikan pas dengan teks, penengahan akan jauh lebih mudah
• Figma mendukung fitur ini (bukan pengaturan bawaan)
  • Vertical Trim : Cap Height to baseline

Desainer font

• Jika metrik font diatur agar ruang antara ascender dan descender menjadi 2 kali cap-height, pengembang dapat melakukan penengahan dengan lebih mudah
• Ascender/descender yang sebenarnya tidak perlu diperpanjang sampai ke batas; cukup angka metriknya saja yang disesuaikan

Pengembang web

• Harus mengetahui font yang akan digunakan sejak awal (tidak akan berfungsi jika terjadi font fallback)
• Pemusatan vertikal dapat disesuaikan dengan menambahkan nilai padding-bottom yang dihitung dari metrik font
• Ikon juga bisa disejajarkan dengan menetapkan vertical-align: baseline lalu menggesernya ke bawah sebesar nilai yang dihitung dari metrik font dan ukuran ikon

Icon font

• Tolong berhenti menggunakan icon font dan gunakan format gambar biasa
• Tidak ada yang lebih mudah daripada menyelaraskan dua persegi panjang yang memiliki lebar dan tinggi

Koreksi visual

• Pengembang hanya bisa menyelaraskan persegi panjang yang secara matematis sempurna. Untuk hal yang memerlukan koreksi manual, ikon harus ditempatkan secara visual agar tampak seimbang di dalam persegi panjang

Pendapat GN⁺

• Ini menunjukkan bahwa perhatian pada detail kecil dapat sangat meningkatkan kualitas UI. Hanya dengan penengahan elemen yang tampak sepele pun, kesan keseluruhan bisa berubah
• Ini menyiratkan bahwa hasil yang baik tidak datang dari pola pikir "desainer cukup fokus pada desain, pengembang cukup fokus pada implementasi", melainkan dari saling memahami area kerja masing-masing dan berkolaborasi
• Akan lebih baik jika sejak tahap desain, metrik font sudah disesuaikan dan mockup dikerjakan agar mudah diwujudkan sesuai niat desainer, tanpa perbedaan rendering antar-browser
• Masalah seperti ini bahkan ditemukan pada produk perusahaan besar seperti Apple, Microsoft, dan Google, tetapi kebanyakan orang tampaknya tidak cukup peduli untuk menyadarinya. Justru karena itu, penting untuk membuat produk dengan obsesi pada detail yang teliti
• Terutama belakangan ini, saat alat otomatisasi pengujian UI makin sering digunakan dan proses pemeriksaan satu per satu dengan mata manusia cenderung dihilangkan, masalah seperti ini bisa makin sering terjadi sehingga perlu diwaspadai

[dormis]

Saya rasa ada baiknya juga memikirkan apakah perataan tengah yang mekanis itu benar-benar bagus. Seperti mouse yang terasa nyaman karena bentuk ergonomisnya sedikit berbeda di kiri dan kanan, ini juga tampaknya merupakan hal yang perlu diputuskan dengan melihat kegunaan secara keseluruhan.

[jokuhus]

Intinya tampaknya adalah hasilnya bisa berbeda dari yang dimaksud. Misalnya, situasi seperti klik mouse terjadi pada bagian ekor, bukan pada ujung panah yang terlihat di layar.

[GN⁺]

Opini Hacker News

Ringkasan:

• Layout CSS punya banyak masalah, dan alat 2D/3D seperti program CAD, game engine, serta program animasi memiliki mesin layout dan sistem constraint yang lebih baik
• Tidak ada satu jawaban yang benar untuk perataan, dan desainer akan selalu menemukan sesuatu untuk dikeluhkan
  • Bahkan jika menggunakan nilai margin yang presisi, hasilnya bisa tetap terlihat tidak simetris secara visual
  • Bahkan jika disesuaikan dengan bentuk huruf, masih bisa ada keluhan karena tidak sejajar dengan baseline atau x-height
• Rendering font berbeda tergantung sistem operasi dan browser, jadi sesuatu yang terlihat selaras sempurna di satu lingkungan bisa meleset di lingkungan lain
• Untuk font non-Barat, masalahnya bahkan lebih rumit
• Di dunia nyata pun perataan adalah masalah yang sulit (contoh ilustrasi lapangan basket NCAA)
• Standar perataan berbeda tergantung orang yang melihatnya
• Diperkenalkan situs demo untuk mencoba justify dan align di CSS secara interaktif
• Saat menempatkan ikon di samping teks, ada saran dari desainer untuk menyesuaikannya bukan hanya dengan font, tetapi juga dengan "pusat tipografis" dari teks itu sendiri, namun pada praktiknya tetap perlu kompromi
• Sudah lebih dari 10 tahun ada klaim bahwa CSS telah menyamai kemampuan tabel, tetapi sampai sekarang masih belum sepenuhnya tercapai