Superskrip dan subskrip bendalir

SuperScripts dan subskrip adalah unsur -unsur yang sangat diperlukan dalam kandungan akademik dan saintifik, dan mereka sangat diperlukan dari rujukan kepada formula kimia dan ekspresi matematik. Walau bagaimanapun, pelayar mengendalikan unsur -unsur ini lebih statik, yang boleh menyebabkan masalah dengan mudah: unsur -unsur mungkin terlalu kecil pada peranti mudah alih dan terlalu besar pada monitor desktop.

Saya telah berusaha menyelesaikan masalah skala superskrip dan subskrip dalam CSS selama bertahun -tahun, dan sekarang saya mencadangkan penyelesaian moden menggunakan pengkomputeran cecair. Artikel ini akan menjelaskan mengapa terdapat kekurangan dalam kaedah statik dan bagaimana untuk memberikan tipografi yang lebih baik untuk semua paparan sambil mengekalkan aksesibiliti. Paling penting, penyelesaian ini hanya memerlukan kod CSS ringkas dan tulen.

masalah dengan skala statik

Masalah zoom sangat ketara apabila membandingkan tipografi profesional dengan tetapan lalai penyemak imbas. Lihat contoh ini (disesuaikan dari Wikipedia), di mana "2" yang pertama direka bentuk secara profesional dan dimasukkan ke dalam set glyph, manakala yang kedua menggunakan

(atas) dan _{(bawah) unsur:}

Secara sejarah, pelayar telah menggunakan

untuk font-size: smaller dan ^{unsur -unsur, iaitu kira -kira 0.83 kali skala. Ini adalah munasabah apabila CSS digunakan dalam dokumen mudah pada hari -hari awal, tetapi dalam reka bentuk responsif moden, saiz fon boleh berbeza -beza, yang menimbulkan masalah. Hal ini terutama berlaku apabila menggunakan tipografi cecair, saiz teks boleh diperkuat dengan lancar antara nilai -nilai yang melampau.} Skala Fluida: Penyelesaian yang lebih baik

Saya membangunkan penyelesaian yang skala lebih semulajadi dalam pelbagai saiz dengan menggabungkan unit tetap dan berkadar. Pendekatan ini memastikan kebolehbacaan dalam saiz kecil sambil mengekalkan perkadaran yang betul pada saiz yang besar tanpa pelarasan khusus konteks.

Berikut adalah bagaimana ia berfungsi:

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

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

Skala semulajadi
• : Formula penurunan memastikan bahawa superskrip dan subskrip tetap berkadar dengan semua saiz. Penjajaran asas : Dengan menggunakan
dan kedudukan relatif, kami menghalang unsur -unsur daripada mempengaruhi ketinggian baris dan memberikan kawalan yang lebih baik ke atas offset untuk memenuhi keperluan khusus anda. Anda juga mungkin ingin tahu di mana nilai -nilai ini datang - saya akan menerangkannya di bawah.
• penguraian matematik vertical-align: baseline
mari kita menganalisis bagaimana ia berfungsi satu demi satu:

Kira saiz fon (px)

Dalam saiz kecil, komponen 4px tetap mempunyai kesan yang lebih besar. Dalam saiz yang besar, nisbah 0.5EM menguasai. Hasilnya adalah skala yang lebih semulajadi di semua saiz.

Kirakan saiz fon induk (em)

di dalam unsur -unsur

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

sub { 
  /* ... */
}

dan

, kita boleh mengira saiz fon ibu bapa:

^{Saiz fon bendalir ditakrifkan sebagai} . Untuk mengimbangi 0.5EM, kita perlu menyelesaikan 0.5em * x = 1em dan dapatkan x = 2. Di sini 1EM mewakili saiz fon unsur -unsur

dan

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

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

sendiri. Kami tolak komponen tetap 4px dari nilai EM semasa sebelum operasi pendaraban.

calc(0.5em 4px)

offset menegak

Untuk offset menegak, kita mulakan dengan nilai kedudukan CSS lalai dan menyesuaikannya sesuai dengan skala bendalir kita:

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

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

Formula ini telah ditentukur dengan teliti untuk memadankan kedudukan penyemak imbas standard:

• 0.5EM (SuperScript) dan 0.25EM (subskrip) adalah nilai offset menegak lalai (contohnya, digunakan dalam rangka kerja seperti CSS Tailwind dan Bootstrap).
• Kami melipatgandakan 0.83 untuk mempertimbangkan faktor skala penyemak imbas, yang digunakan secara lalai untuk superskrip dan subskrip. font-size: smaller

Kaedah ini memastikan bahawa superskrip dan subskrip kami kekal dalam kedudukan menegak yang biasa sambil mendapat manfaat daripada penskalaan bendalir yang lebih baik. Hasilnya selaras dengan apa yang diharapkan oleh pengguna dari penyemak imbas tradisional, tetapi skala lebih semulajadi pada saiz fon yang berbeza.

Petua Berguna

Faktor penskalaan yang tepat

didasarkan pada analisis saya terhadap aksara unicode superscripted dalam fon biasa. Anda boleh menyesuaikan nilai -nilai ini pada kehendak untuk memenuhi keperluan reka bentuk khusus anda. Berikut adalah beberapa cara anda boleh menyesuaikan kaedah ini: font-size: (0.5em 4px)

untuk skala yang lebih besar:

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

sub { 
  /* ... */
}

untuk penskalaan yang lebih kecil:

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

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

Untuk keserasian belakang , anda mungkin mahu membungkusnya dalam blok : @supports

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

Demo Akhir

Saya membina demo interaktif kecil ini untuk menunjukkan pilihan skala cecair yang berbeza, bandingkan dengan skala statik penyemak imbas, dan meletakkan kedudukan menegak halus untuk melihat yang terbaik untuk kes penggunaan anda: (pautan demo harus dimasukkan di sini)

Cobalah dalam projek anda yang seterusnya dan saya suka mendengar apa yang anda fikirkan!

Atas ialah kandungan terperinci Superskrip dan subskrip bendalir. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!