Baris Teks dengan Lebar yang Sama

Fitur web: text-fit text-wrap: balance text-box

Lockup bergaya poster dengan setiap baris diskalakan sehingga mencakup lebar penuh penampung dapat membuat judul yang menarik secara visual. Dengan menggunakan text-fit, browser akan menskalakan setiap baris selama tata letak, sehingga tetap benar saat diubah ukurannya, perubahan salinan, dan pemuatan font.

Untuk satu baris yang mengisi penampungnya (misalnya, judul atau kutipan), terapkan text-fit ke elemen tersebut secara langsung; panduan ini membahas penguncian multi-baris.

Penerapan dasar

Untuk baris yang dipaksakan:

  • Gabungkan setiap baris dalam <span> dengan display: block.
  • Terapkan white-space: nowrap ke setiap baris paksa <span>.

Panduan penerapan:

  • Gunakan text-fit: grow per-line-all <percentage> pada judul itu sendiri.
  • Gunakan per-line-all, bukan per-line. per-line melewati baris terakhir dan baris apa pun yang diakhiri dengan jeda paksa, sehingga dengan satu blok per baris, tidak ada yang diskalakan.
  • grow tidak dapat digabungkan dengan shrink. Tetapkan font-size dasar ke maksimum atau minimum, bergantung pada mana yang akan menjadi penggantian yang lebih baik atau lebih mudah dihitung, dan tetapkan text-fit ke shrink atau grow. Jika Anda tidak memiliki alasan untuk menggunakan shrink, sebaiknya gunakan grow + setelan font-size ke minimum, karena lebih aman untuk sebagian besar kasus.
  • Selalu batasi pertumbuhan atau penyusutan dengan persentase (misalnya 300%) sebagai batasan.
  • Penampung memerlukan ukuran inline yang pasti. text-fit tidak pernah mengubah ukuran intrinsik, sehingga tidak berpengaruh pada lebar fit-content/max-content atau item flex/grid berukuran konten.
  • Pangkas leading di atas baris pertama dan di bawah baris terakhir: lihat Perataan Teks yang Tepat.
  • Buat line-height tetap kecil, 1 atau kurang, jika tidak, celah antara baris dengan ukuran font yang berbeda akan menjadi sulit diatur.
  • PENTING: Perhatikan bahwa font-size yang dihitung tidak berubah, sehingga penskalaan spasi em tidak berubah.
  • Untuk menghindari penekanan berlebihan yang tidak disengaja pada kata yatim, terapkan text-wrap: balance atau text-wrap: pretty jika ada baris kosong.

Spasi

Jika semua baris dipaksa, hal ini akan menghasilkan lebih banyak kontrol atas spasi:

  • Terapkan text-box: trim-both cap alphabetic ke setiap blok baris sehingga kotaknya mengikuti bentuk glifnya sendiri. Pemangkasan dilakukan menggunakan metrik yang diskalakan. Lihat Perataan Teks yang Tepat untuk mengetahui detail selengkapnya.
  • Beri spasi pada baris menggunakan Flexbox atau Grid + gap pada judul, bukan line-height. Dengan demikian, celah akan seragam, bukan bertambah seiring ukuran font setiap baris.

Jika beberapa baris kosong, jangan gunakan text-box: properti ini hanya memangkas baris pertama dan terakhir, sehingga baris luar akan menempel pada glyph, sementara celah interior mempertahankan leading-nya. Biarkan line-height mengatur semua spasi.

Desain visual

  • Lockup terlihat paling baik jika ada variasi yang signifikan dalam ukuran font antar-baris. Hindari membuat lockup dari teks dengan baris yang sebagian besar seragam, karena akan menghasilkan ukuran font yang tidak sama, atau tidak cukup berbeda, sehingga melanggar prinsip desain kontras. Anda dapat memastikannya dengan memaksa baris pendek: gabungkan kata-kata yang akan ditekankan dalam satu blok dan biarkan sisanya digabungkan, yaitu penguncian campuran. Hal ini sangat penting saat menggabungkan dengan text-wrap: balance.
  • Sebaiknya gabungkan ini dengan text-transform: uppercase saat digunakan dengan skrip Barat, karena ascender dan descender cenderung membuat ruang yang terjebak dan/atau tumpang-tindih dengan baris yang berdekatan, sehingga menghasilkan hasil yang kurang estetis.
  • Saat memaksakan baris pendek, pilih kata yang akan meningkatkan pesan jika ditekankan.
  • Batasan: Teks yang membesar juga akan meningkatkan bobot visual dan goresannya akan terlihat lebih tebal. Saat ini, tidak ada cara untuk mengimbanginya, misalnya dengan mengurangi font-weight untuk teks yang lebih besar, karena tidak ada unit yang dapat digunakan dalam penghitungan, karena penskalaan tidak memengaruhi unit yang terkait dengan font seperti em.

Strategi penggantian

Untuk text-box

text-box tidak memerlukan penggantian terpisah: pertahankan line-height kecil pada penguncian tetap juga. Properti ini tidak berfungsi di text-box dan menjaga celah tetap rapat jika tidak didukung, dengan mengorbankan celah yang diskalakan dengan ukuran font setiap baris.

Untuk text-wrap: balance

Untuk text-fit

Baris yang dipaksakan memiliki penggantian yang singkat dan akurat: ukur setiap baris pada ukuran dasarnya dan skalakan berdasarkan rasio terhadap penampung, dengan batas yang sama.

@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);
  }
}

Baris bebas tidak memiliki penggantian yang akurat (pemisah baris tidak diketahui hingga tata letak): progressive enhancement ke judul yang seimbang dengan ukuran dasar yang fleksibel seperti clamp(2rem, 1rem + 5cqi, 5rem). Dalam penguncian campuran, skrip di atas masih sesuai dengan baris yang dipaksakan; blok penggabungan berukuran selebar penampung, sehingga tetap mempertahankan skala 1 dan hanya mendapatkan ukuran dasar yang fleksibel.

Jika penyesuaian teks sangat penting, pertimbangkan untuk menggunakan library JS (misalnya, fitty), yang dimuat secara bersyarat hanya jika text-fit tidak didukung.