`text-wrap: pretty` ile Daha İyi Tipografi Elde Etmek

• Web tipografisini daha güzel hale getiren text-wrap: pretty özelliği
• Safari Technology Preview 216 ile yeni sunulan bu özellik, web tipografisini daha rafine ve okunması daha kolay hale getiriyor
• Mevcut web metin yerleşimi satırları tek tek işleyen bir yaklaşım kullanıyordu; ancak pretty, satır sonlarını ayarlarken paragrafın tamamını dikkate alıyor
• Bu özellik okunabilirliği ve erişilebilirliği artırıyor; geleneksel dizgi yöntemlerinden ilham alınarak hayata geçirilmiş durumda

Geleneksel tipografiden öğrenilen iyi satır kırma yöntemleri

• Kısa son satırlardan kaçınma: Son satırda yalnızca tek bir kelimenin kalması estetik açıdan iyi görünmez
• Paragraf sonundaki düzensiz görünümü iyileştirme: Satır sonları çok dalgalı olduğunda okunabilirlik düşer; bu yüzden mümkün olduğunca dengeli ayarlanmalıdır
• Kötü tireleme kullanımından kaçınma: Tirelemenin iki satır üst üste kullanılması veya kelimelerin aşırı bölünmesi okumayı zorlaştırır
• Tipografik river etkisini önleme: Satırlar arasındaki boşlukların dikey olarak hizalanıp gözü dağıtmasına yol açan durumdan kaçınılmalıdır

Web'de satır kırmanın tarihi

• Web, 1991'den beri "ilk satırdan başlayıp satır satır işleyen" bir yöntem kullanıyor
• Bu yöntem her satırın metin uzunluğunu ayrı ayrı hesaplıyor ve satırlar arası uyumu dikkate almıyor
• InDesign veya LaTeX gibi araçlar tüm paragrafa bakarak satırları düzenlerken web, yakın zamana kadar bunu yapamıyordu
• Safari Technology Preview 216 ile ilk kez paragrafın tamamını dikkate alan bir satır kırma yöntemi sunuldu

text-wrap: pretty'nin çözdüğü problemler

• Paragrafın tamamını değerlendirerek en uygun satır kırma noktalarını belirliyor
• Kısa son satırları önlüyor, satır sonu görünümünü (rag) iyileştiriyor ve gereksiz tirelemeyi azaltıyor
• Chromium tabanlı tarayıcılar yalnızca paragrafın son 4 satırını iyileştirirken, WebKit bunu tüm paragrafa uyguluyor
• River etkisini henüz iyileştirmiyor, ancak gelecekte eklenmesi planlanıyor

Tarayıcıların uygulama farkları

• pretty, CSS Working Group'un tanımladığı şekilde tarayıcıya göre farklı çalışabiliyor
• WebKit tüm paragrafa uygular, Chromium ise yalnızca son 4 satıra uygular
• Bu nedenle geliştiriciler bunu sadece son satırı düzeltmek için değil, genel tipografiyi iyileştirmek için de kullanabilir

Demoyu inceleyin

• CodePen demosunda pretty, balance, tireleme ve hizalama kombinasyonlarını deneyebilirsiniz
• "show guides" ve "show ghosts" seçeneklerini açarak değişiklik öncesi ve sonrası karşılaştırılabilir
• Farklı dillerde (İngilizce, Arapça, Almanca, Çince, Japonca) etkisini görmek mümkün

Performansla ilgili endişelerin giderilmesi

• Çok fazla satır içeren içeriklerde performansı etkileyebilir, ancak sıradan paragraflarda performans sorunu yoktur
• Paragraf yüzlerce ya da binlerce satırdan oluşmadığı sürece rahatça kullanılabilir
• Gerekirse WebKit performansı korumak için uzun paragrafları bölerek işleyecek

pretty ile balance arasındaki fark

• pretty, metnin kapsayıcı genişliğini doldurmaya devam etmesini sağlarken satır kırmayı daha doğal hale getirir
• balance, tüm satırların uzunluğunu eşitlemeye odaklanır; bu da kapsayıcının daha az doldurulmasına yol açar
• Genel olarak pretty gövde metni için uygundur; balance ise başlıklar, açıklamalar ve teaser metinleri için daha uygundur
• Her ikisi de kısa metinlerde kullanılabilir, ancak uzun gövde metinlerinde balance kullanmaktan kaçınmak daha iyidir

Diğer text-wrap özellik değerleri

text-wrap: avoid-short-last-lines

