Temu Duga Frontend: Menjajarkan Teks Sebaris dan SVG dengan baseline-shift CSS

Gesaan dan konteks

Sistem reka bentuk memerlukan ikon status, simbol unit, dan SVG sebaris dijajarkan dengan teks badan, label butang, dan tatatanda matematik. Pembangun telah menggunakan nilai top negatif atau transform, tetapi ikon tersebut tersasar apabila fon, ketinggian baris, dan reka letak RTL berubah. Reka bentuk penyelesaian berasaskan garis dasar CSS yang merangkumi baseline-shift, garis dasar SVG, sandaran, kebolehcapaian, dan regresi visual.

Perkara yang diuji oleh penemu duga

• Memahami konteks pemformatan sebaris, garis dasar fon, superskrip, subskrip, dan garis dasar alternatif.
• Membezakan baseline-shift daripada vertical-align dan transform.
• Mengendalikan perbezaan pelayar antara teks HTML dan kandungan SVG.
• Mengekalkan teks yang boleh dibaca, susunan fokus, dan semantik RTL dan bukannya mengejar piksel semata-mata.
• Mengesahkan dengan matriks fon, tangkapan skrin, dan liputan pelayar sebenar.

Soalan untuk penjelasan

1. Adakah ikon itu hiasan atau ia menyampaikan status? Adakah terdapat teks yang kelihatan dan nama yang boleh diakses?
2. Adakah sasarannya ialah ikon sebaris biasa, unit superskrip, formula, atau teks di dalam SVG?
3. Pelayar manakah, kegagalan memuatkan fon yang mana, dan tahap zum yang manakah mesti disokong?
4. Adakah rujukannya garis dasar abjad, garis dasar matematik, dominant-baseline SVG, atau pusat visual?
5. Adakah komponen tersebut mesti menyokong RTL, saiz fon dinamik, dan kontras tinggi paksa?

Jawapan 30 saat

Saya akan mentakrifkan semantik garis dasar terlebih dahulu: ikon badan biasanya mengikut garis dasar abjad, manakala formula dan superskrip memerlukan anjakan yang jelas. Kekalkan ikon dalam konteks pemformatan sebaris dan gunakan baseline-shift untuk menyatakan hubungan tersebut; gunakan vertical-align untuk penjajaran kotak sebaris, dan jangan anggap transform sebagai peraturan penetapan taip. Seragamkan viewBox dan tingkah laku garis dasar SVG, dengan sandaran saiz atau vertical-align yang konservatif untuk pelayar lama. Sembunyikan ikon hiasan, namakan ikon status, dan uji pemuatan fon, zum, RTL, SVG, serta tangkapan skrin pelayar.

Perbincangan mendalam langkah demi langkah

1. Tetapkan semantik garis dasar

Garis dasar bukanlah pusat menegak kotak. Ikon teks badan biasanya sejajar dengan garis dasar abjad; superskrip, subskrip, dan simbol matematik mempunyai hubungan yang berbeza. Tulis keperluan sebagai "anjakan relatif kepada garis dasar baris semasa" sebelum memilih sifat CSS, bukannya mencipta nilai piksel untuk setiap fon.

.status-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: baseline;
  baseline-shift: 0.08em;
}

Nilai ini ialah token komponen, bukan pemalar sejagat; ukurnya dengan fon dan saiz yang sebenar.

2. Pisahkan baseline-shift, vertical-align, dan transform

baseline-shift menyatakan ofset relatif kepada garis dasar bagi superskrip, subskrip, dan kandungan sebaris yang mesti mengekalkan reka letak teks. vertical-align mengambil bahagian dalam kotak sebaris, sel jadual, atau garis dasar yang dipilih. transform: translateY() mengubah kedudukan paparan tanpa mengubah pengiraan kotak baris, yang boleh menyebabkan ketidakjajaran kawasan sasaran sentuhan, limpahan, dan teks yang berikutnya.

3. Mengendalikan geometri SVG dan fon

Berikan SVG viewBox yang stabil; ruang kosong laluan boleh menghasilkan ralat visual walaupun CSS adalah betul. Tingkah laku garis dasar SVG sebaris juga melibatkan garis dasar alternatif dan dominant-baseline, jadi pemeriksaan visual dalam satu pelayar tidak mencukupi. Sediakan varian garis dasar, superskrip, dan subskrip dalam komponen ikon dan bukannya penggantian berulang oleh pemanggil.

