Mengelola tanda hubung dengan CSS

Joe Medley
Joe Medley

Dalam banyak bahasa tertulis, Anda dapat memisahkan baris antara suku kata dan di antara kata. Hal ini sering dilakukan sehingga lebih banyak karakter dapat ditempatkan pada baris teks dengan tujuan memiliki lebih sedikit baris dalam area teks, sehingga menghemat ruang. Dalam bahasa ini, jeda ditunjukkan secara visual dengan tanda hubung ('-').

Modul Teks CSS Level 3 menetapkan properti tanda hubung untuk mengontrol kapan tanda hubung ditampilkan kepada pengguna dan perilakunya saat ditampilkan. Mulai versi 55, Chrome menerapkan properti tanda hubung. Sesuai spesifikasi, properti tanda hubung memiliki tiga nilai: none, manual, dan auto. Untuk menggambarkan hal ini, kita perlu menggunakan tanda hubung halus (­) seperti dalam contoh berikut.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

Tanda hubung halus adalah tanda hubung yang hanya akan ditampilkan jika terjadi di margin akhir. Cara tanda hubung ini dirender di Chrome 55 atau yang lebih baru bergantung pada nilai properti hypens CSS.

-webkit-hyphens: manual;
hyphens: manual;

Menggabungkan semua ini akan memberikan hasil seperti ini:

Screenshot satu baris

Perhatikan bahwa tanda hubung halus tidak terlihat. Di semua kasus, jika kata yang berisi tanda hubung halus sesuai di satu baris, tanda hubung tersebut tidak akan terlihat. Sekarang, mari kita lihat bagaimana ketiga nilai tanda hubung berperilaku.

Tidak menggunakan

Pada contoh pertama, properti tanda hubung ditetapkan ke none. Tindakan ini akan mencegah tanda hubung halus ditampilkan. Anda dapat mengonfirmasi hal ini dengan menyesuaikan ukuran jendela sehingga kata 'elit' tidak akan pas di baris teks yang terlihat.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Menggunakan manual

Pada contoh kedua, properti tanda hubung ditetapkan ke manual yang berarti tanda hubung lembut hanya akan muncul jika margin memecah kata 'elit'. Sekali lagi, Anda dapat mengonfirmasi hal ini dengan menyesuaikan ukuran jendela.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Menggunakan mode otomatis

Pada contoh ketiga, properti tanda hubung ditetapkan ke auto. Dalam hal ini, tanda hubung halus tidak diperlukan karena agen pengguna akan menentukan lokasi tanda hubung secara otomatis. Jika mengubah ukuran jendela, Anda akan melihat bahwa browser menggunakan tanda hubung di contoh ini di tempat yang sama seperti di kedua, meskipun tidak ada tanda hubung halus. Jika jendela terus dikecilkan, Anda akan melihat bahwa browser mampu memisahkan baris antara dua suku kata dalam teks.

Google ipsum dolor sit amet, consectetur adipiscing elit.