CSS text-wrap: güzel

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

Adam Argyle

Chrome 117'den itibaren yeni bir metin kaydırma özelliğini kullanabilirsiniz. Bu özellik, CSS Metin Düzeyi 4'ten itibaren mevcuttur.

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

Yazımla ilgili dul ve yetim kelimeler, bir paragrafın veya metin bloğunun sonunda tek başına duran kelimelerdir. Metin bloğunun üst kısmında tek başına kalan kelimelere "dul", metin bloğunun alt kısmında tek başına kalan kelimelere ise "öksüz" denir. Bu tür öğeler, gözlerimizin metni taramasını engelleyerek içeriğin okunmasını zorlaştırabilir. Bazı tasarımcılar bu tür hataları ne pahasına olursa olsun önlemek için büyük çaba gösterir.

Google Yazı Tipleri: Tek Satır Sonu ve Tek Satır Başlangıcı kaynağından alınan resim

Chrome 117'den itibaren, öksüz öğelerden tek bir CSS satırı text-wrap: pretty ile kaçınılabilir.

Not: text-wrap: pretty, CSS'nin çoklu sütunlu sayfa düzeni kullanılırken alakalı olan orphans özelliğinden farklıdır. Ayrıca pretty, dullarla değil, yalnızca yetimlerle ilgilenir.

Bu özellik, paragrafların tek bir kelimeyle bitmediğinden emin olmanın ötesine geçer. Bir paragrafın sonunda art arda kısa çizgiyle ayrılmış satırlar görünüyorsa kısa çizgiyi ayarlar veya önceki satırları ayarlayarak yer açar. Ayrıca metin hizalaması için uygun şekilde ayarlanır. text-wrap: pretty, genel olarak daha iyi satır sarma ve metin bölme içindir ve şu anda tek satırda kalan metinlere odaklanmaktadır. text-wrap: pretty ileride daha fazla iyileştirme sunabilir.

Başlıksız paragrafları metninizin ana kısmından neden kaldırmanız gerektiği başlıklı makaleden alınan resim.

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

Optimum satır sayısını belirlemek için kullanılan algoritmanın ayrıntıları veya performansla ilgili hususlar hakkında bilgi edinmek istiyorsanız bu özelliğin geliştiricisi Koji Ishii tarafından oluşturulan tasarım belgesinin bağlantısını burada bulabilirsiniz.

Satır sonlarıyla ilgili başka iyileştirmeleri veya önerileriniz varsa, bunları öğrenmekten memnuniyet duyarız. Chromium hata izleyicisinde ayrıntıları ve doğru ile yanlış satır sonu örneklerini içeren bir sorun gönderin. Size dönüş yaparız.