Perataan menentukan di tepi mana teks bertumpu dan bagaimana ruang kosongnya terbagi. Property text-align mengaturnya untuk setiap baris di dalam blok teks, dan karena termasuk property yang diwariskan, satu deklarasi pada elemen induk dapat meratakan seluruh artikel. Pada chapter ini kita mempelajari empat nilai dasarnya, kapan justify layak dipakai di web, serta nilai logis start dan end yang siap untuk bahasa apa pun.
Empat Nilai Dasar #
| Nilai | Efeknya | Pemakaian umum |
|---|---|---|
left | tepi kiri rata, tepi kanan bebas | default untuk teks Latin |
right | tepi kanan rata | tanggal, nomor, kolom harga |
center | kedua tepi seimbang | heading pendek, teks UI |
justify | kedua tepi rata dengan melar spasi | gaya koran dan majalah cetak |
footer.tanda-tangan { text-align: center; }
.tanggal-terbit { text-align: right; }text-align diwariskan ke semua turunannya, jadi deklarasi pada body berlaku untuk seluruh halaman sampai ditimpa.
Demo berikut menampilkan empat perataan pada teks yang sama:
justify dan Masalah Hyphenation di Web #
justify melar spasi antarkata agar kedua tepi baris rata. Di media cetak, kata panjang dipecah dengan tanda hubung (hyphenation) sehingga spasi tetap wajar. Browser web tidak memecah kata secara default — dan bahasa Indonesia kaya kata panjang — sehingga baris yang berisi banyak kata panjang menghasilkan celah spasi lebar yang memutus aliran baca.
.artikel-rata {
text-align: justify;
hyphens: auto; /* butuh atribut lang yang tepat pada html */
}Untuk sebagian besar website, rata kiri (left) tetap pilihan teraman untuk teks isi.
center untuk Teks yang Pendek #
center bekerja baik pada heading dan teks UI yang pendek karena mata langsung menemukan titik tengahnya. Pada paragraf panjang, perataan tengah justru menyulitkan: awal setiap baris berpindah-pindah sehingga mata harus mencari posisi baru setiap turun baris. Simpan center untuk judul hero, label kartu, dan isi tombol.
start dan end: Perataan Logis #
Nilai start dan end mengikuti arah tulisan (writing direction), bukan sisi fisik. Pada teks kiri-ke-kanan seperti bahasa Indonesia, start sama dengan left; pada teks kanan-ke-kiri seperti bahasa Arab, start otomatis menjadi right.
.komentar { text-align: start; }Untuk teks isi yang arahnya mengikuti bahasa, biasakan start dan end daripada left dan right.
Ringkasan #
text-align mengatur perataan tiap baris dalam blok dan diwariskan ke seluruh turunannya. Rata kiri tetap standar untuk teks isi, right untuk data kolom, center untuk teks pendek, dan justify sebaiknya hanya dipakai bersama hyphens: auto bila benar-benar dibutuhkan. Nilai logis start dan end membuat perataan mengikuti arah bahasa tanpa perubahan kode. Blok teks sudah terposisi dengan rapi; berikutnya kita menambahkan garis pada teks lewat text-decoration.