Superskrip dan subskrip cair – Beragampengetahuan

Superskrip dan subskrip adalah elemen penting dalam konten akademis dan ilmiah—mulai dari referensi kutipan hingga rumus kimia dan ekspresi matematika. Namun, browser yang menggunakan pendekatan statis untuk menangani elemen ini dapat menimbulkan masalah serius: elemen menjadi terlalu kecil di perangkat seluler, atau menjadi terlalu besar di tampilan desktop.

Setelah bertahun-tahun berjuang dengan masalah penskalaan superskrip dan subskrip di CSS, saya menemukan solusi modern menggunakan perhitungan yang lancar. Dalam artikel ini, saya akan menunjukkan mengapa metode statis gagal, dan bagaimana kami dapat menyediakan tipografi yang lebih baik di semua area pandang sambil mempertahankan aksesibilitas. Yang terbaik dari semuanya, solusi ini hanya membutuhkan CSS yang bersih dan murni.

Masalah penskalaan statis

Masalah penskalaan terutama terlihat ketika membandingkan tipografi 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 yang kedua menggunakan <sub> (atas) dan <sup> elemen (bawah):

Browser secara historis digunakan font-size: smaller untuk <sup> Dan <sub> elemen, yang kira-kira setara dengan penskalaan 0,83x. Meskipun hal ini masuk akal untuk dokumen sederhana pada masa awal CSS, hal ini dapat menimbulkan masalah dalam desain responsif modern yang ukuran fontnya sangat bervariasi. Hal ini terutama berlaku saat menggunakan tipografi yang lancar, di mana ukuran teks dapat diskalakan dengan mulus di antara titik ekstrem.

Pengotoran Cairan: Solusi Lebih Baik

Saya mengembangkan solusi yang memungkinkan penskalaan yang lebih alami antara berbagai ukuran dengan menggabungkan unit tetap dan proporsional. Pendekatan ini memastikan keterbacaan pada ukuran kecil sambil mempertahankan proporsi yang sesuai pada ukuran yang lebih besar, sehingga menghilangkan kebutuhan akan penyesuaian kontekstual.

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) */
}

• penskalaan alami:Penurunan rumus memastikan bahwa superskrip dan subskrip tetap proporsional di semua ukuran
• penyelarasan garis dasar: dengan menggunakan vertical-align: baseline dan posisi relatif, kita dapat mencegah elemen mempengaruhi tinggi baris, dan ini memberi kita kontrol lebih besar terhadap offset agar sesuai dengan kebutuhan spesifik Anda. Anda mungkin juga bertanya-tanya dari mana sebenarnya nilai-nilai ini berasal – saya akan jelaskan di bawah.

Hancurkan matematika

Mari kita lihat cara kerjanya sedikit demi sedikit:

Hitung ukuran font (px)

Pada ukuran kecil, diperbaiki 4px Komponen memiliki dampak yang lebih besar. Dalam ukuran besar, 0.5em Proporsi menjadi dominan. Hasilnya adalah penskalaan yang lebih alami pada semua ukuran.

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

sub { 
  /* ... */
}

Hitung ukuran font induk (em)

Di dalam <sup> Dan <sub> elemen, kita dapat menghitung elemen induknya font-size:

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

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

Ukuran font yang dapat disesuaikan didefinisikan sebagai calc(0.5em + 4px). untuk memberi kompensasi 0.5empertama-tama kita harus menyelesaikannya 0.5em * x = 1em Ini memberi kita x = 2. ini 1em Ukuran font diwakili di sini <sup> Dan <sub> Elemen itu sendiri. Kami mengurangi 4px Komponen tetap kami saat ini em Nilai sebelum perkalian.

offset vertikal

Untuk offset vertikal, kita mulai dengan nilai posisi CSS default dan menyesuaikannya untuk mengakomodasi penskalaan yang dapat disesuaikan:

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 dikalibrasi secara cermat agar sesuai dengan penargetan browser standar:

• 0.5em (super) dan 0.25em (sub) adalah nilai offset vertikal default (misalnya digunakan dalam kerangka kerja seperti Tailwind CSS dan Bootstrap).
• Kami berkembang biak 0.83 Dengan mempertimbangkan browser font-size: smaller Faktor penskalaan, default untuk superskrip dan subskrip.

Pendekatan ini memastikan bahwa superskrip dan subskrip kami mempertahankan posisi vertikal yang sudah dikenal sekaligus mendapatkan manfaat dari penskalaan yang lebih lancar. Hasilnya sesuai dengan ekspektasi pengguna terhadap rendering browser tradisional, namun skalanya lebih alami di antara berbagai ukuran font.

Kiat yang berguna

faktor skala yang tepat font-size: (0.5em + 4px) didasarkan pada analisis saya terhadap karakter Unicode superskrip dalam font umum. Jangan ragu untuk menyesuaikan nilai-nilai ini untuk memenuhi kebutuhan desain spesifik Anda. Anda mungkin ingin menyesuaikan metode ini dengan beberapa cara:

Untuk zoom lebih besar:

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

Untuk zoom yang lebih kecil:

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

Untuk kompatibilitas ke belakangAnda mungkin ingin membungkus semuanya dalam a @supports Halangan:

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

demo terakhir

Saya membuat demo interaktif kecil ini untuk menunjukkan berbagai opsi penskalaan yang lancar, membandingkannya dengan penskalaan statis browser, dan menyempurnakan posisi vertikal untuk melihat mana yang terbaik untuk kasus penggunaan Anda:

Cobalah proyek Anda berikutnya, senang mendengar pendapat Anda!

Fluid Superscript dan Subscript awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.