Haruskah menggarisbawahi bentrokan dengan keturunan teks?

Modul dekorasi teks CSS3 termasuk properti teks-garis bawah-posisi , yang menentukan apakah garis bawah harus diposisikan di bawah seluruh teks:

atau tepat di bawah garis dasar, membiarkannya berbenturan dengan keturunan teks:

Oke, kita semua tahu bagaimana menggarisbawahi seharusnya hanya digunakan sebagai upaya terakhir, tapi ... jika Anda akan menggunakannya, apa cara paling umum untuk melakukannya? Apa pro dan kontra dari masing-masing gaya garis bawah?

Apa yang paling umum

Nah, beberapa juru ketik akan mengatakan bahwa garis bawah mungkin harus dihindari bersama-sama , dan garis bawah itu hanya sesuai untuk digunakan pada mesin tik atau pada hyperlink di web. Namun, saya ingin menambahkan bahwa kreativitas adalah tentang melihat peluang untuk melanggar aturan dengan cara-cara kreatif sehingga seberapa banyak Anda membiarkan panduan ini terserah Anda.

Di web, memilikinya tepat di bawah garis dasar, tumpang tindih dengan keturunan, adalah yang paling umum. Tapi ini hanya karena ini selalu menjadi render default untuk browser utama hingga saat ini.

Pada mesin tik, menggarisbawahi tumpang tindih keturunan, tetapi sedikit berbeda: itu jatuh di antara dua contoh Anda ( contoh ). Jika Anda melihat garis dasar descender, seperti loop bawah gatau serif bawah p(dalam font serif), di situlah garis bawahnya berada. Jadi itu "bergabung dengan" bagian bawah keturunan.

Pro dan kontra

Manfaat memiliki garis bawah yang tumpang tindih dengan keturunan Anda adalah sama sekali tidak memengaruhi jarak garis Anda (atau "terdepan") - Anda tidak perlu meningkatkan jarak antara garis untuk mengakomodasi garis bawah.

Manfaat memiliki sepenuhnya jelas dari keturunan Anda adalah keterbacaan, jika itu penting. Tetapi Anda akan memiliki kelemahan karena perlu meningkatkan jarak antar baris. Jika situasi Anda memungkinkan untuk banyak spasi baris, maka tentu saja lakukanlah.

Jika Anda menggunakan web, maka garis bawah sangat terkait dengan hyperlink. Jadi, segala penggunaan garis bawah sama sekali harus dihindari untuk teks yang bukan bagian dari tautan. Tandai apa yang ingin Anda tandatangani dengan cara lain - menggunakan huruf tebal , miring , atau SEMUA CAPS.

Adalah keyakinan saya bahwa setiap teks yang digarisbawahi pada umumnya sangat kecil sehingga perbedaannya tidak ada bagi pembaca. Ini adalah salah satu hal yang perancang dapat peduli banyak tentang, tetapi pembaca tidak pernah melakukan. Ini semua lebih merupakan pilihan gaya menurut saya.

Saya jauh lebih suka penentuan posisi garis dasar dengan penembusan pada keturunan: yaitu text-decoration-skip: ink;Namun, itu tidak benar-benar didukung saat ini. Saya sudah sejauh ini memiliki dua kelas dan menambahkan rentang untuk keturunan untuk menghapus garis bawah dari mereka. (ganti teks melalui php sehingga tidak banyak kode untuk dibuat).

Saya tidak akan pernah menggunakan trik border-bottom (atau atribut bottom) karena offset. Saya menemukan, dengan pembaca saya, penyeimbang dari garis bawah ini jauh, jauh, jauh lebih mengganggu mereka daripada apa pun.

Saya mencoba dan beralih ke cetak tebal, miring, cetak miring tebal, atau variasi warna, daripada menggarisbawahi bila memungkinkan.

The deskripsitext-decoration: underline di CSS 2.1 spesifikasi mendefinisikan efeknya seperti menggarisbawahi, tanpa rincian, tapi browser menerapkannya sebagai muncul hanya sedikit di bawah baseline. Dengan demikian, sering memotong keturunan (dan tanda diakritik ditempatkan di bawah huruf).

Dalam konsep Teks CSS3, ada text-underline-positionposisi, tetapi tampaknya tidak didukung oleh browser apa pun. (Menurut info css666.com , ini didukung oleh IE, tetapi setidaknya pada IE 9, dukungan tampaknya terbatas untuk mengenali properti dan menerima nilai auto, nilai awal - jadi itu benar-benar tidak mendukung.) Pembaruan : Sebenarnya , IE (dari versi 6) memiliki sedikit lebih banyak dukungan , tetapi itu benar-benar memungkinkan Anda cukup menempatkan garis bawah di atas teks (!) Dan tidak di bawahnya.

Seperti dijelaskan dalam jawaban Scott dan komentar Joonas, Anda dapat menggunakan batas bawah untuk mensimulasikan garis bawah, dan kemudian Anda memiliki kontrol yang cukup baik atas gaya "garis bawah". Ini mungkin cocok misalnya untuk tautan yang digarisbawahi yang berdiri sendiri, bukan sebaris. Untuk teks inline, di mana Anda mungkin ingin menggarisbawahi misalnya karena Anda mencetak materi HTML yang berisi garis bawah, garis bawah CSS normal mungkin lebih baik - karena garis bawah tersebut kurang lebih sesuai dengan tradisi cetak.