Cara Menterjemah Fail HTML Tanpa Merosakkan Tag, Atribut atau Pautan

Untuk menterjemah fail HTML, terjemah teks yang dibaca orang dan atribut yang membawa perkataan untuk pembaca, seperti alt, title, placeholder, aria-label, dan penerangan meta halaman. Biarkan penanda sahaja: nama tag, href, src, id, class, skrip, gaya, dan apa-apa yang ditanda translate="no". Kemudian tukar satu nilai yang mudah terlupa, atribut lang pada elemen <html>, supaya pelayar, pembaca skrin, dan enjin carian tahu bahasa halaman itu sekarang.

Mengekalkan tag ternyata bahagian yang mudah. Kami menterjemah halaman bantuan HTML 59 baris ke Bahasa Cina Ringkas sembilan kali dengan model tempatan, menggunakan tiga kaedah, dan menyemak setiap output dengan skrip. Setiap jalan mengekalkan setiap tag, pautan, dan ID. Apa yang tidak kena lebih senyap: model menterjemah satu baris dalam blok kod <pre> dalam kesemua enam jalan yang menghantar seluruh fail, ia membiarkan aria-label navigasi dalam bahasa Inggeris dalam kesemua enam, dan kaedah yang paling selamat mengekalkan penanda secara reka bentuk, menterjemah kepingan teks satu demi satu, menghasilkan ayat yang memberitahu pembaca melakukan perkara yang salah dalam kesemua tiga jalannya.

Jawapan Pantas: Apa yang Perlu Diterjemah dan Apa yang Perlu Dibiarkan

Senarai ini bukan ciptaan kami. Bahagian Piawaian HTML tentang atribut translate mentakrifkan "atribut boleh terjemah": title pada setiap elemen, alt pada imej, placeholder pada input, content pada elemen meta yang namanya diketahui boleh diterjemah, dan lang, yang menurutnya mesti ditukar agar sepadan dengan bahasa baharu. Ia juga menamakan aria-label ARIA sebagai contoh atribut yang boleh ditambah oleh spesifikasi lain, dan menyatakan bahawa dalam elemen translate="no", teks dan nilai atribut "hendaklah dibiarkan seperti asal apabila halaman disetempatkan."

Apa yang Kami Uji

Kami menulis sample-source.html, halaman pusat bantuan untuk aplikasi bacaan fiksyen yang sama, Shelfmark, yang kami gunakan dalam ujian terjemahan Markdown kami. Ia mempunyai satu contoh bagi setiap baris dalam jadual di atas, serta beberapa perangkap:

• ayat yang dipecahkan oleh tag sebaris: "Sebelum anda mengeksport, buat sandaran nota anda. Eksport menyalin buku anda, tetapi ia tidak memadam apa-apa daripada Shelfmark," dengan nama produk di dalam translate="no";
• ayat dengan dua elemen <code> sebaris yang urutannya penting: "Taip laluan ke folder <library> selepas --out";
• blok <pre><code> dengan arahan dan satu baris output contoh, # Export finished: 128 books;
• peraturan CSS yang menyelitkan perkataan "Nota:" sebelum perenggan;
• pautan dalam halaman ke #choose-format, pautan mailto:, borang carian, dan blok JSON-LD.

Kemudian kami meminta model tempatan menterjemahkannya ke bahasa Cina Ringkas dalam tiga cara:

1. Fail penuh. Tampal keseluruhan fail dan minta fail terjemahan dikembalikan.
2. Berarahan. Sama, tambah lapan peraturan: kekalkan setiap nama tag dan atribut, jangan ubah href, src, id, class dan nilai serupa, terjemahkan atribut teks dan tag meta yang disenaraikan, biarkan <code>, <pre>, <script>, dan <style> kecuali name dan description JSON-LD, hormati translate="no", kekalkan rujukan aksara dan komen, dan tetapkan lang kepada zh-Hans.
3. Segmen. Pendekatan alat yang mengekstrak teks daripada HTML: skrip memecahkan fail kepada tag dan teks, melangkau <code>, <pre>, <script>, <style>, dan elemen translate="no", menghantar kepingan teks dan atribut teks yang tinggal kepada model sebagai senarai JSON bernombor, dan menulis terjemahan kembali ke dalam penanda yang tidak disentuh. Ia juga menetapkan lang="zh-Hans" sendiri.

