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. 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:
![Başlık, Geliştirici Araçları ile vurgulanıyor, satır içi alanının tam genişliğini kaplıyor ve ikinci satırda iki kelime bulunuyor.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=9&hl=tr)
.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:
![Başlık, önceki Geliştirici Araçları gibi vurgulanıyor. Bu seferki başlık tam genişliği kaplamıyor. Sondan önce yeni bir satıra başladı ve bu nedenle dengeli bir metin bloğu oldu.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=9&hl=tr)
.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.