Alt çizgi, metin alçaltıcılarıyla çakışmalı mı?

CSS3'ün metin süsleme modülü, alt çizginin tüm metnin altına konumlandırılıp konumlandırılmayacağını belirten bir metin alt çizgi konumu özelliği içerir :

veya taban çizgisinin hemen altında, metin inişleriyle çakışmasına izin verin:

Tamam, hepimiz alt çizginin sadece son çare olarak nasıl kullanılması gerektiğini biliyoruz, ama… eğer kullanacaksanız, bunu yapmanın en yaygın yolu nedir? Her alt çizgi stilinin artıları ve eksileri nelerdir?

En yaygın olan nedir?

Bazı tipograflar, alt çizgiden hep birlikte kaçınılması gerektiğini ve alt çizginin yalnızca daktilolarda veya web üzerindeki köprülerde kullanım için uygun olduğunu söyleyecektir . Bununla birlikte, yaratıcılığın kuralları yaratıcı yollarla kırma fırsatlarını görmekle ilgili olduğunu ve bu kılavuzun size ne kadar izin verdiğinizi eklemesini ekliyorum.

Web'de, taban çizgisinin hemen altında olması, örtüşen inişler en yaygın olanıdır. Ancak bunun nedeni, bu noktaya kadar büyük tarayıcılar için her zaman varsayılan görüntüleme olmasıdır.

Daktilolarda, alt çizgi üst üste binen inişler, ancak biraz farklı: iki örneğiniz arasında kısmen yer alıyor ( örnek ). Eğer iniş satırının taban çizgisine bakarsanız, örneğin (serif yazı tipinde) alt döngü gveya alt serif, alt pçizgi burada yatar. Böylece inişlerin alt kısmına "katılır".

Lehte ve aleyhte olanlar

Alt çizgilerin alt çizgilerle üst üste gelmesinin yararı, satır aralığınızı (veya "öndeki") hiç etkilememesidir - alt çizgiyi barındırmak için satırlar arasındaki boşluğu artırmanız gerekmez.

Eğer inişlerinizden tamamen temiz olmanın faydası, eğer önemliyse okunabilirliktir. Ancak, çizgiler arasındaki boşluğu artırmak için dezavantajınız olacaktır. Durumunuz zaten çok fazla satır aralığına izin veriyorsa, elbette bunun için gidin.

Web'i kullanıyorsanız, alt çizgi, köprülerle büyük ölçüde ilişkilidir. Bu nedenle, bir bağlantının parçası olmayan metin için alt çizgi kullanımından kaçınılmalıdır. Ne belirtmek istediğinizi başka şekillerde belirtin - bunun yerine kalın , italik veya TÜM CAPS'ı kullanın.

İnanıyorum ki altı çizili herhangi bir metin genellikle o kadar küçüktür ki fark okuyucu için yoktur. Bu, tasarımcının büyük önem verebileceği şeylerden biri , ancak okuyucular asla yapmıyor. Bence hepsi stilistik bir seçim.

Ben aşağı inişlerinde bir mola ile taban konumlandırma tercih ederim: yani text-decoration-skip: ink;Ancak, şu anda gerçekten desteklenmiyor. Şimdiye kadar iki sınıf var ve alt çizgi onlardan kaldırmak için inişlere bir boşluk eklemek için gittim. (metin php ile değiştirin, bu yüzden oluşturmak için çok fazla kod değildir).

Ofset yüzünden asla kenar-alt hile (veya alt özniteliği) kullanmayacağım. Ben edilir altı çizili ofset, benim okuyucuları ile bulmak çok, çok, çok daha fazla bir şey onlara dikkat dağıtıcı.

Mümkün olduğunda alt çizgilerden ziyade kalın, italik, kalın italik veya renk varyasyonlarına geçmeye çalışıyorum.

Açıklamasıtext-decoration: underline CSS 2.1 Spec detaylar olmadan, sadece altı çizili olarak etkisini tanımlar fakat tarayıcılar başlangıca altında sadece biraz görünmesini olarak gerçekleştirmesi. Böylece, genellikle inişleri keser (ve bir mektubun altına yerleştirilen aksan işaretleri).

CSS3 Metin taslağında, text-underline-positionpozisyon var, ancak herhangi bir tarayıcı tarafından desteklenmiyor gibi görünüyor. ( Css666.com bilgisine göre , IE tarafından desteklenir, ancak en azından IE 9'da, destek özelliği tanımak ve değeri auto, başlangıç ​​değerini kabul etmekle sınırlı görünmektedir - bu yüzden gerçekten desteklemez.) Güncelleme : Aslında , IE (sürüm 6'dan) biraz daha fazla desteğe sahiptir , ancak alt çizgiyi metnin (!) Altına yerleştirmenize ve altına koymanıza izin vermez.

Scott'ın cevabında ve Joonas'ın yorumunda açıklandığı gibi, bir alt çizgiyi simüle etmek için bir alt kenarlık kullanabilirsiniz ve daha sonra "alt çizgi" stili üzerinde oldukça iyi bir kontrole sahipsiniz. Bu, satır içi değil, kendi başına duran altı çizili bağlantılar için uygun olabilir. Örneğin, altını çizen basılı materyalleri HTML ile izlediğiniz için altını çizmek istediğiniz satır içi metin için normal CSS alt çizgisi muhtemelen daha iyidir - çünkü bu tür alt çizgi baskı geleneklerine karşılık gelir.