Model itu ialah Qwen 3.6 27B (Q4_K_M) dalam LM Studio, dengan pemikiran dimatikan dan suhu 0.3, pada Apple M4 Max dengan memori 64 GB. Kami menjalankan setiap kaedah tiga kali, sembilan larian kesemuanya, pada 27 Oktober 2026. Skrip ialah run_llm_html_test.py, dan kesemua sembilan output diterbitkan tanpa suntingan; README menyenaraikan setiap fail. Jika anda belum menyediakan model tempatan sebelum ini, panduan terjemahan LLM tempatan kami merangkumi tetapan tersebut.

Ini adalah ujian kecil bagi satu model, satu pasangan bahasa, dan satu halaman. Ia menunjukkan masalah yang berlaku dan cara menangkapnya. Ia tidak menyenaraikan kedudukan model atau alat.

Keputusan: Penanda Terselamat; Tiga Keputusan Tidak

Kami menyemak setiap output dengan check_html_translation.py, iaitu penyemak yang hanya menggunakan pustaka standard Python. Output penuh terdapat dalam check-results.txt, dan results.csv mempunyai satu baris bagi setiap larian.

Setiap satu daripada sembilan larian mengekalkan 58 tag yang sama dalam susunan yang sama, setiap href, src, id, dan class, sasaran pautan dalam halaman, komen, <library> yang diescape, dan nama produk di dalam translate="no". Jika anda bimbang model akan merosakkan markup halaman mudah, ia tidak berbuat demikian. Masalahnya semua terletak pada apa yang perlu diterjemah.

1. Output sampel di dalam <pre> telah diterjemah

Blok kod dalam sampel kami berakhir dengan satu baris output program:

<pre><code>shelfmark export --format epub --covers --out ~/Books/export
# Export finished: 128 books</code></pre>

Dalam kesemua enam larian fail penuh dan larian berarahan, model mengembalikan # 导出完成：128 本书 pada baris itu, termasuk tiga larian yang promptnya menyatakan supaya tidak mengubah apa-apa di dalam <pre>. Perintah itu sendiri tidak pernah disentuh. Model menganggap baris itu sebagai komen, dan menterjemah komen adalah pilihan yang wajar dalam tutorial. Tetapi baris ini ialah apa yang dicetak oleh program, dan pembaca yang membandingkannya dengan terminal mereka akan melihat bahasa Inggeris. Tentukan sebelum anda menterjemah sama ada output sampel dan komen kod perlu diterjemah, dan beritahu alat tersebut, atau lindungi blok <pre> sepenuhnya.

Larian fail penuh juga menterjemah content: "Note: " CSS dalam blok <style>, manakala larian berarahan, yang diarahkan supaya tidak mengusik <style>, mengekalkannya dalam bahasa Inggeris. Kedua-duanya tidak salah dengan sendirinya. Menterjemah helaian gaya adalah betul untuk halaman yang CSS-nya sebaris, dan salah untuk tapak yang menggunakan satu helaian gaya dikongsi untuk semua bahasa. Sama ada cara, ia adalah keputusan yang perlu dibuat oleh seseorang, bukan butiran yang patut diteka oleh model.

2. Label kebolehcapaian telah dilangkau

Navigasi breadcrumb ialah <nav aria-label="Breadcrumb">. Pembaca skrin mengumumkan label itu; pembaca yang melihat tidak pernah melihatnya. Dalam kesemua enam larian fail penuh dan larian berarahan, ia kekal dalam bahasa Inggeris, walaupun prompt berarahan menyenaraikan aria-label antara atribut yang perlu diterjemah. Dalam satu larian berarahan, aria-label="Search" butang carian juga kekal dalam bahasa Inggeris.

Kaedah segmen menterjemahnya setiap kali, kerana skripnya mengumpul setiap nilai aria-label, alt, title, dan placeholder dan meminta setiap satu secara eksplisit. Itulah hujah terkuat untuk mengekstrak atribut teks dengan sengaja daripada berharap model menyedarinya.

3. Menterjemah bahagian-bahagian mengekalkan tag tetapi merosakkan ayat

Kaedah segmen selamat untuk penanda aras secara semula jadi: model tidak pernah melihat tag, jadi ia tidak boleh merosakkannya. Ia lulus setiap semakan struktur dalam ketiga-tiga larian. Ia juga menghasilkan satu-satunya terjemahan dalam ujian yang memberikan arahan salah kepada pembaca.

