KAL
Menu

Internasionalisasi

Atribut lang dan dir serta disiplin pengodean karakter.

Daftar isi

Satu halaman web dapat dibaca pengguna dari berbagai bahasa, dan bahasa itu sendiri memengaruhi cara halaman dibacakan, diurutkan, serta ditampilkan. Topik ini membahas tiga perangkat markup untuk kebutuhan tersebut, yaitu atribut lang yang menyatakan bahasa, atribut dir yang menyatakan arah teks, dan pengodean karakter UTF-8 yang menampung seluruh aksara. Ketiganya diatur dari markup tanpa skrip tambahan.

Bahasa halaman lewat atribut lang#

Atribut lang pada elemen html menyatakan bahasa seluruh halaman, dan kode bahasanya mengikuti standar BCP 47, misalnya id untuk bahasa Indonesia dan ja untuk bahasa Jepang. Nilai itu diwariskan ke seluruh elemen di dalamnya, sehingga satu penulisan sudah mencakup halaman penuh. Kode bahasa Indonesia adalah id, sedangkan kode in yang pernah digunakan pada masa lalu sudah tidak digunakan lagi.

html Elemen html berbahasa Indonesia 
<html lang="id">
  <body>
    <h1>Jadwal piket kelas</h1>
  </body>
</html>

Manfaat paling langsung dirasakan pembaca layar (screen reader), yaitu perangkat yang membacakan halaman bagi pengguna dengan gangguan penglihatan. Dengan lang yang tepat, pembaca layar memilih aturan pengucapan dan kosakata suaranya sesuai bahasa halaman, sedangkan lang yang salah atau kosong membuat teks dibacakan dengan lafal yang menyimpang. Mesin pencari dan alat terjemahan juga memanfaatkan nilai ini, sehingga halaman dikelompokkan dengan benar.

Bahasa pada potongan bahasa lain#

Halaman Indonesia sering memuat kutipan dari bahasa lain, dan potongan itu perlu berlang tersendiri. Atribut lang pada elemen di dalam halaman mengganti bahasa hanya untuk elemen tersebut, dan pembaca layar menyesuaikan suaranya pada batas elemen itu. Tanpa penandaan ini, kutipan bahasa asing dibacakan dengan aturan lafal bahasa halaman, sehingga hasilnya jauh dari aslinya.

html Kutipan Jepang berlang tersendiri 
<p>Pepatah Jepang mengingatkan, <span lang="ja">継続は力なり</span>, bahwa kegigihan adalah kekuatan.</p>

Nilai lang juga membantu pemilihan huruf dan pemenggalan kata pada browser yang mengatur tipografinya per bahasa, misalnya jarak baris bahasa Jepang yang berbeda dari teks Latin. Sifat pewarisan lang juga terlihat di sini, yaitu span berlang mengganti bahasa hanya pada lingkupnya sendiri, sedangkan kalimat di sekitarnya tetap bahasa Indonesia. Penandaan per potongan seperti ini murah ditulis dan langsung terasa bagi pengguna pembaca layar.

Arah teks dengan atribut dir#

Atribut dir menyatakan arah penulisan teks, dengan nilai ltr untuk kiri ke kanan, rtl untuk kanan ke kiri, dan auto untuk menyerahkan penentuannya pada isi teks. Halaman berbahasa Indonesia mengalir kiri ke kanan secara bawaan (default), sehingga dir jarang perlu ditulis untuknya. Nilai rtl berlaku pada aksara seperti Arab dan Ibrani, dan arah tersebut memengaruhi urutan teks sekaligus aliran tata letak elemennya.

Arah juga diwariskan, sehingga dir="rtl" cukup dinyatakan sekali pada elemen pembungkus untuk seluruh isinya. Kutipan pendek di tengah kalimat biasanya cukup ditandai pada elemen yang membungkusnya, seperti pada contoh berikut. Atribut lang dan dir kerap ditulis berpasangan pada elemen yang sama, karena bahasa dan arahnya dinyatakan sekaligus.

html Kutipan Arab dengan arah kanan ke kiri 
<p>Ungkapan Arab mengibaratkan waktu, <span lang="ar" dir="rtl">الوقت من ذهب</span>, sebagai emas.</p>

Algoritme dua arah (bidi) yang dikerjakan browser sudah menangani campuran teks Arab dan Latin di dalam satu baris, tetapi algoritme itu tetap membutuhkan arah dasar yang benar dari atribut dir. Kesalahan arah dasar membalik urutan bagian kalimat, misalnya tanda baca yang tampil di sisi yang keliru. Menyerahkan hitungan ini pada browser dengan penandaan yang tepat selalu lebih andal daripada menyusun ulang teks secara manual.

UTF-8 sebagai satu pengodean#

Setiap karakter disimpan sebagai rangkaian byte, dan aturan pemetaannya disebut pengodean (encoding) karakter. Pengodean lama seperti iso-8859-1 hanya menampung rentang huruf Latin, sedangkan UTF-8 menampung aksara standar dunia dengan jumlah byte yang menyesuaikan karakternya. Satu pengodean untuk semua bahasa inilah alasan UTF-8 menjadi pengodean hampir seluruh web saat ini.

