Dengeli metin blokları için satır sonlarını elle yazmaya yönelik klasik bir tipografi tekniği, CSS'de kullanıma sunuldu.
text-wrap için balance değeri, CSS Metin Düzeyi 4'ün bir parçasıdır. Bu CSS satırının metin düzenlerinizi nasıl büyük ölçüde iyileştirebileceğini öğrenmek için bu yayındaki örneklere göz atın.
text-wrap: balance kullanılmadığında tasarımcılar, içerik editörleri ve yayıncılar çizgilerin dengelenme şeklini değiştirmek için birkaç araca sahiptir. Mevcut en iyi seçenekler, metin düzenlerinin, satırları ve kelimeleri nereye ayıracağınızla ilgili daha akıllı kararlar almasına yardımcı olması için <wbr> veya ­ kullanmaktır.
Geliştirici olarak, bir başlığın veya paragrafın son boyutunu, yazı tipi boyutunu, hatta dilini bilmezsiniz. Metin kaydırmanın etkili ve estetik bir şekilde uygulanması için gereken tüm değişkenler tarayıcıda bulunur. Bu nedenle, başlık sarmalama aşağıdaki resimde gösterildiği gibi gösterilmektedir:
.unbalanced {
max-inline-size: 50ch;
}
CSS Text 4'teki text-wrap: balance ile tarayıcıdan metin için en iyi dengeli satır sarmalama çözümünü bulmasını isteyebilirsiniz. Tarayıcı; yazı tipi boyutu, dil ve ayrılan alan gibi tüm faktörleri bilir.
Tarayıcıda dengeli metin kaydırma işleminin sonuçları bugün şöyle görünür:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Resimleri, hata ayıklama bilgileri üzerine yerleştirilmiş olarak, sabit, yan yana görmek yararlı olacaktır.
Dengeli metin bloğundan dolayı gözünüz çok daha memnun olacaktır. Dikkati daha iyi çeker ve genel olarak okuması daha kolaydır.
Dengeyi bulma
Başlıklar okuyucuların ilk gördüğü şeydir; görsel olarak ilgi çekici ve okunması kolay olmalıdır. Bu, kullanıcıların dikkatini çeker, kalite ve güvence hissi sağlar. İyi bir yazı biçimi okuyucuların öz güvenini kazanır ve okumaya devam etmelerini sağlar.
Geleneksel olarak bu görev elle veya optik olarak yapılırdı. Çünkü, metni dengeleyen tasarımcı, matematiği değil gözü memnun etmek ister. Bu konu genellikle metrik ve optik hizalama olarak adlandırılır. New York Times gibi büyük yayınlar için başlık dengeleme çok önemli bir kullanıcı deneyimi ayrıntısıdır.
Tipografideki metni dengelemek, yazıcıların harfleri elle yerleştirdiği ilk baskı zamanlarına kadar uzanır. Araçlar ve teknikler geliştikçe sonuçlar da değişti. Günümüzde tasarımcılar, tasarımlarındaki metni dengelemek için renk, ağırlık, boyut ve daha pek çok şeyden yararlanıyor.
Ancak dokümanın boyutları ve renkleri kullanıcılara göre değiştiğinden web'de daha az denetim bulunur. text-wrap: balance, baskı sektöründeki tasarımcıların eserlerini ve geleneklerini bir araya getirerek web'de metin arasında otomatik bir şekilde denge kurma sanatını taşır.
Bakiye başlıkları
Bu, text-wrap: balance için birincil kullanım alanıdır ve öyle olmalıdır. Gözü büyüklükle çizin ve gözün okuması için simetrik ve okunabilir hale getirin. Tüm başlıkları aşağıdaki CSS ile dengeli metin sarmalamaya ayarlayın:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Metnin sarmalanması ve dolayısıyla bir yerden maksimum satır uzunluğu uygulanması gerektiğinden, yalnızca bu stili uygulamak beklediğiniz sonuçları vermeyebilir. Bu yayındaki örneklerde bir max-inline-size grubu göreceksiniz. Bu stil, max-width gibidir ancak herhangi bir dil için bir kez ayarlanabilir.
Sınırlamalar
Metinleri dengeleme görevi ücretsiz değildir. Tarayıcının en iyi dengeli sarmalama çözümünü bulmak için iterasyonlar arasında döngü oluşturması gerekir. Bu performans maliyeti bir kuralla azaltılır. Yalnızca altı sarmalanmış satır ve altı satır için geçerlidir.
Performansla ilgili konular
Tasarımınızın tamamına metin kaydırma dengelemesi uygulamak iyi bir fikir değildir. Altı satır sınırı nedeniyle bu istek boşa harcanmış olur ve sayfa oluşturma hızını etkileyebilir.
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
Bu özelliğin en büyük avantajı, günümüzde JavaScript'te yaptığınız gibi, yazı tipi yüklemesi ile metin kaydırma işlemi için beklemenize gerek olmamasıdır. Tarayıcı işi halleder!
white-space mülküyle etkileşimler
Metin kaydırma özelliği white-space özelliğiyle rekabet eder çünkü biri sarmalama, diğeri dengeli sarmalama ister. Beyaz alan özelliğinin ayarını kaldırarak bunun üstesinden gelebilirsiniz. Daha sonra dengeli sarmalama tekrar uygulanabilir.
.balanced {
white-space: unset;
text-wrap: balance;
}
Dengeleme, öğenin satır içi boyutunu değiştirmez
Dengeli metin sarmalama için bazı JavaScript çözümlerinin, kapsayıcı öğenin kendisinin max-width değerini değiştirdikleri için bir avantajı vardır. Bu özellik, dengeli bloka "daraltma" şeklinde ek bir bonusa da sahiptir. text-wrap:
balance bu etkiye sahip değildir ve şu örnekte görülebilir:
Geliştirici Araçları'ndan gösterilen genişliğin sonunda neden fazladan bir boşluk olduğunu görüyor musunuz?
Bunun nedeni boyut değiştiren bir stil değil, yalnızca sarmalama stili olmasıdır. Bu nedenle, en azından benim için text-wrap: balance özelliğinin o kadar iyi olmadığı birkaç senaryo vardır. Örneğin, bir kartın (veya kenarlıkları ya da gölgeleri olan herhangi bir kapsayıcı) içindeki başlıklar.
Dengeli metin sarmalama ironik bir şekilde, içerilen öğe ile dengesizliğe neden olur.
Tarayıcının kullandığı tekniğin kısa bir açıklaması
Tarayıcı, ek satırlara neden olmayan, bir CSS pikselinde durarak (görüntü pikseli olarak gösterilmez) en küçük genişlik için etkili bir ikili program araması yapar. İkili program aramasındaki adımları daha da en aza indirmek için tarayıcı, ortalama çizgi genişliğinin% 80'i ile başlar.