Internasionalisasi

Web tersedia untuk semua orang di dunia—hal ini sudah tercantum dalam namanya. Artinya, situs Anda berpotensi tersedia bagi siapa saja yang memiliki akses ke internet, terlepas dari lokasi mereka, perangkat yang mereka gunakan, atau bahasa yang mereka kuasai.

Tujuan desain responsif adalah membuat konten Anda tersedia bagi semua orang. Menerapkan filosofi yang sama pada bahasa manusia adalah pendorong di balik internasionalisasi—mempersiapkan konten dan desain Anda untuk audiens internasional.

Properti logis

Bahasa Inggris ditulis dari kiri ke kanan dan dari atas ke bawah, tetapi tidak semua bahasa ditulis dengan cara ini. Beberapa bahasa seperti Arab dan Ibrani dibaca dari kanan ke kiri, dan beberapa huruf Jepang dibaca secara vertikal, bukan horizontal. Untuk mengakomodasi mode penulisan ini, properti logis diperkenalkan di CSS.

Jika Anda menulis CSS, Anda mungkin telah menggunakan kata kunci arah seperti "left", "right", "top", dan "bottom". Kata kunci tersebut merujuk pada tata letak fisik perangkat pengguna.

Di sisi lain, properti logis mengacu pada tepi kotak yang terkait dengan alur konten. Jika mode penulisan berubah, CSS yang ditulis dengan properti logis akan diperbarui sesuai dengan perubahan tersebut. Hal ini tidak berlaku untuk properti arah.

Meskipun properti terarah margin-left selalu merujuk pada margin di sisi kiri kotak konten, properti logis margin-inline-start merujuk pada margin di sisi kiri kotak konten dalam bahasa kiri-ke-kanan, dan margin di sisi kanan kotak konten dalam bahasa kanan-ke-kiri.

Agar desain Anda dapat beradaptasi dengan berbagai mode penulisan, hindari properti terarah. Gunakan properti logis sebagai gantinya.

Larangan
.byline {
  text-align: right;
}
Anjuran
.byline {
  text-align: end;
}

Jika CSS memiliki nilai arah tertentu seperti left atau right, ada properti logis yang sesuai. Jika dulu kita memiliki margin-left, sekarang kita juga memiliki margin-inline-start.

Dalam bahasa seperti bahasa Inggris yang teksnya mengalir dari kiri ke kanan, inline-start sesuai dengan "kiri" dan inline-end sesuai dengan "kanan".

Demikian pula, dalam bahasa seperti Inggris yang teksnya ditulis dari atas ke bawah, block-start sesuai dengan "atas" dan block-end sesuai dengan "bawah".

Bahasa Latin, Ibrani, dan Jepang ditampilkan saat merender teks placeholder dalam frame perangkat. Panah dan warna mengikuti teks untuk membantu mengaitkan 2 arah blok dan inline.

Jika Anda menggunakan properti logis di CSS, Anda dapat menggunakan stylesheet yang sama untuk terjemahan halaman Anda. Meskipun halaman Anda diterjemahkan ke dalam bahasa yang ditulis dari kanan ke kiri atau dari bawah ke atas, desain Anda akan disesuaikan dengan tepat. Anda tidak perlu membuat desain terpisah untuk setiap bahasa. Dengan menggunakan properti logis, desain Anda akan merespons setiap mode penulisan. Artinya, desain Anda dapat menjangkau lebih banyak orang tanpa Anda harus meluangkan waktu untuk membuat desain terpisah untuk setiap bahasa.

Teknik tata letak CSS modern seperti petak dan flexbox menggunakan properti logis secara default. Jika Anda berpikir dalam hal inline-start dan block-start, bukan left dan top, Anda akan lebih mudah memahami teknik modern ini.

Gunakan pola umum seperti ikon di samping beberapa teks atau label di samping kolom formulir. Daripada berpikir "label harus memiliki margin di sebelah kanan", pikirkan "label harus memiliki margin di akhir sumbu inline-nya".

Larangan
label {
  margin-right: 0.5em;
}
Anjuran
label {
  margin-inline-end: 0.5em;
}

Jika halaman tersebut diterjemahkan ke dalam bahasa kanan-ke-kiri, gaya tidak perlu diperbarui. Anda dapat meniru efek melihat halaman dalam bahasa kanan-ke-kiri dengan menggunakan atribut dir pada elemen html. Nilai ltr berarti "kiri ke kanan". Nilai "rtl" berarti "kanan ke kiri".

Jika Anda ingin bereksperimen dengan semua permutasi arah dokumen (sumbu blok) dan mode penulisan (sumbu inline), berikut demonstrasi interaktif.

Mengidentifikasi bahasa halaman

