Dengeli metin blokları için satır sonlarının elle yazılmasını sağlayan klasik bir tipografi tekniği CSS'de ortaya çıkıyor.
text-wrap için balance değeri, CSS Metin Düzeyi 4'ün bir parçasıdır. Bu tek 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 olmadan; tasarımcılar, içerik editörleri ve yayıncılar, çizgileri dengelemek için
birkaç araçtan yararlanabilir. Mevcut en iyi seçenekler, satırların ve kelimelerin nereden bölüneceği konusunda daha akıllı kararlar almasına yardımcı olan metin düzenlerine rehberlik etmesi için <wbr> veya ­ kullanmaktır.
Geliştirici olarak bir başlığın veya paragrafın son boyutunu, yazı tipi boyutunu, hatta dilini bile bilmezsiniz. Metin sarmalamanın etkili ve estetik kullanımı için gereken tüm değişkenler tarayıcıdadır. Bu nedenle, aşağıdaki resimde olduğu gibi başlık sarmalama görürüz:
.unbalanced {
max-inline-size: 50ch;
}
CSS Metin 4'teki text-wrap: balance ile tarayıcıdan metin için en iyi dengeli satır kaydırma çözümünü bulmasını isteyebilirsiniz. Tarayıcı; yazı tipi boyutu, dil ve ayrılan alan gibi tüm faktörleri bilir.
Tarayıcı dengeli metin kaydırma işleminin sonuçları bugünkü gibi görünüyor:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Bunları yan yana, sabit ve hata ayıklama bilgileri olmadan görmek faydalıdır.
Dengeli metin bloğu kullandığınızda gözleriniz daha fazla memnun olacaktır. İnsanların dikkatini daha çok çeker ve okunması daha kolay olur.
Dengeyi kurma
Başlıklar, okuyucuların ilk gördüğü şeydir. Başlıklar görsel olarak ilgi çekici ve kolay okunur olmalıdır. Bu, kullanıcının dikkatini çekerken bir kalite ve güvence hissi verir. Yazı tipinin iyi olması okuyuculara güven verir ve onları okumaya devam etmeye teşvik eder.
Geleneksel olarak bu görev elle veya optik olarak yapılırdı. Çünkü metni dengeleyen tasarımcının amacı matematik yerine gözü memnun etmektir. Bu konuya genelde optik hizalama yerine metrik denir. 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.
Tipografide metin dengelemenin tarihi, yazıcıların mektupları el ile yerleştirdiği ilk günlere dayanır. Araçlar ve teknikler geliştikçe sonuçlar da gelişti. Günümüzde tasarımcılar tasarımlarındaki metni dengelemek için renk, ağırlık, boyut ve diğer özelliklere sahip.
Ancak doküman, boyut ve renkleri kullanıcılara göre değiştirdiğinden, web'de daha az denetim olanağı sunulur. text-wrap: balance, baskı sektöründeki tasarımcıların çalışmaları ve gelenekleri üzerine inşa ederek web'de metin dengeleme sanatını otomatik bir şekilde sunar.
Bakiye başlıkları
Bu, text-wrap: balance için birincil kullanım alanı olacaktır ve öyle olmalıdır. Gözü büyüklükte olacak şekilde çizin ve gözün okuyabilmesi için simetrik ve okunaklı hale getirin. Tüm başlıkları aşağıdaki CSS ile dengeli metin kaydırmaya ayarlayın:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Metnin sarmalanması ve bu nedenle bir yerden maksimum satır uzunluğu uygulanması gerektiğinden bu stilin uygulanması beklediğiniz sonuçları vermeyebilir. Bu yayındaki örneklerde bir max-inline-size grubu göreceksiniz. Bu stil max-width benzeridir ancak herhangi bir dil için bir kez ayarlanabilir.
Sınırlamalar
Metin dengeleme görevi ücretsiz değildir. Tarayıcının en iyi dengeli sarmalama çözümünü bulmak için yinelemeleri tekrarlaması gerekir. Bu performans maliyeti bir kural tarafından azaltılır. Yalnızca altı ve daha az sarmalanmış satır için geçerlidir.
Performansla ilgili konular
Tasarımınızın tamamına metin kaydırma dengeleme uygulamak iyi bir fikir değildir. Bu, altı satır sınırı nedeniyle boşa giden bir istektir 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ı, şu anda JavaScript'te yaptığınız gibi metin kaydırmayı, yazı tipi yükleme sırasında beklemek zorunda kalmamanızdır. Tarayıcı bunları hallediyor!
white-space özelliğiyle etkileşimler
Biri sarmalama, diğeri ise dengeli sarmalama istediği için metnin dengelenmesi white-space özelliğiyle rekabet eder. Boşluk özelliğinin ayarını kaldırarak bu sorunu çözebilirsiniz. Dengeli sarmalama tekrar uygulanabilir.
.balanced {
white-space: unset;
text-wrap: balance;
}
Dengeleme öğenin satır içi boyutunu değiştirmez
Dengeli metin kaydırmaya yönelik bazı JavaScript çözümleri, kapsayıcı öğenin max-width değerini değiştirdiklerinden bazı avantajlar sunar. Bu bonus, dengeli bloka "küçültülmüş" şeklinde uygulanır. text-wrap:
balance bu etkiye sahip değildir ve aşağıdaki örnekte görülebilir:
Geliştirici Araçları'nda gösterilen genişliğin sonunda nasıl ekstra boşluk olduğunu biliyor musunuz?
Çünkü boyut değiştiren bir stil değil, yalnızca sarmalama stilidir. Bu nedenle, en azından bana göre, text-wrap: balance ürününün o kadar da iyi olmadığı birkaç senaryo var. Örneğin, bir kartın (veya kenarlıklı ya da gölgeli herhangi bir kapsayıcı) içindeki başlıklar.
Dengeli metin sarmalama, içerdiği öğede dengesizliğe neden olur.
Tarayıcının kullandığı tekniğin kısa bir açıklaması
Tarayıcı, en küçük genişlik için etkili bir ikili program araması yapar. Bu arama, ek satırlara neden olmaz ve bir CSS pikselinde (görüntü pikseli olarak değil) durur. İkili program aramasındaki adımları daha da küçültmek için tarayıcı, ortalama çizgi genişliğinin% 80'i ile başlar.