Ayat bahasa Inggeris ialah "Type the path to the <library> folder after --out." <code> sebaris memecahkannya kepada tiga bahagian: "Type the path to the", "folder after", dan noktah. Bahasa Cina meletakkan perkataan ini dalam susunan berbeza, jadi penterjemah perlu memindahkan dua elemen kod. Kaedah segmen tidak boleh memindahkannya. Ketiga-tiga larian menterbalikkan arahan. Larian 2 menghasilkan ini (larian 1 dan 3 menggunakan 后 bukan 之后, dengan maksud sama):

在 <code>&lt;library&gt;</code> 之后输入 <code>--out</code>文件夹的路径。

Itu berbunyi "selepas <library>, taip laluan folder --out," iaitu terbalik daripada arahan asal. Kesemua enam larian fail penuh dan larian berarahan memindahkan elemen kod dan mendapatkannya dengan betul:

在 <code>--out</code> 后面输入 <code>&lt;library&gt;</code> 文件夹的路径。

Pemecahan yang sama meninggalkan ruang terpencil di tempat tag bertemu teks Cina, seperti 前往 <b>设置</b> dan <b>书库</b> ，, dalam ketiga-tiga larian segmen, enam tempat setiap larian. Pelayar memaparkannya sebagai jurang kelihatan, termasuk sebelum tanda baca Cina. Larian fail penuh tidak mempunyai sebarang jurang; dua daripada tiga larian berarahan mempunyai empat atau lima.

Penyemak struktur tidak dapat mengesan ayat terbalik, kerana setiap tag berada tepat di tempat asalnya. Penyemak kami melaporkan apabila kod sebaris berubah susunan, yang normal bagi banyak bahasa, tetapi amaran itu tidak dapat membezakan betul daripada salah. Dalam ujian ini ia berbunyi pada kesemua enam terjemahan betul dan senyap pada tiga yang salah, kerana yang salah mengekalkan susunan bahasa Inggeris. Hanya pembaca yang membaca ayat itu dapat mengetahuinya. Penyelesaiannya ialah menghantar ayat penuh, bersama tag sebarisnya, kepada penterjemah, seperti yang dilakukan oleh larian fail penuh, dan menyemak struktur selepas itu.

Perbezaan kecil

• lang: larian fail penuh menukarnya kepada zh-CN secara sendiri. Larian berarahan menggunakan zh-Hans, seperti yang diminta. Kedua-duanya tag bahasa yang sah; zh-Hans menamakan skrip (Cina Ringkas), zh-CN menamakan wilayah. Panduan W3C tentang pengisytiharan bahasa mengesyorkan mengisytiharkan bahasa pada elemen <html> dan bukan dengan tag meta Content-Language.
• JSON-LD: larian fail penuh dan berarahan menterjemah nilai name dan description serta mengekalkan JSON yang sah. Skrip segmen kami melangkau kandungan <script>, jadi data berstrukturnya kekal dalam bahasa Inggeris, yang juga akan berlaku pada alat yang mengabaikan skrip.
• Rujukan aksara: larian fail penuh dan berarahan mengekalkan ›,  , ©, dan rujukan emoji seperti yang ditulis. Lima daripada enam larian itu menulis semula julat 2–5 dalam perkataan Cina (2 到 5 atau 2 至 5); satu larian berarahan menulis sengkang biasa dan bukannya rujukan, walaupun promptnya menyatakan supaya mengekalkan rujukan. Skrip segmen kami menyahkod semuanya dan menulis semula aksara, yang memaparkan hasil yang sama. Yang penting, <library> di dalam <code>, kekal dilepaskan dalam kesemua sembilan larian.

Sebelum Anda Menterjemah: Sediakan Fail

