Hassas metin hizalama

Sorun

Tarayıcılar, satır yüksekliğini ve üstte ve altta çıkıntılar gibi yazı tipine özgü metrikleri hesaba katmak için metin karakterlerinin üstüne ve altına otomatik olarak fazladan boşluk ekler. Bu "hayalet boşluk", standart CSS kullanarak piksel düzeyinde mükemmel dikey hizalama elde etmeyi imkansız hale getirir.

Yaygın sorunlar şunlardır:

• Hizalanmamış Simgeler: align-items: center kullanıldığında bile metin, bitişik bir simgeden görsel olarak daha alçak veya daha yüksek görünür.
• Hatalı Dolgu: padding: 12px içeren bir düğmenin üst veya alt kısmında, yazı tipinin iç satır aralığı nedeniyle görsel olarak daha fazla boşluk var gibi görünüyor.
• Hizalama: "Sihirli sayı" negatif kenar boşlukları kullanmadan büyük harfin üst kısmını bir kapsayıcının veya bitişik resmin üst kısmıyla tam olarak hizalayamazsınız.

Çözüm

text-box-trim ve text-box-edge özellikleri (kısaltma: text-box), bu dahili satır aralığını belirli yazı tipi metriklerine göre kırpmanıza olanak tanır. Metin kutusunu büyük harf yüksekliğine (büyük harflerin üst kısmı) ve alfabetik taban çizgisine (çoğu harfin alt kısmı) kırparak öğenin sınırlayıcı kutusunun görsel içeriğiyle eşleşmesini sağlayabilirsiniz.

Uygulama Stratejisi

1. ZORUNLU: Metni içeren öğeye text-box-trim: trim-both (veya text-box kısaltmasını) uygulayın.
2. ZORUNLU: text-box-edge ile kırpma için hangi metriklerin kullanılacağını belirtin. Kullanıcı arayüzü hizalaması için genellikle cap alphabetic kullanılır.
3. DO Flex veya grid kapsayıcılarında görsel olarak dikey ortalama için bu özelliği kullanın.
4. CSS padding değerlerinizin, metin ile kapsayıcı kenarı arasındaki görsel boşlukla eşleştiğinden emin olmak için KULLANIN.
5. Okunabilirlik için geleneksel satır aralığının gerekli olduğu uzun gövde metinlerinde KULLANMAYIN. Başlıklar, düğmeler ve kullanıcı arayüzü etiketleri için en uygun seçenektir.

Uygulama Kılavuzu

1. kullanım alanı: Rozetler için iç satır aralığını kırpma

Farklı yazı tiplerinde, metnin üstünde ve altında farklı miktarlarda yerleşik boşluk bulunur. Bu durum, bir tasarımı eşleştirirken veya metni rozette görsel olarak ortalarken zorluklara neden olabilir. Bir kapsayıcının dolgusunun metni tam olarak sarmasını istediğinizde text-box: trim-both cap alphabetic kullanın. Bu, özellikle rozetler veya etiketler gibi yoğun kullanıcı arayüzü bileşenleri için kullanışlıdır. Bu sayede dolgu, her tarafta metin kenarından başlar.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

2. kullanım alanı: Simgelerle metni ortalama

Metin ve simgeleri hizalamak için Flexbox kullanıldığında "hayalet boşluk" genellikle metnin biraz merkez dışı görünmesine neden olur. Kutunun kırpılması, düzen motorunun hizalama için gerçek görünür harf yüksekliğini kullanmasını sağlar.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

3. kullanım alanı: Metni üst kenarlarla hizalama

Bir başlığı bitişik bir resmin veya dekoratif öğenin üst kısmıyla mükemmel şekilde hizalamak için trim-start cap alphabetic kullanın. Bitiş kırpılmayacak olsa bile bitiş kenarı tanımlanmalıdır.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

En İyi Uygulamalar

• DO use the text-box shorthand for conciseness: text-box: <trim-direction> <edges>.
• Yalnızca bir kenar kırpılıyor olsa bile her zaman her iki kenarı da belirtin (varsayılan text kenarı kullanılmıyorsa).
• Kontrollü boşluk için line-height ile BİRLEŞTİRİN. Kırpma işlemi, metnin ilk ve son satırından önceki satır aralığını kaldırır ancak line-height, çok satırlı metindeki satırlar arasındaki mesafeyi etkilemeye devam eder.
• Her öğeye UYGULAMAYIN. Yalnızca hassas hizalama gerektiğinde kullanın.

Yedek stratejiler

text-box, progresif bir geliştirmedir. Bu özelliği desteklemeyen tarayıcılarda metin, varsayılan satır aralığıyla oluşturulur. Düzeniniz çalışmaya devam eder ancak biraz daha az hassas olur. Özellikler eski tarayıcılar tarafından güvenli bir şekilde yoksayıldığından özel bir yedek kod gerekmez.

Dikkat edilmesi gereken diğer noktalar

1. Yazı tipi metrikleri: Farklı yazı tiplerinin farklı dahili metrikleri vardır. cap alphabetic güvenilir bir varsayılan değerdir ancak bazı yazı tipleri veya kullanım alanları, küçük harflerin daha iyi hizalanması için ex (x yüksekliği) gerektirebilir.
2. Çok satırlı metin: Kırpma, bloğun ilk ve son satırına uygulanır. Dahili hatlar etkilenmez.