Sebaiknya identifikasi bahasa halaman Anda menggunakan atribut lang pada elemen html.

<html lang="en">

Contoh tersebut adalah untuk halaman dalam bahasa Inggris. Anda bisa lebih spesifik. Berikut cara menyatakan bahwa halaman menggunakan Bahasa Inggris AS:

<html lang="en-us">

Mendeklarasikan bahasa dokumen Anda berguna bagi mesin telusur. Hal ini juga berguna untuk teknologi pendukung seperti pembaca layar dan asisten suara. Dengan memberikan metadata bahasa, Anda membantu synthesizer ucapan semacam ini mengucapkan konten Anda dengan benar.

Atribut lang dapat diterapkan pada elemen HTML apa pun, bukan hanya html. Jika Anda mengganti bahasa di halaman web, tunjukkan perubahan tersebut. Dalam hal ini, satu kata dalam bahasa Jerman:

<p>I felt some <span lang="de">schadenfreude</span>.</p>

Mengidentifikasi bahasa dokumen tertaut

Ada atribut lain bernama hreflang yang dapat Anda gunakan pada link. hreflang menggunakan notasi kode bahasa yang sama dengan atribut lang dan menjelaskan bahasa dokumen tertaut. Jika ada terjemahan seluruh halaman Anda dalam bahasa Jerman, tautkan seperti ini:

<a href="/path/to/german/version" hreflang="de">German version</a>

Jika Anda menggunakan teks dalam bahasa Jerman untuk mendeskripsikan link ke versi bahasa Jerman, gunakan hreflang dan lang. Di sini, teks "Deutsche Version" ditandai sebagai berbahasa Jerman, dan link tujuan juga ditandai sebagai berbahasa Jerman:

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

Anda juga dapat menggunakan atribut hreflang pada elemen link. Kode ini ada di head dokumen Anda:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

Namun, tidak seperti atribut lang, yang dapat diterapkan pada elemen apa pun, hreflang hanya dapat diterapkan pada elemen a dan link.

Mempertimbangkan internasionalisasi dalam desain Anda

Saat Anda mendesain situs yang akan diterjemahkan ke dalam bahasa dan mode penulisan lain, pertimbangkan faktor-faktor berikut:

  • Beberapa bahasa, seperti Jerman, memiliki kata-kata panjang yang umum digunakan. Antarmuka Anda harus beradaptasi dengan kata-kata ini, jadi hindari mendesain kolom sempit. Anda juga dapat menggunakan CSS untuk memperkenalkan tanda hubung.
  • Pastikan nilai line-height Anda dapat mengakomodasi karakter seperti aksen dan diakritik lainnya. Baris teks yang terlihat baik dalam bahasa Inggris mungkin tumpang-tindih dalam bahasa lain.
  • Jika Anda menggunakan font web, pastikan font tersebut memiliki rentang karakter yang cukup luas untuk mencakup bahasa yang akan Anda terjemahkan.
  • Jangan membuat gambar yang berisi teks. Jika Anda melakukannya, Anda harus membuat gambar terpisah untuk setiap bahasa. Sebagai gantinya, pisahkan teks dan gambar, lalu gunakan CSS untuk menempatkan teks di atas gambar.

Berpikirlah secara internasional

Atribut seperti lang dan hreflang membuat HTML Anda lebih bermakna untuk internasionalisasi. Demikian pula, properti logis membuat CSS Anda lebih mudah disesuaikan.

Jika Anda terbiasa berpikir dalam hal top, bottom, left, dan right, mungkin sulit untuk mulai berpikir dalam hal block start, block end, inline start, dan inline end. Namun, hal ini sepadan. Properti logis adalah kunci untuk membuat tata letak yang benar-benar responsif.

Uji pemahaman Anda

Uji pengetahuan Anda tentang internasionalisasi.

Dalam bahasa Inggris, sisi right fisik sebuah kotak, secara logis adalah sisi yang mana?

block-start
Coba lagi. Dalam bahasa Inggris, ini adalah top
block-end
Coba lagi. Dalam bahasa Inggris, ini adalah bottom
inline-start
Coba lagi. Dalam bahasa Inggris, ini adalah left
inline-end
🎉

Atribut mana yang harus Anda tambahkan ke HTML agar lebih bermakna untuk internasionalisasi?

english
Coba lagi.
lang
🎉 Hal ini memberi sinyal kepada browser tentang bahasa yang digunakan dalam dokumen, yang membantu dalam menetapkan mode penulisan, arah dokumen, dan terjemahan.
language
Coba lagi.
i18n
Coba lagi.

Selanjutnya, Anda akan mempelajari cara menangani tata letak tingkat halaman, yang juga dikenal sebagai tata letak makro.

Sebelumnya
Kueri media
Berikutnya
Tata letak makro