Frontend Interview: Menyejajarkan Teks Sebaris (Inline) dan SVG dengan CSS baseline-shift

Prompt dan konteks

Sebuah sistem desain membutuhkan ikon status, simbol satuan, dan SVG inline untuk sejajar dengan teks isi (body), label tombol, dan notasi matematika. Pengembang menggunakan nilai top negatif atau transform, tetapi ikon bergeser ketika font, line height, dan tata letak RTL berubah. Rancang solusi berbasis CSS baseline yang mencakup baseline-shift, baseline SVG, fallback, aksesibilitas, dan regresi visual.

Hal yang diuji oleh pewawancara

• Pemahaman tentang inline formatting context, baseline font, superskrip, subskrip, dan baseline alternatif.
• Membedakan antara baseline-shift, vertical-align, dan transform.
• Menangani perbedaan browser antara teks HTML dan konten SVG.
• Mempertahankan keterbacaan teks, urutan fokus, dan semantik RTL daripada sekadar mengejar piksel.
• Memverifikasi dengan matriks font, snapshot, dan cakupan browser sebenarnya.

Pertanyaan untuk klarifikasi

1. Apakah ikon bersifat dekoratif atau mengomunikasikan status? Apakah terdapat teks yang terlihat dan nama yang dapat diakses (accessible name)?
2. Apakah targetnya adalah ikon inline biasa, satuan superskrip, rumus, atau teks di dalam SVG?
3. Browser mana saja, kegagalan pemuatan font apa, dan tingkat zoom berapa yang harus didukung?
4. Apakah acuannya berupa baseline alfabetis, baseline matematika, dominant-baseline SVG, atau pusat visual?
5. Haruskah komponen mendukung RTL, ukuran font dinamis, dan kontras tinggi paksa (forced high contrast)?

Jawaban 30 detik

Saya akan menentukan semantik baseline terlebih dahulu: ikon teks isi biasanya mengikuti baseline alfabetis, sementara rumus dan superskrip memerlukan pergeseran eksplisit. Pertahankan ikon dalam inline formatting context dan gunakan baseline-shift untuk mengekspresikan relasi tersebut; gunakan vertical-align untuk perataan kotak sebaris (inline-box), dan jangan perlakukan transform sebagai aturan tata cetak (typesetting). Normalisasikan viewBox dan perilaku baseline SVG, dengan fallback vertical-align atau ukuran yang konservatif untuk browser lama. Sembunyikan ikon dekoratif, beri nama pada ikon status, dan uji pemuatan font, zoom, RTL, SVG, serta snapshot browser.

Pembahasan mendalam langkah demi langkah

1. Menetapkan semantik baseline

Baseline bukanlah bagian tengah vertikal dari sebuah kotak. Ikon teks isi biasanya sejajar dengan baseline alfabetis; superskrip, subskrip, dan simbol matematika memiliki relasi yang berbeda. Tulis persyaratannya sebagai "geser relatif terhadap baseline baris saat ini" sebelum memilih properti CSS, alih-alih mengarang nilai piksel untuk setiap font.

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

Nilai ini merupakan token komponen, bukan konstanta universal; ukur nilainya dengan font dan ukuran yang sebenarnya.

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

baseline-shift mengekspresikan offset relatif terhadap baseline untuk superskrip, subskrip, dan konten inline yang harus mempertahankan tata letak teks. vertical-align berpartisipasi dalam kotak inline, sel tabel, atau baseline yang dipilih. transform: translateY() mengubah posisi tampilan (paint) tanpa mengubah perhitungan line-box, yang dapat membuat area klik (hit areas), overflow, dan teks berikutnya menjadi tidak sejajar.

3. Menangani geometri SVG dan font

Beri SVG viewBox yang stabil; spasi kosong pada path dapat menimbulkan kesalahan visual meskipun CSS sudah benar. Perilaku baseline SVG inline juga melibatkan baseline alternatif dan dominant-baseline, sehingga inspeksi visual pada satu browser saja tidak cukup. Sediakan varian baseline, superskrip, dan subskrip pada komponen ikon alih-alih override berulang oleh pemanggil komponen.

