text-decoration-inset seperti pengisi untuk dekorasi teks – Beragampengetahuan

ini text-decoration-inset Properti CSS memecahkan masalah yang telah ada sejak awal mula Web, di mana dekorasi teks seperti garis bawah melampaui karakter pertama dan terakhir (khususnya, hingga tepi kotak konten), menyebabkan ketidaksejajaran vertikal.

Saya katakan ini adalah masalah yang “kami” alami karena mungkin Anda, seperti beberapa pengguna, sebenarnya tidak peduli. Namun jika Anda adalah kelinci yang lucu seperti saya (menurut saya “desainer” adalah istilah teknis), kemungkinan besar hal itu akan membuat Anda gila.

Meskipun demikian, ini bukanlah masalah yang saya coba selesaikan karena jusnya tidak layak untuk diperas. Solusi terbaik mungkin text-decoration: none Dan ::after Memiliki latar belakang khusus, tapi itu mungkin agak rumit, saya lebih suka menggunakan semua fitur yang disertakan dengan dekorasi teks asli, misalnya. text-decoration-thickness, text-underline-position (Ini memungkinkan kita mengubah posisi garis bawah relatif terhadap metrik internal font; seperti garis dasar), dan text-underline-offset (Ini menentukan offset Itu Lokasi).

Jadi bagaimana text-decoration-inset Bekerja? Nah, jika saya memangkas garis bawah agar sejajar secara vertikal dengan teks, saya akan mendapatkan hasil seperti ini (btw, ini hanya berfungsi di Firefox 146):

Namun, Anda sebenarnya dapat memangkas dekorasi sesuai kebutuhan, sehingga memungkinkan kami membuat beberapa dekorasi yang sangat keren dan bahkan mentransisikan atau menganimasikannya. Mari kita lihat sekilas, oke?

text-decoration-inset Penggunaan dasar

text-decoration-inset,sebelum text-decoration-trimmemungkinkan kita untuk memotong dari akhir garis bawah atau di tempat lain text-decoration-line dihitung. Ini sintaksnya:

text-decoration-inset: <left-inset> <right-inset>;

Ya, ini berarti kita dapat mengatur nilai sisipan yang berbeda untuk sisi kiri dan kanan.

Nilai-nilai ini harus ada <length>s, tapi kita bisa menggunakan panjang relatif, mis. em unit, relatif terhadap yang dihitung font-size. Jadi jika font-size Saat berubah, skala ilustrasinya pun disesuaikan. Misalnya pada demo di atas, 0.076em (ini yang saya tetapkan ilustrasi sebelah kiri) berarti 7,6% dari perhitungan font-sizeyaitu nilai yang menyelaraskan sisipan kiri dengan batang kiri huruf “N” dan batang kiri lainnya. Nilai ini ditentukan melalui trial and error, namun hanya perlu ditentukan satu kali untuk setiap font.

Bagaimana jika huruf pertama adalah W? Ya, kalau begitu ilustrasinya tidak akan sejalan, jadi tidak sempurna larutan. Menurut saya cocok jika Anda tahu apa isinya.

Mungkin W3C akan memberikan solusi untuk penyelarasan vertikal dekorasi teks dan teks multi-baris yang akurat dan otomatis. Sampai saat itu, ini masih merupakan solusi keren yang memungkinkan kita membuat efek selaras sempurna seperti ini (demo ini menggunakan overline Dan Garis bawah dan “lotta” penuh text-decoration-thickness tentu):

Animasi text-decoration-inset

text-decoration-inset Menjadi lebih menarik ketika kita mulai memikirkan tentang transisi/animasi. Kita sering membuat animasi garis bawah, atau bisa dibilang palsu ::after Digarisbawahi, tetapi dengan text-decoration-inset Kita bisa melakukannya secara lokal. Pada contoh di bawah, saya mengalikan ilustrasinya dengan sepuluh :hover. Tidak ada yang terlalu gila, tapi ingat kita hanya bisa menggunakan <length> nilai, jadi coba gunakan em unit, atau setidaknya menguji teks dengan ukuran font berbeda.

Sekali lagi, saat ini memerlukan Firefox 146+:

a {
  transition: 300ms;
  text-decoration-inset: 0.046em 0.009em;

  &:hover {
    text-decoration-inset: calc(0.046em * 10);
  }
}

Kini semakin ambisius, demo berikutnya memanfaatkan CSS @keyframes Animasikan untuk membuat efek garis bawah bintang jatuh. Cara kerjanya adalah kita mendorong ilustrasi kiri ke sisi lain – tapi <length>Itu saja, ingat? kita tidak bisa menggunakan 100% Di sini, jadi saya yakin lebar elemennya 4.5em dan gunakan itu sebagai nilai (semakin tepat kita, semakin baik animasi atau transisinya). Periksa komentar kode untuk penjelasan lengkap:

a {
  /*
    The value at the start and end of the
    animation, as well as the default value
  */
  text-decoration-inset: 0.046em 0.009em;

  &:hover {
    animation: 1s next-level;
  }
}

@keyframes next-level {
  /* By half-way through the animation... */
  50% {
    /*
      ...the left inset has shifted 4.5em, 
      which is the full width of the element
    */
    text-decoration-inset: 4.5em 0.009em;

    /* It’s faded out as well */
    text-decoration-color: transparent;
  }

  /* Immediately after that... */
  50.999% {
    /* ...both insets are set to the left */
    text-decoration-inset: 0.046em 4.5em;
  }

  /* Then it animates back to the default value */
}

luas, text-decoration-inset adalah fitur yang bagus. Memang bukan tanpa kekurangan, namun tidak ada fitur yang sempurna. Secara pribadi, apa pun yang dapat membantu saya menyempurnakan detailnya secara lokal sangat diterima, dan text-decoration-inset Kita dapat meningkatkan dua hal – perataan dekorasi teks (relatif terhadap teks) dan transisi atau animasi dekorasi teks.