Atur panjang garis di CSS (dan pass teks ke dalam wadah) – Beragampengetahuan

Pertama, berapa panjang garis? Panjang garis adalah panjang wadah yang menampung beberapa baris teks. “Beberapa baris” adalah bagian utama di sini, karena jika baris teks dimulai dari akhir teks sebelumnya, teks menjadi kurang mudah dibaca. Ini menyebabkan pengguna membaca ulang garis secara tidak benar dan sering tersesat saat membaca.

Untungnya, Panduan Aksesibilitas Konten Web (WCAG) memberi kita aturan yang sangat sulit untuk diikuti: 80 karakter di telepon (40 bahasa adalah Cina, Jepang, atau Korea), yang sangat mudah digunakan karakter (ch)satuan:

width: 80ch;

lebar 1ch Lebar sama dengan angka 0 Dalam font yang Anda pilih, jadi lebar yang tepat tergantung pada font.

mendirikan Terbaik Panjang garis

Hanya karena Anda mengizinkan hingga 80 karakter pada satu baris, itu tidak berarti Anda memiliki Tujuannya adalah angka ini. Sebuah studi oleh Baymard Institute menunjukkan bahwa panjang garis 50-75 karakter adalah panjang terbaik – mengingat panjang garis yang lebih kecil berarti lebih banyak garis, sehingga pengguna memiliki lebih banyak peluang untuk membuat kesalahan membaca.

Yang sedang berkata, kami juga memiliki desain responsif, jadi atur lebar minimum (mis. min-width: 50ch) bukan ide yang baik, karena Anda tidak mungkin memiliki ukuran layar/jendela yang sama dengan lebar 320 piksel. Oleh karena itu, dengan beberapa nuansa yang terlibat, cara terbaik untuk menghadapinya adalah dengan clamp() Dan min() Fungsi:

• clamp(): Gunakan persentase, viewport, atau unit kueri kontainer untuk mengatur nilai fluida relatif terhadap wadah, tetapi dengan kendala minimum dan maksimum.
• min(): Tetapkan nilai minimum dari daftar nilai yang dipisahkan koma.

Mari kita mulai min(). Satu argumen adalah 93.75vw. Dengan asumsi wadah meluas ke seluruh viewport, ini akan sama dengan 300px Saat lebar viewport 320px (mengizinkan 20px Seperti yang Anda lihat, untuk mendistribusikan jarak) dan 1350px Saat lebar viewport 1440px. Tapi, hanya argumen lainnya50ch) adalah yang terkecil dari dua nilai, yang merupakan nilainya min() Akan mengambil keputusan.

min(93.75vw, 50ch);

Berikutnya adalah clamp()ia menerima tiga parameter dalam urutan berikut: terendah, disukai dan maksimum. Beginilah cara kami mengatur panjang garis.

Setidaknya, Anda bisa memasukkan min() Fungsi, pengaturan 50ch Garisnya panjang, tetapi hanya kondisi. Paling -paling, saya sarankan 75chseperti yang disebutkan sebelumnya. Nilai yang disukai sepenuhnya terserah Anda – ini akan menjadi lebar wadah Anda saat Anda tidak mencapai nilai minimum atau maksimum.

width: clamp(min(93.75vw, 50ch), 70vw, 75ch);

Anda juga dapat menggunakan min(),,,,, max()Dan calc() Dalam argumen apa pun yang membuat nuansa lebih lanjut.

Jika wadah terasa terlalu sempit, font-size Mungkin terlalu besar. Jika terasa terlalu lebar, maka font-size Mungkin terlalu kecil.

Pasang teks ke dalam wadah (menggunakan JavaScript)

