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ın, içerik editörlerinin ve yayıncıların birkaç araç çizgilerin dengesini değiştirmek için... Metin düzenlerini satır ve kelimelerin nerede bölüneceği konusunda daha akıllıca kararlar almaya yönlendirmek için en iyi seçenekler <wbr> veya ­ kullanmaktır.

Geliştirici olarak, bir sitenin son boyutunu, yazı tipi boyutunu, hatta dilini paragraftan ibarettir. 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ıda dengeli metin kaydırma özelliğinin sonuçları şu şekilde görünür:

.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 kullandığınızda gözleriniz daha fazla memnun olacaktır. Tutun ve genel olarak daha kolay okunur.

Dengeyi kurma

Okuyucuların ilk gördüğü şey başlıklar olduğundan, başlıklar görsel açıdan ilgi çekici ve kolay okunmalıdır. Bu sayede kullanıcıların dikkatini çekebilir, kalite ve güven duygusu verebilirsiniz. Yazı tiplerinin iyi olması okuyuculara güven verir ve onları okumaya teşvik eder okumaya devam edin.

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 genelde Bu yöntemlere metrik ya da optik hizalama adı verilir. Örneğin, New York Times, başlık dengeleme, kullanıcı deneyimiyle ilgili çok önemli bir ayrıntıdır.

Tipografide metinlerin dengelenmesi için yazıcılar, ilk günlere kadar uzanır. mektuplar yerleştirir. Araçlar ve teknikler geliştikçe sonuçlar da gelişti. Günümüzde tasarımcılar metin dengesini sağlamak için renk, ağırlık, boyut ve diğer özelliklere sahip inceleyebilirsiniz.

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, basılı sektördeki tasarımcıların çalışmalarını ve geleneklerini temel alarak metin dengeleme sanatını web'e otomatik bir şekilde getirir.

Başlıkları dengeleme

Bu, text-wrap: balance için birincil kullanım alanı olacak ve olmalıdır. Çizim yap gözün içine alın ve gözün okuması için simetrik ve okunabilir olmasını sağlayın. 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ının iterasyonlarıyla birlikte en iyi dengeli sarmalama çözümünü bulun. 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 bir altı satır sınırı nedeniyle boşa giden istek. Bu, 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ı, metin kaydırmayı beklemek zorunda kalmadan yazı tipi yükleme ile dengelemeden bahsedeceğiz. İlgili içeriği oluşturmak için kullanılan tarayıcı halleder.

white-space özelliğiyle etkileşimler

Metinleri dengelemek için white-space Çünkü biri sarmalama istemiyor, diğeri ise sarmalamadan bahsedeceğiz. 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 için bazı JavaScript çözümleri için bir avantaj vardır sarmalama, max-width öğesini değiştirir. Bu, dengelenmiş 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:

DevTools'da gösterilen genişliğin sonunda bir sürü boşluk olduğunu görüyor musunuz? Çünkü boyut değiştiren bir stil değil, yalnızca sarmalama stilidir. 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 (veya herhangi bir kapsayıcının) içindeki (ör. kenarlık veya gölge bulunan)

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ı, boyutunuzu kullanan en küçük genişlik için ek satıra neden olmaz, bir CSS pikselinde durur ( piksel) kapsıyor. İkili aramadaki adımları daha da küçültmek için tarayıcı Ortalama çizgi genişliğinin% 80'i.