4. Reka bentuk lapisan sandaran

Kesan ciri sebelum menggunakan anjakan yang tepat. Pelayar yang tidak menyokongnya menggunakan sandaran vertical-align, saiz, atau line-height yang konservatif. Sandaran mesti kekal boleh dibaca dan boleh diklik serta tidak boleh menolak teks tersembunyi ke luar skrin. Semasa pemuatan fon, terima garis dasar fon sistem dan gunakan token yang stabil selepas dimuatkan dan bukannya pembetulan skrip bingkai demi bingkai.

5. Kebolehcapaian dan pengantarabangsaan

Ikon hiasan mendapat teks alternatif kosong dan tidak boleh disebut dua kali. Ikon status memerlukan teks yang kelihatan atau nama yang boleh diakses. Kedudukan bukanlah semantik; RTL mengubah arah penulisan, bukan garis dasar menegak. Zum, kontras tinggi paksa, dan pergerakan yang dikurangkan mesti memastikan komponen kekal jelas dan boleh dikendalikan.

6. Ujian dan pintu regresi

Rangkumi fon biasa, kegagalan pemuatan fon, saiz 12–32px, kepelbagaian line-height, laluan SVG, superskrip, subskrip, RTL, pelayar, dan zum. Perbandingan tangkapan skrin harus memeriksa ralat garis dasar, perubahan ketinggian baris, pemotongan, dan kawasan sasaran sentuhan, di samping pemeriksaan kebolehcapaian. Apabila ketidakpadanan muncul, tentukan sama ada model garis dasar atau geometri aset yang salah sebelum menambah satu lagi transformasi.

Jawapan model

Saya akan memisahkan ikon teks badan, superskrip/subskrip, dan teks SVG kerana garis dasarnya berbeza. Kekalkan ikon teks badan dalam konteks pemformatan sebaris dan gunakan baseline-shift untuk ofset relatif; gunakan vertical-align untuk penjajaran kotak sebaris, dengan transform hanya sebagai pembetulan visual terakhir apabila reka letak tidak boleh diubah. Seragamkan viewBox SVG dan uji garis dasar alternatif serta ruang kosong laluan.

Saya akan menyediakan sandaran berasaskan pengesanan ciri untuk fon sistem dan pelayar lama, mengekalkan kawasan sasaran sentuhan dan teks yang boleh dibaca. Ikon hiasan disembunyikan dan ikon status dinamakan. Ujian merangkumi fon, saiz, ketinggian baris, SVG, RTL, zum, dan regresi tangkapan skrin; tindak balas pertama terhadap perubahan kedudukan adalah memeriksa semantik garis dasar dan geometri aset, bukannya melonggokkan lebih banyak nombor ajaib.

Kesilapan biasa

• Menganggap garis dasar sebagai pusat kotak dan menggunakan satu translateY untuk setiap fon.
• Menganggap vertical-align, baseline-shift, dan transform boleh saling bertukar ganti.
• Menguji hanya pada Chrome dengan fon lalainya, mengabaikan kegagalan fon, zum, dan RTL.
• Menyalahkan CSS sedangkan viewBox SVG mengandungi ruang kosong tambahan.
• Menyebabkan ikon hiasan dibaca dua kali atau membiarkan ikon status tanpa nama.
• Mengukur setiap bingkai dengan skrip, menyebabkan kegelisahan reka letak dan kos penyelenggaraan.

Soalan susulan dan jawapan

Mengapa tidak menggunakan top: -2px tetap?

Ia bergantung pada satu fon, saiz, dan ketinggian baris tertentu, tidak menyatakan niat garis dasar, dan tidak mengambil bahagian dalam pengiraan kotak baris. Token garis dasar relatif lebih mudah untuk disesuaikan dan diuji.

Bagaimana jika laluan SVG masih kelihatan rendah?

Periksa ruang kosong viewBox, geometri laluan, dan garis dasar alternatif SVG sebelum melaraskan token komponen. Jangan tambah transformasi pada setiap ikon sehingga kehilangan ketekalan seluruh sistem.

Bagaimanakah pelayar yang tidak disokong mengekalkan pengalaman pengguna?

Gunakan sandaran vertical-align dan saiz yang konservatif yang kekal boleh dibaca, boleh diklik, dan tidak terpotong. Anggap pengubahan anjakan yang tepat sebagai peningkatan berperingkat dan sahkan ketinggian baris sandaran dalam pelayar sebenar.