Tahukah Anda tren desain membuat teks agar sesuai dengan lebar wadah? Biasanya, gunakan ruang sebanyak mungkin? Anda sering melihatnya untuk judul untuk halaman pemasaran dan posting blog. Nah, Chris menulis ini pada tahun 2018, sayangnya, beberapa cara untuk mencapai efek melalui keterbatasan, melalui JavaScript atau jQuery. Namun, ending menunjukkan bahwa Anda dapat menggunakan SVG selama yang Anda tahu viewBox Nilai, saya sebenarnya punya trik untuk mendapatkannya.

Meskipun masih membutuhkan 3-5 baris JavaScript, ini adalah cara terpendek yang saya temukan. Ini juga meluncur dengan sempurna ke HTML dan CSS, terutama karena SVG mewarisi banyak properti CSS (termasuk warna, terima kasih fill: currentColor):

<h1 class="container">
  <svg>
    <text>Fit text to container</text>
  </svg>
</h1>

h1.container {
  /* Container size */
  width: 100%;

  /* Type styles (<text> will inherit most of them) */
  font: 900 1em system-ui;
  color: hsl(43 74% 3%);

  text {
    /*
      We have to use fill: instead of color: here
      But we can use currentColor to inherit the color
    */
    fill: currentColor;
  }
}

/* Select all SVGs */
const svg = document.querySelectorAll("svg");

/* Loop all SVGs */
svg.forEach(element => {
  /* Get bounding box of <text> element */
  const bbox = element.querySelector("text").getBBox();
  /* Apply bounding box values to SVG element as viewBox */
  element.setAttribute("viewBox", [bbox.x, bbox.y, bbox.width, bbox.height].join(" "));
});

Teks yang cocok untuk wadah (CS murni)

Jika Anda adalah metode CSS murni, maka Anda Ya keberuntungan. Tetapi sementara kita dapat melakukan hal-hal gila dengan CSS akhir-akhir ini, peretasan bermata lebar Roman Komarov agak rumit (meskipun mengesankan). Ini inti:

• Teks telah disalin beberapa kali (meskipun dapat diakses aria-hidden dan benar -benar bersembunyi visibility: hidden) Sehingga kita dapat menggunakan matematika tersembunyi untuk melakukan matematika dan kemudian menerapkan hasilnya pada matematika yang terlihat.
• Menggunakan unit kueri/permintaan wadah kontainer, matematika melibatkan membagi ukuran inline teks dengan ukuran inline wadah untuk mendapatkan koefisien penskalaan, yang kemudian kami gunakan untuk teks yang terlihat. font-size Membuatnya tumbuh atau menyusut.
• Untuk membuat faktor penskalaan tanpa unit, kami menggunakan tan(atan2()) Ketik kiat casting.
• Beberapa properti khusus harus digunakan @property Ada aturan (jika tidak mereka tidak berfungsi seperti yang diharapkan).
• final font-size Gunakan nilai clamp() Mengatur font minimum dan ukuran font maksimum, tetapi mereka opsional.

<span class="text-fit">
  <span>
    <span class="text-fit">
      <span><span>fit-to-width text</span></span>
      <span aria-hidden="true">fit-to-width text</span>
    </span>
  </span>
  <span aria-hidden="true">fit-to-width text</span>
</span>

