CSS text-box-trim

Metin içeriğinizin üstünden ve altından yer açın, görsel dengeye ulaşın.

Adam Argyle

Yayınlanma tarihi: 14 Ocak 2025

Chrome 133'ten itibaren text-box, geliştiricilerin ve tasarımcıların metnin üstündeki ve altındaki alanı özelleştirmesine olanak tanır.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Uzun yazı:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading;
line-fit-edge: alphabetic | text;

Kısayol:

text-box: trim-both cap alphabetic;

Bu özellik, metnin üstündeki ve altındaki alanı (ör. <h1>, <button> ve <p>) kontrol etmenizi sağlar. Her yazı tipi, öğenin boyutuna katkıda bulunan bu blok yönlü alan miktarını farklı şekilde oluşturur. Bu kaotik alan katkısı kolayca ölçülemez ve şimdiye kadar kontrol edilmesi imkansızdı.

Yazı tipi biliyor, artık CSS de biliyor.

https://codepen.io/web-dot-dev/pen/xbKjRxL

Bir yazı tipinin üstündeki ve altındaki boşluk, web'in metni nasıl düzenlediğine bağlıdır ve "yarım satır aralığı" olarak adlandırılır. Bu konu, Matthias Ott tarafından yazılan CSS'de Başlıkta Boşluk Bırakma başlıklı makalede ustalıkla ele alınmıştır. Temel olarak, yazı dizilimi elle yapıldığında metin satırlarını ayırmak için metal kurşun parçaları kullanılıyordu. Web, bu yönlendirme parçasını ikiye böler ve bir parçayı içeriğin üstüne, diğerini de altına dağıtır.

Yarım aralığı göstermek için metnin üstünde ve altında pembe bir çubukla bir başlık gösterilir.
Kaynak

Bu geçmiş anlamlı çünkü text-box bize her yarı için birer ad verir: üst ve alt. Ayrıca, videoyu kırpabilirsiniz.

