CSS text-box-trim

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.

Longhand:

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

Shorthand:

text-box: trim-both cap alphabetic;

Bu özellik, metnin üstündeki ve altındaki boşluğu kontrol etmenizi sağlar. Örneğin, <h1>, <button> ve <p>. Her yazı tipi, öğenin boyutuna katkıda bulunan farklı miktarda bu blok yönlü alanı üretir. Bu kaotik alan katkısı kolayca ölçülemez ve şimdiye kadar kontrol edilemezdi.

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

Yazı tipinin üstündeki ve altındaki boşluk, web'in metni düzenleme şeklinden kaynaklanır. Bu boşluğa "yarım satır aralığı" denir. Bu konu, Matthias Ott'un The Thing With Leading In CSS adlı gönderisinde uzman bir şekilde ele alınmıştır. Temel olarak, dizgi işlemi elle yapılırken metin satırlarını ayırmak için metal kurşun parçaları kullanılıyordu. Web, önde gelenlerden ilham alarak önde geleni iki parçaya ayırır ve bir parçayı içeriğin üstüne, bir parçayı da altına dağıtır.

Bu geçmiş, text-box her yarıya ad verdiği için anlamlıdır: üst ve alt. Ayrıca, bu geçmişi kırpma olanağı da sunar.

text-box ile ilgili tekniğin bilinen durumu da var. Ethan Wang'ın Leading-Trim: The Future Of Digital Typesetting (Leading-Trim: Dijital Dizginin Geleceği) başlıklı heyecan verici gönderisini hatırlayabilirsiniz. Bu gönderide leading-trim (text-box'nın önceki adı) ilk kez tanıtılmıştı.

Metin kırpma işlemine giriş noktanız, tasarımcılar için Figma ve "dikey kırpma" kontrolleri olabilir. Bu X gönderisinde, bu dikey kırpma seçeneğinin nerede bulunduğu ve düğmeler için nasıl faydalı olduğu gösterilmektedir.

Bu sayfaya nasıl geldiğinizden bağımsız olarak, küçük bir tipografi kontrolü gibi görünen bu özellik büyük bir fark yaratabilir.

Özellik ve söz dizimi

text-box ile çalışırken en çok ihtiyaç duyacağınız iki tek satırlık komutun (bence) ne olduğunu 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;
}

Her ikisini de cap alphabetic olarak kırpmak, bu özelliğin en yaygın kullanım şeklidir. Aşağıdaki demolar bu özelliği birçok kez kullanır. Ancak önceki örnekte ex alphabetic de gösterilir. Çünkü bu, kendi benzersiz yollarıyla optik denge için yararlıdır.

Explorer playground

Playground'umuzda söz dizimini keşfedin ve açılır menüleri kullanarak sonuçları görün. Yazı tiplerini değiştirebilir, fazla ve eksik kesme değerlerini değiştirebilir, renk kodlu görselleri ve etiketleri takip edebilirsiniz.

Deneyebilecekleriniz:

1. text-box-trim öğesinin tek satırlık ve çok satırlık metin varyantlarında nasıl çalıştığını görsel olarak inceleyin.
2. 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. Yalnızca bir metin kutusunun bir tarafını kırpma
5. Şarkı çalarken söz dizimini inceleyin.

Ne tür uygulamalar oluşturabilirim ve hangi sorunları çözebilirim?

Bu kırpma özelliğinden çok daha basit bazı ortalama ve hizalama çözümleri ortaya çıkar. Hatta içerikler arasında gap gibi bir karakterin kullanılabildiği uygun satır aralığına daha da yaklaşabilirsiniz.

Daha kolay ortalama

Daha küçük, daha satır içi ve içeriğe özgü bileşenler için padding: 10px, bir öğenin her tarafında eşit aralık bırakmak üzere belirtilmesi için makul bir stildir. Ancak sonuç, üstte ve altta genellikle ekstra boşluk olduğundan kullanıcıları şaşırtabilir.

Geliştiriciler, bu sorunu çözmek için genellikle satır aralığının etkilerini dengelemek amacıyla üst ve alt kısımlara (blok) daha az dolgu yerleştirir.

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

Bu noktada, öğeler görsel olarak ortalanana kadar değer kombinasyonlarını denememiz gerekir. Bu, bir ekranda ve işletim sisteminde iyi görünebilir ancak başka bir ekranda ve işletim sisteminde iyi görünmeyebilir.

text-box, metindeki yarım satır başı boşluğunu kırpmamıza olanak tanır. Bu nedenle, 10px gibi eşit dolgu değerleri kullanışlıdır:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

Aşağıda, <button> öğeleriyle text-box kullanılarak boşluğun kırpılmasının, pratik bir etkileşimli öğede padding: 10px öğesinin her tarafta eşit görünmesini nasıl sağladığını gösteren birkaç örnek verilmiştir. Alternatif yazı tipinin, satırlar arası boşlukta nasıl çok farklı bir boşluk oluşturabileceğine dikkat edin.

Kategorileri veya rozetleri göstermek için sıkça kullanılan <span> öğeleri vardır. Eşit taraflı dolgunun en iyi çözüm olması gereken bir başka durumdur ancak text-box yayınlanana kadar bu sorunu çözmek için geçici çözümler kullanmak zorunda kaldık.

Daha kolay hizalama

Metin kutusunun üstünde (over) ve altında (under) bulunan, kontrol edilemeyen, fazladan yarım satır aralığı da hizalamayı zorlaştırır. Aşağıdaki örneklerde, satırlar arası boşluğun hizalamayı zorlaştırdığı durumlar ve metin kutusunun blok kenarlarını kırpmanın nasıl daha iyi hizalamalar oluşturabileceği gösterilmektedir.

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

Satır kaydırmanın olduğu senaryolarda, boşluğun biçimlendirilmiş ilk metin satırının üstünde ve biçimlendirilmiş son metin satırının altında olduğuna dikkat edin.

Aşağıdaki örnekte, özelliğin writing-mode değişikliğine nasıl mantıksal olarak uyum sağladığına dikkat edin. Metni değiştirmeyi deneyin, düzenin nasıl hizalı kalmaya devam ettiğini görün.

Çalışmaya devam etme

Want to know more? Aşağıdaki bağlantı listesinde çeşitli miktarlarda ek bilgi ve kullanım alanları sunulmaktadır.

• Tüm demoların Codepen koleksiyonu.
• Jan Nicklas'ın harika araştırması ve demoları.
• CSS Tricks'te Two CSS Properties for Trimming Text Box Whitespace (Metin kutusu boşluğunu kırpmak için iki CSS özelliği).
• Metin kenarlarında CSS satır içi düzeni.
• size-adjust veya ascent-override ile karıştırılmamalıdır.
• CSS Baseline: The Good, The Bad And The Ugly (CSS Temel Çizgisi: İyi, Kötü ve Çirkin).
• Birçok HTML öğesine uygulanır: CodePen.
• Safari'nin blog yayını.
• Tasarımcı olarak neden text-box-trim özelliğini heyecanla bekliyorum?