CSS text-wrap: bakiye

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.

Adam Argyle

text-wrap için balance değeri, CSS Metin Düzeyi 4'ün bir parçasıdır. Nasıl yapıldığını öğrenmek için bu yayındaki örneklere bu tek CSS satırı, metin düzenlerinizi büyük ölçüde iyileştirebilir.

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... Mevcut en iyi seçenekler <wbr> veya Yardım etmek için ­ satır ve kelimeleri nerede ayıracağınız konusunda daha akıllı kararlar almak için metin düzenlerine rehberlik etme.

Geliştirici olarak, bir sitenin son boyutunu, yazı tipi boyutunu, hatta dilini paragraftan ibarettir. Etkili ve estetik görünüm için gereken tüm değişkenler özellikleri tarayıcı içindedir. Bu nedenle, aşağıdaki resimde olduğu gibi sarmalama:

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

CSS Metin 4'teki text-wrap: balance ile tarayıcının şunları yapmasını isteyebilirsiniz: metin için en iyi dengeli satır kaydırma çözümünü bulmak 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. Tutun ve genel olarak daha kolay okunur.

Dengeyi kurma

Okuyucuların gördüğü ilk şey başlıklardır. görsel olarak çekici olmalı ve okuması daha kolay olur. Bu, kullanıcının dikkatini çeker ve kullanıcılara kaliteli bir emin olmanız gerekir. Yazı tipinin iyi olması okuyuculara güven verir ve onları okumaya teşvik eder. okumaya devam edin.

Geleneksel olarak bu görev elle veya optik bir şekilde Metin dengesini kurmak, matematiği değil, göze hitap etmektir. 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.

Öte yandan, doküman değişiklik gösterdiği için web'de daha az denetim kullanıcılara göre özelleştirebilirsiniz. text-wrap: balance, sanatla dolu otomatik bir şekilde web’de metin dengesi oluşturur, çalışmayı geliştirir ve geleneklerini ortaya koydu.

Bakiye başlıkları

Bu, text-wrap: balance için birincil kullanım alanı olacaktır ve öyle 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. Ayarla aşağıdaki CSS ile dengeli metin sarmalaması için tüm başlıkları:

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

Yalnızca bu stili uygulamak, beklediğiniz sonuçları vermeyebilir çünkü metnin kaydırılması ve bu nedenle, bir yerlerde. Bir max-inline-size bu yayındaki örneklerde ayarlandı, bu stil max-width gibidir ancak ayarlanabilir herhangi bir dil için bir kez.

Sınırlamalar

Metin dengeleme görevi ücretsiz değildir. Tarayıcının iterasyonlarıyla birlikte en iyi dengeli sarmalama çözümünü bulun. Bu performans bir kural tarafından azaltılırsa yalnızca altı ve daha az sarmalanmış satır için çalışır.

Performansla ilgili konular

Tasarımınızın tamamına metin kaydırma dengeleme 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 ayarlayarak bu sorunun üstesinden gelin, ardından dengeli sarmalama 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 ek bir avantaj olarak "küçültülmüş" olmalıdır. sunuyorum. 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. Bunun nedeni: text-wrap: balance değerinin pek iyi olmadığı birkaç senaryo vardır. Örneğin, benim düşünceme göre. Ö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) ekleyebilirsiniz. İkili aramadaki adımları daha da en aza indirmek için tarayıcı Ortalama çizgi genişliğinin% 80'i.