text-box için de önceki çalışmalar var. Ethan Wang'ın leading-trim'ın (text-box'ün önceki adı) ilk kez tanıtıldığı Leading-Trim: The Future Of Digital Typesetting (Boşluk: Dijital Yazı Düzenlemenin Geleceği) adlı heyecan verici gönderisini hatırlayabilirsiniz.

Üst ve alt kısımlarında fazladan boşluk olan bir başlık gösteriliyor. Bu boşluklar makasla kesilmiş ve kaldırılmış gibi görünüyor.

Metin kırpma işlemine giriş noktanız, tasarımcılara yönelik Figma ve "dikey kırpma" kontrolleri olabilir. Bu X yayını, dikey kırpma seçeneğinin nerede olduğunu ve düğmeler için nasıl yararlı olduğunu gösterir.

Kaynak

Buraya nasıl geldiğinizden bağımsız olarak, küçük görünen bu yazı tipi kontrolü büyük bir fark yaratabilir.

Özelliğe ve söz dizimine genel bakış

text-box ile çalışırken ihtiyaç duyacağınız en yaygın iki kısa açıklamayı aşağıda bulabilirsiniz:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Bu özelliğin en yaygın kullanımı, her ikisini de cap alphabetic olarak kırpmaktır. Aşağıdaki demolarda bu yöntem birçok kez kullanılmıştır. Ancak önceki örnekte, optik denge için benzersiz şekillerde yararlı olduğu için ex alphabetic de gösterilmektedir.

Kaşif oyun alanı

Aşağıdaki demo, açılır menüleri kullanarak söz dizimini keşfetmenize ve sonuçları görmenize olanak tanır. Yazı tiplerini, kırpma değerlerini ve renk kodlu görselleri ve etiketleri değiştirebilirsiniz.

Söz dizimi gezgini demosunun ekran görüntüsü. Yazı tipini ve farklı bir yazı tipi seçmek için bir açılır menüyü gösterir. Metin kutusu içeren bir söz dizimi önizlemesi: trim-both cap alfabetik söz dizimi vurgulanmış ve gösterilmiştir. Son olarak, kırpma değerlerini seçmek için 3 açılır liste daha vardır.

Deneyebileceğiniz yöntemler:

  1. text-box-trim'ün tek satır ve çok satır metin varyantlarında nasıl çalıştığını görsel olarak inceleme
  2. Fareyle bir varyantın üzerine gelerek bu efekti elde etmek için kullanılan kırpma değerlerini görme.
  3. Yazı tipini değiştirme
  4. Metin kutusunun yalnızca bir tarafının kırpılması.
  5. Oyun oynarken söz dizimini inceleyin.
https://codepen.io/web-dot-dev/pen/RNbyooE

Bu araçla neler oluşturabilirim veya hangi sorunları çözer?

Bu kırpma özelliğinden çok daha basit bazı merkezleme ve hizalama çözümleri ortaya çıkar. Hatta içerikler arasında gap gibi bir şey kullanılarak uygun boşluklara yaklaşabilirsiniz.

2 içerik grubu arasındaki karşılaştırma gösteriliyor. İlk grupta yarım boşluk, ikinci grupta ise kısaltılmış boşluk vardır. Sonuç olarak, ikinci grup daha sıkı bir şekilde bir aradadır.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Daha kolay merkezleme

Daha küçük, satır içi ve içeriğe özgü bileşenler için padding: 10px, tüm kenarlarda eşit aralığa sahip bir öğe belirtmek üzere kullanılabilecek makul bir stildir. Ancak bu yöntem, genellikle üstte ve altta fazladan boşluk bulunduğundan kullanıcıların kafasını karıştırabilir.

Geliştiriciler bu sorunu gidermek için genellikle yarım ara verme etkisini dengelemek amacıyla üst ve alt kısımlara (blok) açıkça daha az dolgu ekler.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

Bu noktada, her şey optik olarak merkezlenene kadar değer kombinasyonlarını denemeye devam ederiz. Bu, bir ekranda ve işletim sisteminde iyi görünebilir ancak başka bir ekranda ve işletim sisteminde kötü görünebilir.

text-box, metinden yarım satır aralığını kırpmamıza olanak tanır. Bu sayede 10px gibi eşit dolgu değerleri kullanışlı olur:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
İki örnek gösterilmektedir. İlkinde, 10 piksel dolgu ve yarım satır aralığı olan bir öğe gösterilmektedir. İkincisi, aynı öğeyi text-box: trim-both cap alphabetic ile gösterir. Sonuç olarak, ikinci düğme optik olarak ortalanacaktır.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Aşağıda, text-box ile alanın nasıl kırpıldığını gösteren birkaç <button> öğesi verilmiştir. Bu öğelerde, pratik bir etkileşimli öğede padding: 10px'nin tüm taraflarının eşit görünmesi sağlanmıştır. Alternatif yazı tipinin, yarı satır aralığı için oldukça farklı sonuçlar verebileceğini unutmayın.

Üç düğme grubu gösterilir. İlk grupta normal bir sans serif yazı tipi gösterilir. İkinci grupta ise süslü veya eğlenceli bir yazı tipi gösterilir. Üçüncü grupta, aynı efekt el yazısı yazı tipiyle gösterilmektedir. Burada amaç, her yazı tipinin farklı yarı satır aralığına sahip olduğunu ancak kırpma değerlerinin aynı olduğunu ve boşluğu normalleştirebileceğini göstermektir.
https://codepen.io/web-dot-dev/pen/mybLOMg

Genellikle kategorileri veya rozetleri göstermek için kullanılan <span> öğeleri aşağıda verilmiştir. Eşit kenarlı dolgunun en iyi çözüm olması gereken başka bir an ancak text-box'e kadar bu sorunun etrafından dolaşmak zorunda kaldık.

Etiketler yan yana karşılaştırılarak gösterilir. İlk grupta yarım boşluk, ikinci grupta ise kısaltılmış boşluk vardır. Sonuç olarak, ikinci grup daha sıkı bir şekilde bir araya getirilir ve optik olarak ortalanacaktır.
https://codepen.io/web-dot-dev/pen/mybLOMg

Daha kolay hizalama

Metin kutusunun üstündeki (over) ve altındaki (under) fazladan, kontrol edilemeyen yarı satır aralığı da hizalamayı zorlaştırır. Aşağıdaki örneklerde, yarım satır aralığının ne zaman hizalamayı zorlaştırabileceği ve bir metin kutusunun blok kenarlarının nasıl kırpılarak daha iyi hizalamalar oluşturulabileceği gösterilmektedir.

Burada bir resim metnin yanına yerleştirilmiştir. Resim, metnin ihtiyaç duyduğu yüksekliğe kadar büyür ancak text-box olmadan resim her zaman biraz daha uzun olur. text-box ile resim, metin içeriğiyle mükemmel bir şekilde hizalanabilir.

https://codepen.io/web-dot-dev/pen/yyBjVpg

Satır sarmalama içeren senaryolarda, boşluğun ilk biçimlendirilmiş metin satırının üzerinde ve son biçimlendirilmiş metin satırının altında olduğunu unutmayın.

Aşağıdaki örnekte, özelliğin writing-mode'teki bir değişikliğe nasıl mantıksal olarak uyum sağladığını görebilirsiniz. Metni değiştirmeyi deneyin, düzenin nasıl hizalı kaldığını izleyin.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

Çalışmaya devam edin

Want to know more? Aşağıdaki bağlantı listesi, çeşitli ek bilgiler ve kullanım alanları sunar.