CSS text-wrap: bakiye

Dengeli metin blokları için satır aralarını manuel olarak yazmak gibi klasik bir yazım tekniği CSS'ye eklendi.

Adam Argyle

text-wrap için balance değeri, CSS Metin Düzeyi 4'ün bir parçasıdır. Bu tek satır CSS'nin 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 nihai boyutunu, yazı tipi boyutunu ve hatta dilini bilmiyorsunuzdur. Metin kaydırma işleminin etkili ve estetik bir şekilde yapılması için gereken tüm değişkenler tarayıcıdadır. Bu nedenle, aşağıdaki resimde gösterildiği gibi başlık kaydırma işlemini görüyoruz:

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

CSS Metin 4'teki text-wrap: balance ile tarayıcıdan metin için en dengeli satır sarma çö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 yer almayan bir şekilde görmek faydalı olacaktır.

Dengeli metin bloğu, gözünüze çok daha hoş gelecektir. İ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ıların dikkatini çeker ve kalite ile güven duygusu verir. İyi bir yazı tipi, okuyuculara güven vererek okumaya devam etmelerini sağlar.

Metni dengeleyen tasarımcı, matematiği değil gözü memnun etmek istediği için bu görev geleneksel olarak elle veya optik olarak yapılır. 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 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 metinleri dengelemek için renk, kalınlık, boyut ve daha fazlasını kullanabiliyor.

Ancak web'de, doküman boyutları ve renkleri kullanıcılara göre değiştiği için daha az kontrol sahibi olursunuz. 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.

Başlıkları dengeleme

Bu, text-wrap: balance için birincil kullanım alanı olacaktır ve öyle olmalıdır. Gözü uygun boyutlarda çizin ve simetrik olmasını sağlayın. Ayrıca, okunaklı olması için göze dikkat çekin. Aşağıdaki CSS ile tüm başlıkları dengeli metin kaydırmasına ayarlayın:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Metnin kaydırılması ve dolayısıyla bir yerden maksimum satır uzunluğunun uygulanması gerektiğinden, bu stilin uygulanması size beklediğiniz sonuçları vermeyebilir. Bu yayındaki örneklerde bir max-inline-size seti göreceksiniz. Bu stil max-width'a benzer ancak herhangi bir dil için bir kez ayarlanabilir.

Sınırlamalar

Metni dengeleme görevi ücretsiz değildir. Tarayıcı, en iyi dengeli sarma çözümünü bulmak için iterasyonları döngü içinde çalıştırmalıdır. Bu performans maliyeti, yalnızca altı satır ve altı satırdan kısa metinler için geçerli olan bir kuralla azaltılır.

Performansla ilgili konular

Metin kaydırma dengesini tasarımınızın tamamına 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 ile yaptığınız gibi yazım satırını hizalarken yazı tipinin yüklenmesini beklemenize ve bu işlemi zamanlamanız gerekmemesidir. Tarayıcı bunları hallediyor!

white-space mülkü ile etkileşimler

Metni dengele özelliği, white-space özelliğiyle rekabet eder. Bunun nedeni, biri sarmalama yapılmamasını, diğeri ise dengeli sarmalama yapılmasını istemesidir. Boşluk özelliğini kaldırarak bu sorunun üstesinden gelebilirsiniz. Ardından dengeli sarma işlemi tekrar uygulanabilir.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

Dengeleme öğenin satır içi boyutunu değiştirmez

Dengeli metin kaydırma için JavaScript çözümlerinin bazılarında, içeren öğenin max-width değerini değiştirdikleri için avantaj vardır. Bu, dengeli bloğa "sıkıca sarılmış" olma avantajına sahiptir. 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 bir sürü boşluk olduğunu görüyor musunuz? Bunun nedeni, boyutu değiştiren bir stil değil, yalnızca sarmalayan bir stil olmasıdır. Bu nedenle, en azından benim görüşüme göre, text-wrap: balance'ün çok iyi olmadığı birkaç senaryo vardır. Örneğin, bir kartın içindeki başlıklar (veya kenarlıkları veya gölgeleri olan herhangi bir kapsayıcı).

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

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

Tarayıcı, ek satırlara neden olmayan en küçük genişlik için etkili bir ikili arama gerçekleştirir ve bir CSS pikseli (görüntü pikseli değil) üzerinde 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.