Deklarasinya ditulis melalui meta charset di dalam head, dan pembahasan lengkapnya ada pada modul head dan metadata. Yang perlu dipegang di sini adalah kesesuaian deklarasi dengan berkas, yaitu meta charset="utf-8" hanya benar apabila berkas memang disimpan sebagai UTF-8 oleh editor teks. Ketidakcocokan keduanya membuat karakter non-Latin tampil acak, karena browser menafsirkan byte dengan peta yang keliru.

Perbedaan antarpengodean dapat dibuktikan langsung dari terminal dengan alat standar Linux. Teks contoh berikut sama persis, tetapi label pengodean dan jumlah byte-nya berbeda. Seluruh perintahnya adalah peralatan bawaan, sehingga pembuktian ini dapat diulang di terminal mana pun.

bash 
# tulis teks contoh yang memuat huruf é
printf 'kafé' > sampel-utf8.txt
# salin teks yang sama ke pengodean lama iso-8859-1
iconv -f utf-8 -t iso-8859-1 sampel-utf8.txt > sampel-latin1.txt
# bandingkan pengodean terdeteksi dan jumlah byte keduanya
file -bi sampel-utf8.txt sampel-latin1.txt
wc -c sampel-utf8.txt sampel-latin1.txt
# berkas contoh dibersihkan setelah pembandingannya
rm sampel-utf8.txt sampel-latin1.txt
text Keluaran 
text/plain; charset=utf-8
text/plain; charset=iso-8859-1
5 sampel-utf8.txt
4 sampel-latin1.txt
9 total

Huruf é menempati dua byte pada UTF-8 dan satu byte pada iso-8859-1, sehingga teks yang sama berukuran berbeda. Kasus aksara Arab atau Jepang lebih ekstrem lagi, karena iso-8859-1 sama sekali tidak memetakan karakternya dan konversinya memang tidak mungkin dilakukan. Satu berkas yang disimpan UTF-8 dan dinyatakan UTF-8 menghilangkan seluruh persoalan ini sekaligus.

Berkas utuh halaman tiga bahasa#

Berkas berikut merangkum topik ini pada satu halaman Indonesia yang memuat kutipan Arab dan kutipan Jepang. Seluruh karakter asing tetap tersimpan aman karena berkasnya UTF-8, dan bahasa serta arah tiap potongan dinyatakan eksplisit pada elemennya. Berkasnya dapat dibuka langsung di browser tanpa jaringan maupun langkah build.

html i18n.html 
<!DOCTYPE html>
<html lang="id" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Halaman dengan tiga bahasa</title>
  <style>
    body { font-family: sans-serif; max-width: 32rem; margin: 0 auto; padding: 0 1rem; color: #222222; }
    [dir="rtl"] { font-size: 1.2rem; }
  </style>
</head>
<body>
  <h1>Halaman dengan tiga bahasa</h1>

  <p>Halaman ini ditulis dalam bahasa Indonesia, sehingga elemen html membawa lang="id".</p>

  <p>Ungkapan Arab mengibaratkan waktu, <span lang="ar" dir="rtl">الوقت من ذهب</span>, sebagai emas.</p>

  <p lang="ar" dir="rtl">الوقت من ذهب</p>

  <p>Pepatah Jepang mengingatkan, <span lang="ja">継続は力なり</span>, bahwa kegigihan adalah kekuatan.</p>
</body>
</html>

Pada berkas itu, atribut lang="id" pada html menutup seluruh halaman, sedangkan span dan paragraf berlang mengganti bahasa hanya pada lingkup masing-masing. Ungkapan Arab tampil dua kali, sekali sebagai span di tengah kalimat Indonesia dan sekali sebagai paragraf utuh yang membawa lang dan dir miliknya sendiri. Aturan CSS pada kutipan hanya memperbesar hurufnya, dan tidak ada satu pun skrip di dalam berkas ini.

Kesalahan umum#

  • Menyimpan berkas dengan pengodean yang berbeda dari meta charset-nya. Karakter non-Latin tampil acak seketika, dan perbaikannya adalah menyimpan ulang berkas sebagai UTF-8 dari editor teks.
  • Menuliskan kode bahasa yang tidak sah pada lang, misalnya in untuk bahasa Indonesia. Kode yang benar adalah id, dan kode yang tidak sah membuat alat tidak dapat memilih aturan bahasanya.
  • Memasang dir="rtl" pada elemen yang isinya bukan aksara kanan ke kiri. Arah memengaruhi tata letak, sehingga penandaan yang salah membalik aliran konten yang seharusnya kiri ke kanan.

Ringkasan#

  • Atribut lang menyatakan bahasa halaman dan potongan bahasa lain, dengan kode BCP 47 seperti id dan ja.
  • Pembaca layar menyesuaikan pengucapannya berdasarkan lang, sehingga penandaan yang tepat memengaruhi aksesibilitas secara langsung.
  • Atribut dir menyatakan arah teks, dengan rtl untuk aksara kanan ke kiri dan pewarisan arah pada elemen di dalamnya.
  • UTF-8 menampung seluruh aksara, dan meta charset-nya wajib cocok dengan pengodean berkas yang disimpan.

Referensi#