.text-fit {
  display: flex;
  container-type: inline-size;

  --captured-length: initial;
  --support-sentinel: var(--captured-length, 9999px);

  & > [aria-hidden] {
    visibility: hidden;
  }

  & > :not([aria-hidden]) {
    flex-grow: 1;
    container-type: inline-size;

    --captured-length: 100cqi;
    --available-space: var(--captured-length);

    & > * {
      --support-sentinel: inherit;
      --captured-length: 100cqi;
      --ratio: tan(
        atan2(
          var(--available-space),
          var(--available-space) - var(--captured-length)
        )
      );
      --font-size: clamp(
        1em,
        1em * var(--ratio),
        var(--max-font-size, infinity * 1px) - var(--support-sentinel)
      );
      inline-size: var(--available-space);

      &:not(.text-fit) {
        display: block;
        font-size: var(--font-size);

        @container (inline-size > 0) {
          white-space: nowrap;
        }
      }

      /* Necessary for variable fonts that use optical sizing */
      &.text-fit {
        --captured-length2: var(--font-size);
        font-variation-settings: "opsz" tan(atan2(var(--captured-length2), 1px));
      }
    }
  }
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --captured-length2 {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

Perhatikan Baru text-grow/text-shrink ciri

Masukkan teks yang dipasang ke dalam wadah satu CSS Line, banyak solusi telah dibahas. Solusi favorit tampaknya dua yang baru text-grow Dan text-shrink ciri. Secara pribadi, saya tidak berpikir kita membutuhkan dua atribut yang berbeda. Sebenarnya, saya lebih suka opsi yang lebih sederhana. font-size: fit-widthtapi sejak itu text-grow Dan text-shrink Sudah di meja (Chrome bermaksud untuk prototipe, Anda dapat melacaknya), mari kita lihat cara kerjanya.

Hal pertama yang perlu Anda ketahui adalah, seperti yang disarankan text-grow Dan text-shrink Properti dapat diterapkan pada beberapa teks pembungkus dalam wadah, yang sangat besar karena kami tidak dapat melakukan ini menggunakan teknologi JavaScript saya atau teknologi CSS Roman (setiap baris perlu memiliki wadah sendiri).

Keduanya memiliki sintaks yang sama, jika Anda ingin mengizinkan pertumbuhan, Anda perlu menggunakannya secara bersamaan Dan menyusut:

text-grow: <fit-target> <fit-method>? <length>?;
text-shrink: <fit-target> <fit-method>? <length>?;

• <fit-target>
  • per-line: untuk text-growgaris teks pendek lebih panjang dari wadah agar sesuai dengan itu. untuk text-shrinkbaris teks Lebih lama Bandingkan wadah menyusut Cocok untuk itu.
  • consistent: untuk text-growgaris terpendek akan tumbuh agar sesuai dengan wadah, sementara semua garis lain tumbuh dengan koefisien penskalaan yang sama. untuk text-shrinkini terpanjang Garis akan menyusut Untuk memasang wadah, semua jalur lainnya dikurangi dengan faktor penskalaan yang sama.
• <fit-method> (Opsional)
  • scale: Skala mesin terbang alih -alih berubah font-size.
  • scale-inline: Skala mesin terbang alih -alih berubah font-sizetetapi hanya di level.
  • font-size: Tumbuhkan atau kurangi ukuran font yang sesuai. (Saya tidak tahu apa nilai defaultnya, tapi saya kira itu saja.)
  • letter-spacing: Jarak surat akan tumbuh/kontrak font-size.
• <length> (Opsional): Ukuran font maksimum text-grow Atau ukuran font minimum text-shrink.

Sekali lagi, saya pikir saya lebih menyukainya font-size: fit-width Mendekati ini akan tumbuh dan menyusut semua garis untuk menjaga wadah hanya dalam seri CSS. Proposal di atas lebih dari yang saya inginkan dan sudah ada banyak hambatan untuk diatasi (banyak dari mereka yang terkait dengan aksesibilitas). Tapi itu saya, saya ingin tahu apa yang Anda pikirkan di komentar.

sebagai kesimpulan

Lebih mudah mengatur panjang garis dengan CSS daripada beberapa tahun yang lalu. Sekarang kami memiliki unit peran, clamp() Dan min() (Dan max() Dan calc() Jika Anda ingin membuangnya juga), dan hal -hal aneh yang dapat kami lakukan dengan SVG dan CSS agar sesuai dengan teks ke dalam wadah. terlihat seperti text-grow Dan text-shrink (atau solusi yang setara) adalah apa yang benar -benar kita butuhkan, setidaknya dalam beberapa kasus.

Ini adalah waktu yang tepat sebelum kita sampai di sana, dan Anda dapat melakukan ini dengan menambahkan umpan balik, tes, dan menggunakan kasing dalam pertanyaan GitHub Anda.