4. Merancang lapisan fallback

Lakukan feature-detection pada properti sebelum menerapkan pergeseran presisi. Browser yang tidak mendukung akan menggunakan fallback vertical-align, ukuran, atau line-height yang konservatif. Fallback harus tetap dapat dibaca dan diklik, serta tidak boleh mendorong teks tersembunyi keluar layar. Selama pemuatan font, terima baseline font sistem dan gunakan token stabil setelah selesai dimuat alih-alih melakukan koreksi skrip frame-demi-frame.

5. Aksesibilitas dan internasionalisasi

Ikon dekoratif diberi teks alternatif kosong dan tidak boleh dibacakan dua kali oleh pembaca layar. Ikon status memerlukan teks yang terlihat atau nama yang dapat diakses. Posisi bukanlah semantik; RTL mengubah arah penulisan, bukan baseline vertikal. Zoom, kontras tinggi paksa, dan reduced motion harus tetap menjaga komponen tetap jelas dan dapat dioperasikan.

6. Pengujian dan gerbang regresi (regression gates)

Cakup font umum, kegagalan pemuatan font, ukuran 12–32px, variasi line-height, path SVG, superskrip, subskrip, RTL, berbagai browser, dan zoom. Perbandingan screenshot harus memeriksa kesalahan baseline, perubahan line-height, pemotongan (clipping), dan area klik, di samping pemeriksaan aksesibilitas. Ketika terjadi ketidaksesuaian, tentukan apakah model baseline atau geometri aset yang salah sebelum menambahkan transform lainnya.

Jawaban model

Saya akan memisahkan ikon teks isi, superskrip/subskrip, dan teks SVG karena baseline-nya berbeda. Pertahankan ikon teks isi dalam inline formatting context dan gunakan baseline-shift untuk offset relatif; gunakan vertical-align untuk perataan inline-box, dengan transform hanya sebagai koreksi visual terakhir saat tata letak tidak dapat diubah. Normalisasikan viewBox SVG dan uji baseline alternatif serta spasi kosong path.

Saya akan menerapkan fallback berbasis feature-detection untuk font sistem dan browser lama, dengan tetap mempertahankan area klik dan teks yang terbaca. Ikon dekoratif disembunyikan dan ikon status diberi nama. Pengujian mencakup font, ukuran, line height, SVG, RTL, zoom, dan regresi screenshot; respon pertama terhadap pergeseran posisi adalah memeriksa semantik baseline dan geometri aset, bukan menumpuk angka acak (magic numbers).

Kesalahan umum

• Memperlakukan baseline sebagai pusat kotak dan menggunakan satu translateY untuk setiap font.
• Menganggap vertical-align, baseline-shift, dan transform dapat saling menggantikan.
• Hanya menguji di Chrome dengan font default-nya, mengabaikan kegagalan font, zoom, dan RTL.
• Menyalahkan CSS padahal viewBox SVG berisi spasi kosong tambahan.
• Membuat ikon dekoratif dibacakan dua kali atau membiarkan ikon status tanpa nama.
• Mengukur setiap frame dengan skrip, menyebabkan layout jitter dan biaya pemeliharaan yang tinggi.

Pertanyaan lanjutan dan tanggapan

Mengapa tidak menggunakan top: -2px tetap?

Hal itu bergantung pada satu font, ukuran, dan line height tertentu, tidak mengekspresikan maksud baseline, serta tidak berpartisipasi dalam perhitungan line-box. Token baseline relatif lebih mudah diadaptasi dan diuji.

Bagaimana jika path SVG masih terlihat terlalu rendah?

Periksa spasi kosong viewBox, geometri path, dan baseline alternatif SVG sebelum menyesuaikan token komponen. Jangan menambahkan transform ke setiap ikon yang dapat menghilangkan konsistensi di seluruh sistem.

Bagaimana browser yang tidak mendukung menjaga pengalaman pengguna?

Gunakan fallback vertical-align dan ukuran yang konservatif agar tetap terbaca, dapat diklik, dan tidak terpotong. Perlakukan pergeseran presisi sebagai peningkatan bertahap (enhancement) dan verifikasi line height fallback di browser nyata.