Cairan atas dan bawah

Superskrip dan subskrip adalah elemen penting dari konten akademik dan ilmiah – mulai dari referensi kutipan hingga rumus kimia dan ekspresi matematika. Namun, browser menangani elemen ini secara statis sehingga dapat menimbulkan masalah besar: elemen menjadi terlalu kecil di perangkat seluler atau menjadi terlalu besar di layar desktop.

Setelah bertahun-tahun berjuang dengan ukuran superskrip dan subskrip di CSS, saya mengusulkan solusi modern menggunakan perhitungan elastis. Dalam artikel ini, saya akan menunjukkan mengapa pendekatan statis gagal dan bagaimana kami dapat memberikan pencetakan yang lebih baik di semua area pandang sambil mempertahankan aksesibilitas. Yang terbaik dari semuanya, solusi ini hanya membutuhkan CSS yang bersih dan murni.

Masalahnya ada pada penskalaan yang tetap

Masalah penskalaan terutama terlihat ketika membandingkan pencetakan profesional dengan pengaturan default browser. Ambil contoh ini (diadaptasi dari Wikipedia), di mana angka “2” pertama dirancang secara profesional dan disertakan dalam kumpulan mesin terbang, sedangkan angka kedua digunakan <sub> (atas) dan <sup> Item (bawah):

Saya telah menggunakan browser secara historis font-size: smaller ke <sup> Dan <sub> elemen, yang berarti skala sekitar 0,83x. Meskipun hal ini masuk akal pada masa awal CSS untuk dokumen sederhana, hal ini dapat menimbulkan masalah dalam desain responsif modern di mana ukuran font bisa sangat bervariasi. Hal ini terutama berlaku ketika menggunakan pencetakan fleksibel, di mana ukuran teks dapat diubah dengan mulus di antara titik ekstrem.

Penskalaan cair: solusi yang lebih baik

Saya telah mengembangkan solusi yang dapat diskalakan secara alami pada berbagai ukuran dengan menggabungkan unit tetap dan proporsional. Pendekatan ini memastikan kejelasan pada ukuran kecil sambil mempertahankan proporsi yang sesuai pada ukuran yang lebih besar, sehingga menghilangkan kebutuhan akan penyesuaian konteks spesifik.

Begini cara kerjanya:

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* Simplified top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* Simplified top: calc(0.42em - 1.66px) */
}

• Ukuran alami: Rumus menurun memastikan superskrip dan subskrip tetap proporsional di semua ukuran
• Penyelarasan garis dasar:menggunakan vertical-align: baseline dan penempatan relatif, kami mencegah elemen memengaruhi ketinggian garis dan memberi kami kontrol yang lebih baik terhadap offset untuk memenuhi kebutuhan spesifik Anda. Anda mungkin juga bertanya-tanya dari mana nilai-nilai ini berasal – saya akan menjelaskannya di bawah.

Hancurkan matematika

Mari kita lihat cara kerjanya sepotong demi sepotong:

Hitung ukuran font (px)

Kecil, ukuran tetap 4px Komponen tersebut mempunyai pengaruh yang lebih besar. dalam ukuran besar, 0.5em Rasio tersebut menjadi dominan. Hasilnya adalah ukuran yang lebih natural di semua ukuran.

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

Hitung ukuran font asli ()

di dalam <sup> Dan <sub> elemen, kita dapat menghitung orang tuanya font-size:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

Ukuran font cair didefinisikan sebagai calc(0.5em + 4px). Untuk mengimbanginya 0.5emPertama kita harus menyelesaikannya 0.5em * x = 1em Yang memberi kita x = 2. itu 1em Di sini mewakili ukuran font file <sup> Dan <sub> Barang-barang itu sendiri. Kami mengurangi 4px Komponen konstan dari arus kita Nilai sebelum perkalian.

Perpindahan vertikal

Untuk offset vertikal, kita mulai dengan nilai posisi CSS default dan menyesuaikannya agar sesuai dengan penskalaan fleksibel kita:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px));
}

sub { 
  top: calc(0.25 * 0.83 * 2 * (1em - 4px));
}

Rumusnya telah dikalibrasi secara cermat agar sesuai dengan posisi standar browser:

• 0.5em (super) dan 0.25em (sub) adalah nilai offset vertikal default (misalnya digunakan dalam kerangka kerja seperti Tailwind CSS dan Bootstrap).
• Kami cocok 0.83 Untuk akun browser font-size: smaller Faktor skala, yang digunakan secara default untuk garis tinggi dan rendah.

Pendekatan ini memastikan bahwa huruf atas dan bawah kita mempertahankan posisi vertikal yang familiar sekaligus mendapatkan manfaat dari pengukuran cairan yang lebih baik. Hasilnya sesuai dengan apa yang diharapkan pengguna dari tampilan browser tradisional, namun beradaptasi secara lebih alami di berbagai ukuran font.

Kiat yang berguna

Faktor ukuran presisi font-size: (0.5em + 4px) Ini berdasarkan analisis saya terhadap karakter Unicode superskrip dalam font populer. Jangan ragu untuk mengubah nilai-nilai ini agar sesuai dengan kebutuhan desain spesifik Anda. Berikut beberapa cara Anda mungkin ingin menyesuaikan kebijakan ini:

Untuk ukuran lebih besar:

sup, sub {
  font-size: calc(0.6em + 3px);
  /* adjust offset calculations accordingly */
}

Untuk ukuran lebih kecil:

sup, sub {
  font-size: calc(0.4em + 5px);
  /* adjust offset calculations accordingly */
}

Untuk kompatibilitas ke belakangAnda mungkin ingin menggabungkan semuanya dalam sebuah file @supports penghalang pandang:

@supports (font-size: calc(1em + 1px)) {
  sup, sub {
    ...
  }
}

Penawaran terakhir

Saya telah membuat demo interaktif kecil ini untuk menunjukkan opsi penskalaan fleksibel yang berbeda, membandingkannya dengan penskalaan tetap browser, dan menyesuaikan penempatan vertikal untuk melihat mana yang terbaik untuk kasus penggunaan Anda:

Cobalah di proyek Anda berikutnya dan kami ingin mendengar ide Anda!

---

Superskrip dan Subskrip Cair awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.

Sumber

-Advertisement-.