Eşit Genişlikte Metin Satırları

Her satırın kapsayıcının tam genişliğini kaplayacak şekilde ölçeklendirildiği poster tarzı kilitler, görsel olarak çarpıcı başlıklar oluşturabilir. text-fit kullanıldığında tarayıcı, düzen sırasında her satırı ölçeklendirir. Böylece yeniden boyutlandırma, kopyalama değişiklikleri ve yazı tipi yükleme sırasında satır doğru kalır.

Kapsayıcısını dolduran tek bir satır (ör.başlık veya alıntı) için text-fit özelliğini doğrudan ilgili öğeye uygulayın. Bu kılavuzda çok satırlı kilitler ele alınmaktadır.

Temel uygulama

Zorunlu satırlar için:

• Her satırı display: block ile <span> içine alın.
• Her zorunlu satıra <span> white-space: nowrap uygulayın.

Uygulama kuralları:

• Başlığın kendisinde text-fit: grow per-line-all <percentage> kullanın.
• per-line yerine per-line-all kullanın. per-line, son satırı ve zorunlu kesmeyle biten tüm satırları atlar. Bu nedenle, satır başına bir blok olduğunda hiçbir şeyi ölçeklendirmez.
• grow, shrink ile birleştirilemez. Temel font-size değerini, daha iyi bir yedek veya daha kolay hesaplanabilir olmasına bağlı olarak maksimum ya da minimum değere ayarlayın ve text-fit değerini buna göre shrink veya grow olarak ayarlayın. shrink kullanmak için bir nedeniniz yoksa çoğu durumda daha güvenli olduğu için grow + font-size ayarını minimumda tutmayı tercih edin.
• Büyümeyi veya küçülmeyi her zaman yüzde (ör. 300%) ile sınırlayın.
• Kapsayıcının belirli bir satır içi boyutu olmalıdır. text-fit, iç boyutu hiçbir zaman değiştirmez. Bu nedenle, fit-content/max-content genişliklerinde veya içerik boyutlu flex/grid öğelerinde hiçbir şey yapmaz.
• İlk satırın üstündeki ve son satırın altındaki satır aralığını kırpın: Hassas Metin Hizalama bölümüne bakın.
• line-height değerini küçük (1 veya daha az) tutun. Aksi takdirde, farklı yazı tipi boyutlarındaki satırlar arasındaki boşluklar kullanışsız hale gelir.
• ÖNEMLİ: Hesaplanmış font-size değerinin değişmediğini, dolayısıyla em aralığının ölçeklendirilmediğini unutmayın.
• Yanlışlıkla aşırı vurgulanan yetim satırları önlemek için boş satırlar varsa text-wrap: balance veya text-wrap: pretty uygulayın.

Boşluk

Tüm satırlar zorunlu kılındığında boşluklar üzerinde daha fazla kontrol sağlanır:

• Her satır bloğuna text-box: trim-both cap alphabetic uygulayarak kutunun kendi gliflerini sarmasını sağlayın. Ölçeklendirilmiş metrikleri kullanarak kırpma yapar. Daha fazla bilgi için Hassas Metin Hizalama bölümüne bakın.
• Satırları boşluk bırakmak için line-height yerine Flexbox veya Grid + gap kullanın. Bu durumda boşluklar, her satırın yazı tipi boyutuyla birlikte büyümek yerine tek tip olur.

Bazı satırlar boşsa text-box kullanmayın: Bu özellik yalnızca ilk ve son satırı kırptığı için dış satırlar glifleri sararken iç boşluklar satır aralığını korur. Tüm boşlukları line-height belirlesin.

Görsel tasarım

• Satırlar arasında yazı tipi boyutlarında önemli bir fark olduğunda kilitler en iyi şekilde görünür. Çoğunlukla tek tip satırlardan oluşan metinlerden kilitler oluşturmaktan kaçının. Bu, ne aynı ne de yeterince farklı olan yazı tipi boyutlarına neden olarak kontrast tasarım ilkesini ihlal eder. Bunu, kısa satırlar kullanarak sağlayabilirsiniz: Vurgulanacak kelimeleri bir blokta kaydırın ve geri kalanını kaydırın (ör. karma bir kilit). Bu, özellikle text-wrap: balance ile birleştirme yaparken önemlidir.
• Batı alfabeleriyle kullanıldığında bunu text-transform: uppercase ile birleştirmeyi tercih edin. Çünkü üst ve alt çıkıntılar, sıkışık alanlar oluşturma ve/veya bitişik satırlarla çakışma eğilimindedir. Bu da estetik açıdan daha az hoş bir sonuç verir.
• Kısa satırlar kullanırken, vurgulandığında mesajı güçlendirecek kelimeler seçin.
• Sınırlama: Büyüyen metnin görsel ağırlığı da artar ve konturları daha güçlü algılanır. Ölçeklendirme, em gibi yazı tipine göre değişen birimleri etkilemediğinden hesaplamada kullanılacak bir birim yoktur. Bu nedenle, daha büyük metinler için font-weight değerini azaltarak bunu dengelemenin bir yolu yoktur.

Yedek stratejiler

text-box için

text-box için ayrı bir yedek gerekmez: Sabit kilitlerde de küçük line-height kullanın. text-box altında işlem yapılmaz ve desteklenmediği durumlarda boşlukları dar tutar. Bu durumda boşluklar her satırın yazı tipi boyutuna göre ölçeklenir.

text-wrap: balance için

text-fit için

Zorunlu satırlar kısa ve aslına uygun bir yedeğe sahiptir: Her satırı temel boyutunda ölçün ve aynı üst sınırla kapsayıcıya oranına göre ölçeklendirin.

@supports not (text-fit: grow) {
  .lockup > span {
    /* Shrink-wrap each line so its width is the text width */
    width: fit-content;
    /* --text-fit-scale is measured by the script; the cap mirrors the text-fit percentage */
    font-size: min(var(--text-fit-scale, 1) * 1em, 300%);
  }
}

if (!CSS.supports('text-fit', 'grow per-line-all')) {
  const fit = lockup => {
    const lines = [...lockup.querySelectorAll(':scope > span')];
    // Unscale first: on a refit, offsetWidth would otherwise include the previous scale
    for (const line of lines) line.style.removeProperty('--text-fit-scale');
    // MANDATORY: all reads, then all writes. Interleaving them (e.g. reading
    // lockup.clientWidth inside the write loop) forces one reflow per line.
    const scales = lines.map(line => lockup.clientWidth / line.offsetWidth);
    lines.forEach((line, i) => line.style.setProperty('--text-fit-scale', scales[i]));
  };
  // Refit on resize and font load
  for (const lockup of document.querySelectorAll('.lockup')) {
    new ResizeObserver(() => fit(lockup)).observe(lockup);
  }
}

Serbest satırların güvenilir bir yedeği yoktur (satır sonları, düzene kadar bilinmez): clamp(2rem, 1rem + 5cqi, 5rem) gibi akıcı bir taban boyutuna sahip dengeli bir başlığa progresif geliştirme. Karma bir kilitte, yukarıdaki komut dosyası zorunlu satırlara uymaya devam eder. Sarmalama bloğu, kapsayıcı kadar geniş olduğundan ölçek 1'i korur ve yalnızca akıcı taban boyutunu alır.

Metin sığdırma kritikse yalnızca text-fit desteklenmediğinde koşullu olarak yüklenen bir JS kitaplığı (ör. fitty) kullanabilirsiniz.