Metnin düzeni, özellikle satır ve paragraf sonları, sayfanın okunabilirliğini ve estetik çekiciliğini etkileyebilir. CSS, belirli kullanım alanlarını iyileştirebilecek çeşitli metin kaydırma seçenekleri sunar.
Başlıklar gibi kısa metin blokları için text-wrap: balance kullanın. Bu özellik, tarayıcıya metni satırlar arasında mümkün olduğunca eşit şekilde dağıtarak daha simetrik bir görünüm oluşturma talimatı verir.
text-wrap: pretty CSS özelliği, daha gelişmiş bir kaydırma algoritmasını etkinleştirerek gövde metninin tipografik kalitesini artırmanıza olanak tanır. Bu özellik, özellikle "yetim satırları" (paragrafın son satırındaki tek kelimeler) önlemek ve uzun metin blokları için daha hoş bir görsel "düzensiz kenar" oluşturmak üzere tasarlanmıştır.
Uygulama
1. Metin öğelerini belirleme:
text-wrap: balance için başlıklar ve tablo başlıkları gibi kısa metin blokları seçin. Kenarlık veya arka plan gibi görünür kutuları olan öğelerden kaçının. Bu öğeler, düzende beklenmedik görsel olarak boş alanlar oluşturabilir.
text-wrap: pretty için, yetim kelimelerin (eksik satırlar) veya kötü satır sonlarının en belirgin olduğu, uzun metinler içerebilecek öğeleri seçin. Bu, aşağıdaki öğeleri içerir:
<p><blockquote><li>- Uzun metinler içerebilecek diğer tüm öğeler.
Doğru sarmalama yöntemini seçme
| Ölçütler | text-wrap: balance |
text-wrap: pretty |
text-wrap: wrap (Varsayılan) |
|---|---|---|---|
| Hitap ettiği içerik üreticiler | Kısa bloklar (Başlıklar, Başlıklar) | Uzun bloklar (paragraflar, listeler) | Performans açısından kritik içerikler |
| Görsel Hedef | Simetrik satır uzunlukları | Sondaki tek satırları ("runts") önleme | Hızlı, standart paketleme |
| Satır Kısıtlamaları | En fazla 6-10 satır (algoritma sınırı) | 3 veya daha fazla satır için ideal | Sınır yok |
| Perf Cost | Yüksek: İkili arama algoritması | Orta: Geriye dönük bakış algoritması | Düşük: Standart açgözlü algoritma |
2. Seçilen sarmalamayı uygulama:
text-wrap: balance özelliğini özellikle başlıklar (h1-h6), alt başlıklar veya alıntılar gibi kısa, çok satırlı öğelere uygulayın.
/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
/* Enables balanced line-breaking logic */
text-wrap: balance;
}
En iyi kesme noktalarını bulmak için bir paragrafın son birkaç satırını değerlendiren optimize edilmiş bir algoritmayı etkinleştirmek üzere text-wrap: pretty kullanın.
/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
/* Enables pretty line-breaking logic for body copy */
text-wrap: pretty;
}
Kritik Kısıtlamalar ve Performans
text-wrap: balance
- Satır sınırı: Tarayıcılar, performansı korumak için dengelemeye çalışacakları satır sayısına bir sınır uygular (genellikle Chromium'da 6 satır ve Firefox'ta 10 satır). Metin bu sınırı aşarsa tarayıcı standart
wrapdavranışına geri döner. Bu sınırları aşma olasılığı olan metin bloklarındatext-wrap: balancekullanmaktan kaçının. - Hedeflenen Uygulama:
text-wrap: balance'yi genel olarak (ör.* { text-wrap: balance; }) uygulamayın. Tarayıcılar tarafından kullanılan yinelemeli "ikili arama" algoritması, hesaplama açısından maliyetlidir. Kullanımını belirli, kısa metin öğeleriyle sınırlayın. - Genişlik ile etkileşim:
text-wrap: balance, kapsayıcının genişliğini (inline-size) değiştirmez. Yalnızca metnin bu genişlik içinde nasıl kaydırılacağını etkiler. Bu durum, kapsayıcının sonunda boş alan bırakabilir ve tam genişlikte metin bloklarına dayalı düzenleri etkileyebilir.
text-wrap: pretty
- Performans ve Kalite: ZORUNLU:
text-wrap: pretty, kesme noktalarını optimize etmek için birden fazla satırı (genellikle son dört satırı) değerlendirdiğinden varsayılanwrap(açgözlü) algoritmadan daha fazla işlem gücü gerektirir. Sayfanızda çok fazla metin içeriği varsa bu özelliği her öğeye genel olarak uygulamaktan kaçının. - Çok satırlı metinler için ideal:
pretty'nin avantajları, üç veya daha fazla satırdan oluşan paragraflarda daha belirgindir. Kısa, tek satırlık metinler üzerinde çok az etkisi vardır veya hiç etkisi yoktur. - Tarayıcıya özgü davranış: Uygulama ayrıntılarının farklılık gösterdiğini unutmayın. Chromium tabanlı tarayıcılar genellikle son dört satıra odaklanırken diğer motorlar tüm paragrafı değerlendirebilir.
Yedek stratejiler
text-wrap: balance veya text-wrap: pretty özelliğini desteklemeyen tarayıcılarda bu özellik yoksayılır ve metin, varsayılan wrap davranışı kullanılarak kaydırılır. Bu, standart tipografiye kontrollü azalma uygulayan progresif bir geliştirmedir. Bu sayede içeriğiniz tüm tarayıcılarda mükemmel bir şekilde okunabilir ve destekleyen tarayıcılarda üstün bir deneyim sunar.
İyileştirilmiş metin düzeninin gerekli olduğu kritik düzenler için JavaScript kitaplığı kullanın ancak bunun yavaş olabileceğini ve performans sorunlarına neden olabileceğini unutmayın.