CSS text-wrap: güzel

Hızdan çok güzellik için optimize edilmiş metin kaydırmayı etkinleştirin.

Adam Argyle
Adam Argyle

Chrome 117'de yeni bir metin kaydırma özelliğini kullanabilirsiniz. text-wrap: pretty CSS Metin Düzeyi 4'ten yararlanabilirsiniz.

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

Tipografik dullar ve yetimler, bir paragrafın veya metin bloğunun sonunda tek başına kullanılan tek kelimelerdir. Dullar bir metin bloğunun üst kısmındaki yalnız kelimelerdir; öksüzler ise bir metin bloğunun sonunda yalnızdır. Bunlar, gözlerimizin metne göz atmamızı engelleyerek içeriğin okunmasını zorlaştırabilir. Bazı tasarımcılar ne pahasına olursa olsun bunlardan kaçınır ve bunları önlemek için çok uğraşırlar.

Bir paragrafın başında dul ve sonunda öksüz olarak, öksüz veya dul olmayan paragrafla karşılaştırıldığında gösterilir.
Resmin kaynağı: Google Fonts - Widows & Orphans

Chrome 117 sürümünde tek bir CSS satırıyla sahipsizler önlenebilir: text-wrap: pretty.

Bu özellik, paragrafların tek bir kelimeyle bitmemesini sağlamaktan biraz daha fazlasını yapar. Paragrafın sonunda kısa çizgi içeren ardışık satırlar ortaya çıkarsa kısa çizgiyi de ayarlar veya yer açmak için önceki satırları ayarlar. Ayrıca metin gerekçesi için de uygun şekilde ayarlanır. text-wrap: pretty, şu anda artıklara odaklanmış olarak, genellikle daha iyi satır kaydırma ve metin kırma işlevi içindir. Gelecekte text-wrap: pretty daha fazla iyileştirme sunabilir.

Bir paragrafın sahipsiz ve yetim içermeyen ve her biri kötü veya iyi rozetine sahip bir paragrafın karşılaştırılması.
Neden gövde metninizden kaldırmalısınız? başlıklı makaleden alınan resim.

Ayrıca, sahipsizleri engellemeyen ancak metnin uyumlu bir metin bloğu oluşturacak şekilde kaydırılmasını sağlayan text-wrap: balance de vardır. Şahsen başlıklar için balance, paragraflar içinse pretty kullanıyorum.

Optimum satır sayısını veya performansla ilgili dikkat edilecek noktaları belirlemek için kullanılan algoritmanın ayrıntılarıyla ilgileniyorsanız Koji Ishii özelliğinin arkasındaki mühendis tarafından oluşturulan tasarım dokümanının bağlantısını burada bulabilirsiniz.

Satır eklemeyle ilgili başka iyileştirmeleriniz veya önerileriniz varsa bunları öğrenmekten memnuniyet duyarız. Chromium hata izleyicisinde sorun bildiriminde bulunduğunuzda, ayrıntılı bilgi ve hatalı satır sonu örnekleri kullandığınızda size geri döneriz.