Alignment (perataan) artinya elemen-elemen berbagi satu garis yang sama: tepi kiri, tengah, atau tepi kanan. Optical alignment adalah koreksi kecil yang membuat sesuatu terlihat rata di mata, walaupun angkanya gak persis rata, karena mata menilai bentuk, bukan kotak di sekelilingnya. Bayangin deretan kursi di kondangan: kalau semuanya sejajar, ruangan terlihat rapi walau warna kursinya beda-beda. Satu kursi maju sejengkal, dan semua orang langsung melihatnya.
🧪 Tebakan cepat: Di foto Kamar Teras ada tombol play bulat untuk video kamar. Segitiganya selebar 18px, dan kotak segitiga itu ditaruh tepat di tengah lingkaran. Segitiganya kelihatan di tengah, agak ke kiri, atau agak ke kanan? Jawabannya ada di bagian "Optical alignment: segitiga play".
Satu garis tepi untuk semua
Kartu Kamar Teras berisi nama kamar, harga, tombol malam, tombol pesan, dan catatan batal. Di versi yang berantakan, tiap elemen mulai di tempat yang sedikit beda:
.price { margin-left: 8px; } /* harga menjorok 8px */
.nights { margin-left: 4px; } /* tombol malam menjorok 4px */
.note { text-align: center; } /* catatan di tengah */
Hasilnya ada 4 titik mulai yang berbeda di sisi kiri: tepi kartu (nama kamar dan tombol pesan), 8px lebih ke kanan (harga), 4px lebih ke kanan (tombol malam), dan entah di mana (catatan, yang posisinya tergantung panjang kalimatnya). Hapus ketiga aturan itu, dan semuanya mulai di tepi isi kartu, tepat setelah padding 24px. Kamu bisa menarik satu garis lurus dari atas sampai bawah yang menyentuh awal tiap elemen.
Garis seperti itu disebut invisible line: gak digambar, tapi terasa. Aturannya sederhana: makin sedikit titik rata yang berbeda, makin rapi halamannya. Grid dan padding yang sama di semua elemen otomatis memberi garis-garis ini.
Rata kiri, tengah, atau kanan
- Rata kiri untuk teks yang dibaca, seperti deskripsi kamar dan ulasan. Bahasa Indonesia dibaca dari kiri ke kanan, jadi tiap baris baru mulai di tempat yang sama dan mata gak perlu mencari.
- Rata tengah cuma untuk teks pendek: judul satu baris, label tombol. Paragraf yang rata tengah membuat tiap baris mulai di tempat yang beda.
- Rata kanan untuk angka dalam kolom, misalnya harga tiga kamar di tabel. Dengan
font-variant-numeric: tabular-nums, tiap angka selebar sama, jadi ribuan sejajar dengan ribuan:
.harga { text-align: right; font-variant-numeric: tabular-nums; }
Optical alignment: segitiga play
Kotak di sekeliling segitiga memang di tengah lingkaran. Tapi segitiga yang menghadap ke kanan punya titik berat di sepertiga lebarnya dari sisi yang datar, bukan di setengahnya. Untuk segitiga selebar 18px:
- tengah kotaknya: 18 / 2 = 9px dari sisi datar
- titik beratnya: 18 / 3 = 6px dari sisi datar
- selisihnya: 9 - 6 = 3px, atau seperenam lebar segitiga
Mata cenderung membaca titik berat itu sebagai pusatnya, jadi segitiga yang dipusatkan secara matematis kelihatan agak ke kiri. Itu jawaban tebakannya. Perbaikannya: geser segitiga ke kanan sejauh selisih itu.
.play {
width: 48px; height: 48px; border-radius: 50%;
display: grid; place-items: center;
background: #15803d;
}
.play::before {
content: "";
width: 18px; height: 20px;
background: #fff;
clip-path: polygon(0 0, 100% 50%, 0 100%); /* segitiga menghadap kanan */
transform: translateX(3px); /* 18 / 6 = 3px, koreksi optik */
}
display: grid; place-items: centermemusatkan kotak segitiga di lingkaran, secara matematis.clip-path: polygon(...)memotong kotak 18 × 20px jadi segitiga dengan ujung di kanan.transform: translateX(3px)menggeser segitiganya tanpa mengubah tata letak di sekitarnya. Angka 3px adalah titik awal dari hitungan; keputusan akhirnya tetap dengan mata, dengan versi 0px dan 3px berdampingan.
Optical alignment: tanda kutip menggantung
Di bawah kartu ada ulasan Pak Hadi, diawali tanda kutip. Kalau tanda kutip itu ditulis biasa, dia berdiri di garis tepi, dan huruf pertama ulasannya baru mulai beberapa piksel di kanannya. Mata membaca baris itu seperti menjorok ke dalam dibanding judul "Kata tamu" di atasnya. Solusinya: gantung tanda kutipnya di luar garis.
.quote { position: relative; }
.quote::before {
content: "\201C"; /* tanda kutip pembuka */
position: absolute;
right: 100%; /* sisi kanannya menempel ke garis tepi */
}
Sekarang tanda kutipnya ada di luar, dan huruf "K" pertama berdiri persis di garis yang sama dengan judul di atasnya. CSS punya properti hanging-punctuation: first untuk ini, tapi saat ini cuma Safari yang mendukungnya, jadi cara ::before di atas lebih aman.
Squint test
Cara cepat menemukan yang gak sejajar: squint test. Sipitkan mata (atau mundur dari layar) sampai tulisannya kabur. Huruf gak terbaca lagi, yang tersisa cuma blok-blok dan tepinya, dan blok yang menjorok sendiri langsung kelihatan. Di browser kamu bisa meniru ini dengan filter: blur(3px) di body lewat DevTools.
⚠️ Jebakan yang sering ketemu
- Padding tambahan di satu elemen.
margin-left: 8pxdi harga saja sudah menambah satu titik rata baru. - Paragraf rata tengah. Enak untuk satu baris judul, melelahkan untuk tiga baris deskripsi.
- Percaya penuh pada
align-items: center. Dia memusatkan kotak, bukan bentuk yang terlihat. Ikon segitiga, huruf dengan ekor, dan tanda kutip sering butuh koreksi 1 sampai 3px. - Koreksi optik tanpa pembanding. Geser sesuai hitungan, lalu taruh versi lama dan baru berdampingan. Kalau bedanya gak terasa, gak usah dikoreksi.
TL;DR: Alignment artinya elemen berbagi garis yang sama; makin sedikit titik rata yang berbeda, makin rapi. Pakai rata kiri untuk teks yang dibaca, rata tengah untuk teks pendek, rata kanan dengan tabular-nums untuk angka dalam kolom. Optical alignment adalah koreksi kecil supaya terlihat rata di mata: segitiga play dipusatkan matematis kelihatan agak ke kiri, karena titik beratnya di sepertiga lebar, jadi geser ke kanan seperenam lebarnya (18px jadi 3px). Tanda kutip pembuka digantung di luar garis (::before dengan right: 100%) supaya huruf pertama sejajar dengan judul. Untuk menemukan yang gak sejajar, pakai squint test: sipitkan mata sampai tulisannya kabur dan lihat bloknya.
