CSS text-wrap: balance

Dengeli metin blokları için satır sonlarını manuel olarak oluşturmaya yönelik klasik bir tipografi tekniği CSS'ye geliyor.

Adam Argyle

text-wrap için balance değeri, CSS Text Level 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 olmadan tasarımcılar, içerik editörleri ve yayıncılar, satırların dengelenme şeklini değiştirmek için çok az araca sahiptir. Metin düzenlerinin satır ve kelime sonlandırma konusunda daha akıllı kararlar vermesine yardımcı olmak için <wbr> veya ­ kullanmak en iyi seçeneklerdir.

Geliştirici olarak, bir başlığın veya paragrafın son boyutunu, yazı tipi boyutunu, hatta dilini bilemezsiniz. Metin kaydırmanın etkili ve estetik bir şekilde işlenmesi için gereken tüm değişkenler tarayıcıda bulunur. Bu nedenle, aşağıdaki resimde gösterildiği gibi başlık sarmalama işlemi görüyoruz:

.unbalanced {
  max-inline-size: 50ch;
}

CSS Text 4'teki text-wrap: balance özelliğiyle tarayıcıdan metin için en iyi dengelenmiş 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ırmanın sonuçları bugün şu şekilde görünüyor:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Bunları yan yana, hareketsiz ve hata ayıklama bilgileri olmadan görmek faydalıdır.

Gözünüz, dengeli metin bloğundan çok daha fazla memnun kalacaktır. Bu metin bloğu, daha iyi dikkat çeker ve genel olarak daha kolay okunur.

Dengeyi bulma

Okuyucuların ilk gördüğü şey başlıklar olduğundan başlıklar görsel olarak çekici ve kolay okunur olmalıdır. Bu sayede kullanıcıların dikkati çekilir ve kalite ile güven duygusu oluşturulur. İyi bir tipografi, okuyuculara güven vererek okumaya devam etmelerini sağlar.

Geleneksel olarak bu görev elle veya optik olarak yapılırdı. Metni dengeleyen tasarımcı, matematiksel olarak değil, görsel olarak hoş bir sonuç elde etmek isterdi. 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, kullanıcı deneyimi açısından çok önemli bir ayrıntıdır.

Tipografide metni dengeleme, matbaanın ilk günlerine kadar uzanır. O zamanlar matbaacılar harfleri elle yerleştirirdi. 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 daha fazlasını kullanır.

Ancak web'de, doküman kullanıcıya göre boyut ve renk değiştirdiğinden daha az kontrol mevcuttur. text-wrap: balance, metin dengeleme sanatını web'e otomatik bir şekilde getirerek baskı sektöründeki tasarımcıların çalışmalarını ve geleneklerini temel alır.

Denge başlıkları

Bu, text-wrap: balance için birincil kullanım alanı olmalı ve olacaktır. Boyutla dikkat çekin, simetrik ve okunabilir 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 kaydırılması ve bu nedenle bir yerden maksimum satır uzunluğu uygulanması gerektiğinden, bu stili uygulamanız beklediğiniz sonuçları vermeyebilir. Bu yayındaki örneklerde max-inline-size kümesini göreceksiniz. Bu stil, max-width stiline benzer ancak herhangi bir dil için bir kez ayarlanabilir.

Sınırlamalar

Metni dengeleme görevi ücretsiz değildir. Tarayıcının, en iyi dengelenmiş sarmalama çözümünü bulmak için yinelemeler arasında döngü oluşturması gerekir. Bu performans maliyeti, yalnızca altı sarmalanmış satır ve daha azı için geçerli olan bir kural tarafından azaltılır.

Performansla ilgili konular

Metin sarmalama dengelemesini tasarımınızın tamamına uygulamak iyi bir fikir değildir. Altı satır sınırı nedeniyle bu istek boşa gider 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ı, JavaScript ile yaptığınız gibi beklemenize ve metin kaydırma dengelemesini yazı tipi yükleme ile zamanlamanıza gerek olmamasıdır. Tarayıcı bu işi sizin için yapar.

white-space özelliğiyle etkileşimler

Dengeleme metni, white-space özelliğiyle çakışır. Bunun nedeni, birinin sarmalama olmamasını, diğerinin ise dengeli sarmalama olmasını istemesidir. Bu sorunu çözmek için boşluk özelliğini kaldırın. Böylece 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 avantajı, kapsayan öğenin max-width özelliğini değiştirmeleridir. Bu, dengeli blokta "shrink wrapped" olma gibi ek bir avantaj sağlar. text-wrap: balance bu etkiye sahip değildir ve bu örnekte görülebilir:

Geliştirici Araçları'nda gösterilen genişliğin sonunda neden bir sürü ekstra alan olduğunu görüyor musunuz? Bunun nedeni, bu stilin yalnızca sarmalama stili olması, boyut değiştirme stili olmamasıdır. Bu nedenle, en azından benim görüşüme göre text-wrap: balance stilinin pek iyi olmadığı birkaç senaryo vardır. Örneğin, bir kartın (veya kenarlıkları ya da gölgeleri olan herhangi bir kapsayıcının) içindeki başlıklar.

Dengeli metin kaydırma, ironik bir şekilde kapsanan öğede dengesizlik oluşturur.

Tarayıcının kullandığı tekniğin kısa açıklaması

Tarayıcı, ek satırlara neden olmayan en küçük genişlik için etkili bir şekilde ikili arama yapar ve bir CSS pikselinde (görüntü pikseli değil) durur. Tarayıcı, ikili aramadaki adımları daha da azaltmak için ortalama çizgi genişliğinin% 80'iyle başlar.