Metin altı çizgisi uzaklığı - CSS Hileleri

CSS'deki text-underline-offsetözellik, metnin altı çizili mesafelerini başlangıç ​​konumlarından ayarlar.

.text ( text-underline-offset: 0.5em; )

Kullandığınız bir öğesi için bir alt çizgi uyguladıktan sonra text-decorationaltı çizili değeriyle , söz konusu satır kullanarak metinden ne kadar uzak olduğunu söyleyebiliriz text-underline-offsetözelliği.

Değerler

• auto: (Varsayılan) Tarayıcı, alt çizgiler için uygun bir ofset belirleyecektir.
• : Belirtilen bir birimle (negatif değerler dahil) herhangi bir geçerli uzunluk. Bu, yazı tipindeki ve tarayıcı varsayılanındaki tüm bilgilerin yerini alır.
• percentage: Elemanın yazı tipinde 1em yüzdesi olarak alt çizgilerin ofsetini belirtir.
• initial: Özelliğin varsayılan ayarı, otomatiktir.
• inherit: Ebeveynin altı çizili ofset değerini benimser.
• unset: Öğeden geçerli ofseti kaldırır.

Demo

Aşağıdaki demoda text-underline-offset, öğenin metin dekorasyonunu nasıl etkilediğini görmek için değerini değiştirebilirsiniz :

Notlar

• text-underline-offset kısaltmasının parçası değil text-decoration .
• O çalışmıyor diğer yandan text-decorationgibi çizgileri, line-throughya overline.
• Alt çizgiyi içe doğru kaydıran negatif değerler kabul edilir.

Torunlar için sabittir

Bir öğe için bir dekorasyon ayarladığınızda, tüm çocukları da bu dekorasyona sahip olacaktır. Şimdi çocuklardan biri için alt çizgi ofsetini değiştirmek istediğinizi hayal edin:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Bu işe yaramaz çünkü üst öğeler tarafından belirtilen bir alt çizgi ofsetini geçersiz kılamazsınız. Bunun çalışması için, öğenin kendisi için bir alt çizgi özgüllüğü ayarlamanız gerekir:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Em kullanılması tavsiye edilir

Em gibi göreceli bir değer kullanmanın yararı, ofsetin font-sizedeğerin değişmesiyle ölçeklenmesidir . Öte yandan, sabit uzunluklu bir birim (ör. Pikseller) kullanırsanız, ofset değişikliklere göre ayarlanmayabilir ve metniniz için olmasını istediğiniz mesafe olmayabilir:

Yüzde ve çağlayan

Bu özellik için uzunluk, sabit bir değer olarak miras alınır ve yazı tipiyle ölçeklenmez. Öte yandan, bir yüzde göreceli bir değer olarak miras alır ve bu nedenle miras aldıkça yazı tipindeki değişikliklerle ölçeklenir.

Aşağıdaki demo, kalıtım durumunda em ve yüzde değerleri arasındaki karşılaştırmayı gösterir ve görebileceğiniz gibi, sol tarafta (em'i kullandığımız) kalıtsal değer sabit bir uzunluktadır. DevTools'unuzda hesaplanan değeri kontrol edebilirsiniz. Bu, yazı tipindeki değişiklikle ölçeklenmediği anlamına gelir. Bununla birlikte, sağ tarafta, metinler göreceli bir değeri miras alır (bu durumda% 100); bu nedenle ofset, yazı tipindeki değişiklikle ölçeklenir:

Yazma Modları ve metnin altı çizili konumu

Dikey bir yazma moduna sahip olmak, alt çizginin konumunu etkiler. Bu, öğeye uygulanan ofsetin yönünü değiştirecektir. Aşağıdaki demodaki değerlerle oynayın:

İlişkili

• text-decoration
• text-underline-position
• text-decoration-thickness

Daha fazla bilgi

CSS Metin Dekorasyon Modülü Seviye 4 (Editör Taslağı)

Tarayıcı desteği

Bu yazının yazıldığı sırada Firefox tam desteğe sahip tek tarayıcıdır. Safari, yüzde değerlerini desteklemez.

metin altı çizgi uzaklığı

IE	Kenar	Firefox	Krom	Safari	Opera
Hayır	Hayır	70+	Hayır	12.1+	Herşey

Android Chrome	Android Firefox	Android Tarayıcı	iOS Safari	Opera Mini
Hayır	Hayır	Hayır	12.2+	Evet

metin altı çizgi uzaklığı: yüzde

IE	Kenar	Firefox	Krom	Safari	Opera
Hayır	Hayır	74+	Hayır	Hayır	Hayır

Android Chrome	Android Firefox	Android Tarayıcı	iOS Safari	Opera Mini
Hayır	Hayır	Hayır	Hayır	Evet