Kehendak soalan dan skop
Reka bentuk komponen kandungan untuk kana Jepun, Zhuyin Cina Tradisional, dan Pinyin. Bagaimanakah anda menstrukturkan markup ruby, menyokong anotasi berlapis, mengendalikan carian dan salinan, menyediakan fallback apabila CSS Ruby tidak tersedia, dan menilai risiko pembaca skrin?
W3C telah menerbitkan HTML Ruby Markup Extensions Candidate Recommendation Snapshot pada 4 Jun 2026. Ia menyemak semula struktur ruby HTML, memulihkan rb dan rtc sebagai elemen yang mematuhi piawaian (conforming), dan mentakrifkan unit semantik untuk asas, anotasi, bekas, serta pelbagai tahap anotasi. Ia bukan komponen terjemahan dan tidak menetapkan setiap strategi pertuturan pembaca skrin; asingkan markup semantik, reka letak, dan tingkah laku teknologi bantuan.
Perkara yang dinilai oleh penemu duga
Penemu duga mahukan pemadanan asas-ke-anotasi yang berstruktur, pilihan yang beralasan antara markup interleaved dan tabular, serta penggunaan CSS Ruby Layout dan bukannya meletakkan sebutan ke dalam imej. Terangkan atribut bahasa, carian dan salinan, fallback rp, ketekalan SSR/penghidratan, keselamatan XSS, dan had ujian pembaca skrin.
Soalan penjelasan sebelum menjawab
- Adakah sumber kandungan menyediakan pasangan asas/anotasi, atau komponen perlu membahagikan dan menjananya?
- Bolehkah satu asas mempunyai beberapa tahap bahasa atau anotasi, seperti Zhuyin dan Pinyin bersama-sama?
- Jika reka letak Ruby tidak tersedia, adakah produk patut memaparkan tanda kurung sebaris (inline), menyembunyikan anotasi, atau mengekalkan struktur mentah?
- Apakah yang perlu dikekalkan oleh carian, salinan papan keratan, dan teks-ke-pertuturan (text-to-speech) masing-masing?
- Bolehkah pengguna menghantar kandungan, dan elemen HTML, atribut, URL, serta peraturan CSP yang manakah dibenarkan?
Kerangka jawapan 30 saat
“Saya akan memodelkan julat asas, julat anotasi, bahasa, dan dasar persembahan, kemudian menghasilkan ruby, rb, rt, rtc, dan rp yang semantik. Markup interleaved mengendalikan pasangan mudah; bekas eksplisit atau markup tabular mengendalikan anotasi berbilang aksara dan berlapis tanpa bergantung pada pemadanan tersirat. CSS mengawal kedudukan Ruby dan penggayaan fallback; rp membekalkan kandungan sebaris yang boleh dilihat apabila reka letak Ruby tidak tersedia. Carian dan salinan mengikut semantik produk dan diuji dalam pelayar sebenar. Output pembaca skrin diuji secara langsung dan bukannya sekadar dijanjikan oleh spesifikasi. Kandungan pengguna disanitasi sebelum dipaparkan.”
Perbincangan mendalam langkah demi langkah
1. Takrifkan model data anotasi
Setiap segmen mengandungi julat asas, satu atau lebih julat anotasi, tag bahasa, dan dasar persembahan. Bahasa Jepun mungkin menggunakan kana; Bahasa Cina Tradisional mungkin menggunakan Zhuyin atau Pinyin Latin. Satu asas boleh mempunyai beberapa tahap rtc, tetapi tahap lalai mestilah eksplisit. Asingkan model daripada pemaparan agar peraturan segmentasi tidak tersebar merentasi komponen.
2. Pilih markup semantik
ruby ialah bekas keseluruhan, rb ialah unit asas, rt ialah teks anotasi, rtc ialah bekas anotasi, dan rp ialah persembahan fallback. Kes mudah boleh menggunakan unit asas tersirat, tetapi pemadanan berbilang aksara yang kompleks harus menggunakan rb eksplisit supaya DOM, tingkah laku salinan, dan reka letak kekal boleh diramal.
3. Kendalikan pemadanan berbilang aksara dan berlapis
Markup interleaved berfungsi untuk anotasi satu-ke-satu yang mudah. Markup tabular menyenaraikan beberapa unit rb diikuti oleh unit rt yang sepadan, yang mewakili perkataan majmuk dan bacaan berlapis dengan lebih baik. Kumpulkan elemen rt yang berturutan dengan rtc; tetapkan lang pada setiap lapisan bahasa. Jangan letakkan sebutan sebenar dalam pseudo-elemen CSS kerana carian, salinan, dan teknologi bantuan tidak dapat melihatnya dengan andal.
<ruby lang="zh-TW">
<rb>美</rb><rtc><rt>ㄇㄟˇ</rt></rtc>
<rtc lang="zh-Latn"><rt>měi</rt></rtc>
</ruby>4. Gunakan CSS untuk peningkatan reka letak progresif
HTML membekalkan struktur; CSS Ruby Annotation Layout mengawal ruby-position, saiz fon, ketinggian baris, dan penjajaran. Nilai lalai mesti mengelakkan anotasi daripada menutup teks asas dan mesti membenarkan zum teks. Apabila reka letak Ruby tidak tersedia, rp boleh memaparkan tanda kurung atau petunjuk sebaris yang lain; jangan sembunyikan semua teks anotasi dengan display: none.
5. Reka bentuk carian, salinan, dan pengekstrakan
Spesifikasi membincangkan interaksi carian dan salinan, tetapi pelaksanaan masih memerlukan ujian pelayar sebenar. Tentukan sama ada salinan mengandungi teks asas, asas bersama anotasi, atau eksport berstruktur. Carian sepatutnya menemui kedua-dua asas dan anotasi tanpa kehilangan perkataan akibat anotasi yang mengganggu DOM. Indeks pelayan boleh menyimpan medan berstruktur; klien tidak sepatutnya membuat kesimpulan pasangan menggunakan regex pada HTML yang dipaparkan.
6. Nilai teknologi bantuan dan pengantarabangsaan
Ruby boleh membantu kanak-kanak, penutur bukan asli, dan individu yang mengalami kesukaran membaca, tetapi pembaca skrin mungkin menggunakan heuristik yang berbeza. Tetapkan nilai lang yang tepat, kekalkan susunan teks yang bermakna, dan uji pembaca skrin, navigasi papan kekunci, zum, serta kontras tinggi. Jangan mendakwa bahawa spesifikasi menyelesaikan teks-ke-pertuturan sepenuhnya; dokumentasikan perbezaan yang diketahui dan fallback.
7. Sahkan keselamatan, prestasi, dan keserasian
Sanitasi asas dan anotasi yang dibekalkan oleh pengguna dengan senarai dibenarkan (allowlist) elemen dan atribut; tolak skrip, atribut peristiwa, dan URL berbahaya. SSR dan penghidratan mesti berkongsi algoritma pemadanan yang sama untuk mengelakkan kelipan anotasi atau penyusunan semula teks. Gunakan nod berstruktur dan pemaparan bertambah (incremental) untuk dokumen yang panjang, simpan cache model data dan bukannya HTML yang tidak selamat, serta uji dengan WPT dan matriks pelayar.
Contoh jawapan berkualiti tinggi
Saya akan memodelkan julat asas, tahap anotasi, bahasa, dan dasar persembahan sebelum menghasilkan markup ruby yang semantik. Pasangan mudah boleh menggunakan struktur interleaved; anotasi berbilang aksara dan berlapis menggunakan rb dan rtc eksplisit, dengan lang pada setiap lapisan bahasa. CSS Ruby Layout mengawal kedudukan, saiz, dan ketinggian baris, manakala rp menyediakan fallback sebaris apabila reka letak Ruby tidak tersedia. Salinan secara lalai mengambil teks asas, carian mengindeks kedua-dua asas dan anotasi, dan tingkah laku yang tepat diuji dalam pelayar sebenar. Oleh kerana pertuturan teknologi bantuan tidak diseragamkan sepenuhnya oleh spesifikasi ini, saya akan menguji pembaca skrin, papan kekunci, zum, dan kontras tinggi serta mendokumentasikan perbezaan. Input disanitasi, SSR dan klien menggunakan satu model data dan algoritma pemadanan, manakala WPT serta matriks pelayar mengesahkan struktur, reka letak, carian, salinan, dan keselamatan.
Kesilapan lazim
- Memaparkan sebutan hanya dengan pseudo-elemen CSS → carian dan teknologi bantuan kehilangan teks → gunakan markup Ruby semantik.
- Mengekod keras setiap aksara sebagai nod interleaved → bacaan majmuk dan berlapis menjadi rapuh → gunakan pemadanan berstruktur dan
rtc. - Menganggap
rpsebagai tanda baca wajib yang boleh dilihat → pelayar yang menyokongnya akan menunjukkan kandungan pendua → tunjukkan ia hanya dalam persembahan fallback. - Mengabaikan
lang→ pertuturan dan pemilihan fon menjadi salah → tag lapisan asas dan anotasi dengan tepat. - Menjanjikan susunan pembaca skrin yang serupa → spesifikasi tidak mentakrifkan tingkah laku TTS yang lengkap → uji peranti dan dokumentasikan perbezaan.
- Memaparkan HTML pengguna secara terus → suntikan skrip boleh berlaku → sanitasi elemen, atribut, dan URL.
Soalan susulan dan jawapan
Bilakah anda patut menggunakan rb berbanding asas tersirat?
Asas tersirat sesuai untuk anotasi satu lapisan yang mudah. Gunakan rb eksplisit untuk perkataan majmuk, markup tabular, atau aplikasi yang memerlukan DOM stabil untuk pemadanan, salinan, dan penyahpepijatan.
Bagaimana jika satu asas mempunyai kana dan perumian (romanization)?
Gunakan berbilang lapisan rtc atau bekas anotasi eksplisit dan tetapkan lang pada setiap satu. Produk mesti memilih lapisan lalai dan dasar pertukaran; CSS tidak sepatutnya menentukan semantik.
Apakah fallback apabila reka letak Ruby tidak tersedia?
Kekalkan struktur teks dan gunakan rp untuk tanda kurung atau pemisah sebaris supaya asas dan anotasi kekal boleh dibaca. Jangan sembunyikan kandungan atau menggantikannya dengan imej yang tidak boleh dipilih.
Bagaimanakah anda mentakrifkan tingkah laku salinan?
Pilih teks asas, asas bersama anotasi, atau eksport berstruktur mengikut matlamat produk, kemudian uji pada Chromium, Firefox, Safari, dan mudah alih. Susunan DOM tidak secara automatik menjadi rentetan yang diingini oleh pengguna.
Bagaimanakah anda menunjukkan bahawa anotasi kekal boleh diakses?
Semak tag bahasa, susunan fokus, zum, operasi papan kekunci, dan output pembaca skrin merentasi mod tanpa anotasi, satu lapisan, berbilang lapisan, dan fallback. Terbitkan perbezaan teknologi bantuan yang diketahui.