1. Tandakan perkara yang tidak boleh berubah. Letakkan translate="no" pada nama produk, nombor model, rentetan seperti kod dalam prosa, dan apa-apa sahaja yang mesti kekal seperti asal. Ia sebahagian daripada HTML, tidak memerlukan kos, dan model mematuhinya dalam kesemua enam larian yang menghantar fail penuh. Alat segmen yang membacanya, seperti skrip kami, melangkau elemen tersebut sepenuhnya. Panduan jangan-terjemah kami merangkumi cara memutuskan apa yang perlu dimasukkan dalam senarai itu.
2. Tentukan dasar kod. Adakah komen kod diterjemah? Adakah contoh output? Adakah helaian gaya dikongsi merentas bahasa? Tulis jawapannya, bersama nama yang tidak boleh berubah, dalam glosari terjemahan, dan berikan kepada sesiapa atau apa sahaja yang menterjemah.
3. Kekalkan ID dalam bahasa sumber. Pautan dalam halaman merujuk kepada nilai id. Jika seseorang menterjemah id, setiap pautan kepadanya akan rosak. Tiada larian kami yang berbuat demikian, tetapi penterjemah yang "membantu" menyetempatkan sauh akan melakukannya.
4. Kumpulkan teks tersembunyi. Senaraikan atribut yang mengandungi perkataan, alt, title, placeholder, aria-label, value pada butang, tag meta, dan JSON-LD, supaya ia disemak dan tidak dilupakan.
5. Jangan terjemah rentetan JavaScript di tempatnya. Mesej yang ditetapkan oleh skrip, seperti amaran atau label butang yang dicipta dalam kod, memerlukan langkah penyetempatan berasingan dalam kod. Tiada daripada enam larian fail penuh atau berarahan mengubah blok skrip kami, yang betul, tetapi ini bermakna rentetan tersebut kekal dalam bahasa Inggeris.

Selepas Anda Menterjemah: Semak

1. Jalankan semakan struktur.

   python3 check_html_translation.py source.html translated.html --lang zh-Hans --keep Shelfmark
   

   Ia membandingkan tag dan susunannya, setiap atribut yang bukan teks untuk pembaca, kandungan <pre>, <script>, dan <style>, kod sebaris, kunci JSON-LD, teks translate="no", komen, dan pautan dalam halaman. Ia memberi amaran tentang atribut teks yang masih dalam bahasa Inggeris, nilai lang yang berbeza daripada yang anda jangkakan, teks kelihatan yang kelihatan tidak diterjemah, kod sebaris yang berubah susunan, dan ruang antara teks Cina, Jepun, atau Korea merentas tag sebaris. Ia tidak menilai kualiti terjemahan.

2. Baca setiap ayat yang mengandungi tag sebaris. Di sinilah makna terlerai dalam ujian kami. Jangan bergantung pada amaran "kod sebaris disusun semula" penyemak untuk mencari ayat ini: dalam ujian kami, terjemahan yang salah ialah yang mengekalkan susunan asal.

3. Buka halaman dalam pelayar. Klik pautan dalam halaman, tab melalui borang dengan pembaca skrin jika boleh, dan cari jurang di sekitar teks tebal dan berpaut.

4. Untuk bahasa kanan-ke-kiri, tetapkan juga dir="rtl" pada elemen <html>. Panduan terjemahan buku RTL kami merangkumi apa lagi yang berubah.

5. Untuk XHTML, seperti fail bab dalam EPUB, sahkan juga bahawa fail itu masih XML yang terbentuk dengan baik, contohnya dengan xmllint --noout chapter.xhtml. Pelayar memaafkan tag yang tidak ditutup; pembaca e-buku mungkin tidak. Senarai semak QA terjemahan EPUB kami merangkumi selebihnya e-buku.

Di Mana BookTranslator Sesuai

Halaman muat naik BookTranslator menerima fail .html, .htm, dan .xhtml bersama buku dan dokumen, jadi anda boleh memuat naik halaman yang disimpan atau artikel bantuan statik sebagai satu fail penuh. Kami tidak menjalankan sampel ini melalui BookTranslator untuk artikel ini, dan kami belum menguji cara ia mengendalikan susunan kod sebaris, kandungan CSS, atau JSON-LD, jadi semak outputnya sama seperti anda menyemak mana-mana alat lain. Anda melihat harga sebelum membayar.

Apa pun yang anda gunakan, lakukan langkah persediaan sebelum menterjemah dan semakan selepasnya. Halaman dengan setiap tag yang utuh masih boleh memberitahu pembaca untuk menaip perkara yang salah. Jika HTML anda sebenarnya dokumentasi yang ditulis dalam Markdown, panduan terjemahan Markdown kami merangkumi format sumber itu.

Dapatkan Fail Ujian

Semua daripada ujian ini boleh digunakan semula secara percuma:

• sample-source.html: sampel bahasa Inggeris 59 baris;
• check_html_translation.py: penyemak struktur (pustaka standard Python sahaja);
• run_llm_html_test.py: tiga kaedah, untuk mana-mana pelayan tempatan serasi OpenAI;
• sembilan output dalam folder outputs, dengan check-results.txt dan results.csv.