• Yeni eklenen bu değer yalnızca kısa son satırlardan kaçınmaya odaklanır
• Henüz hiçbir tarayıcıda uygulanmış değil

text-wrap: auto

• Varsayılan değerdir ve 1991'den beri kullanılan satır bazlı "açgözlü satır kırma" algoritmasını kullanır
• Gelecekte tarayıcılarda varsayılan davranışın kendisi de iyileştirilebilir

text-wrap: stable

• Şu anda auto ile aynı şekilde çalışır, ancak düzenlenebilir metinler için daha kararlı satır kırma sağlar
• Animasyon veya metin girişi sırasında satır kırmanın değişmemesini garanti eder

text-wrap'ın alt özellikleri

• text-wrap, aslında text-wrap-mode ve text-wrap-style adlı iki özelliğin kısaltılmış halidir

• text-wrap-mode: satır kırmaya izin verilip verilmeyeceğini belirler (wrap / nowrap)

• text-wrap-style: satır kırma algoritmasını seçer (auto, stable, balance, pretty, avoid-short-last-lines)

  text-wrap-style: pretty;  
  text-wrap-mode: wrap;  
  

• white-space özelliğiyle birlikte kullanıldığında boşluk işleme davranışının da kontrol edilmesi gerekir

Kısa özet

• text-wrap: pretty, web metinlerinde eskisine göre çok daha rafine satır kırma sağlar
• Safari Technology Preview 216'da paragrafın tamamını değerlendiren bir yaklaşımla uygulanmıştır
• Uzun gövde metinlerine uygulandığında bile performans sorunu neredeyse yoktur ve okunabilirlik ile estetik açıdan büyük iyileşme sunar
• balance ile farkını anlayıp içerik türüne göre uygun seçimi yapmak gerekir

[GN⁺]

Hacker News görüşleri

• Birçok geliştiricinin "text-wrap: pretty" performansı konusunda endişelendiği sözü güldürüyor. Metin kaydırmanın performansını gerçekten bu kadar çok geliştiricinin düşündüğüne inanmak zor
• Demodaki içerik İngilizce. Garip bir İngilizce. Konuyla ilgisiz ve satır sonlarını iyileştirmek için sözcükleri yeniden düzenlemeye çalışılan durumlar dışında da alakasız
• Bu özelliğin ereader'lara eklenmesi heyecan verici. ereader'ların düzen motorları pek iyi değil
• Çevrimiçi metni güzel kılmak için çok az emek ve özen harcandı. Web, metni yüzyıllar öncesine geri götürdü. Bu özellik memnuniyetle karşılanmalı
• Safari Technology Preview'ye "text-wrap: pretty" desteği eklendi ve bu, web tipografisine benzeri görülmemiş bir incelik düzeyi getiriyor. caniuse.com'a göre Chrome bu özelliği Eylül 2023'ten beri destekliyor. Buradaki "benzeri görülmemiş" kısmını anlamak zor
• "text-align: justify" ile "text-wrap: pretty" arasındaki farkı bilen var mı? Chrome'da "text-wrap: pretty" çok daha yumuşak bir etki veriyor. Ortalama bir blogun gövde metninde ikisini birden kullanmanın iyi olup olmayacağını kontrol ettim; ayrı ayrı etkiler yaratıyor gibi görünüyor
• Bu özellik harika. Kısa son satırlara ve düzensiz kenarlara odaklanması şaşırtıcı değil. Ancak nehirleri önlemeye yönelik ayarlamaları henüz yapmıyor. Nehri tanımlayan bir metriğin nasıl tanımlanacağını hayal etmek zor. Birinin gerçekten işe yarayan dahiyane bir metrik icat edip etmediğini merak ediyorum
• Yetim sözcüklerden kaçınmaya çalışan paragraf, "large" sözcüğünü tek başına bırakıyor. "text-wrap: pretty" uygulanınca bu düzeliyor
• CSS Working Group'un tasarladığı "pretty"nin amacı, her tarayıcının metin kaydırmayı iyileştirmek için yapabildiğini yapması. Tüm tarayıcıları aynı seçimi yapmaya zorlamıyor. Chrome'un uygulama biçimi yüzünden birçok web geliştiricisi bu değerin kısa son satırları önlemek için olduğunu düşünüyor. Ama amaç bu değil
• Başlıklarda zaten "text-wrap: balance" kullanıyorum. Kötü kaydırmayı önlemek için belirli sözcükleri birbirine bağlamaya çalışıyordum. "text-wrap: pretty" gövde metnindeki benzer sorunları çözecek