World Wide Web tersedia untuk semua orang di seluruh dunia—ada di sana atas namanya! Artinya, situs Anda berpotensi tersedia bagi siapa saja yang memiliki akses ke internet, terlepas dari lokasi, perangkat, atau bahasa yang digunakan.
Tujuan desain responsif adalah untuk membuat konten Anda tersedia untuk semua orang. Menerapkan filosofi yang sama ke bahasa manusia adalah kekuatan pendorong di balik internasionalisasi—menyiapkan konten dan desain Anda untuk audiens internasional.
Sifat logika
Bahasa Inggris ditulis dari kiri ke kanan dan atas ke bawah, tetapi tidak semua bahasa ditulis dengan cara ini. Beberapa bahasa seperti Arab dan Ibrani membaca dari kanan ke kiri, dan beberapa jenis 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 terarah seperti "left", "right", "top", dan "bottom". Kata kunci tersebut mengacu pada tata letak fisik perangkat pengguna.
Di sisi lain, properti logis mengacu pada tepi kotak karena berkaitan dengan aliran konten. Jika mode penulisan berubah, CSS yang ditulis dengan properti logis akan diperbarui sebagaimana mestinya. Hal itu tidak terjadi dengan properti arah.
Sementara properti arah margin-left selalu mengacu pada margin di sisi kiri kotak konten,
properti logis margin-inline-start mengacu pada margin di sisi kiri kotak konten dalam bahasa yang ditulis dari kiri ke kanan,
dan margin di sisi kanan kotak konten dalam bahasa yang ditulis dari kanan ke kiri.
Agar desain Anda dapat beradaptasi dengan mode penulisan yang berbeda, hindari properti arah. Sebagai gantinya, gunakan properti logis.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
Jika CSS memiliki nilai arah tertentu seperti left atau right,
ada properti logika yang sesuai. Yang sebelumnya kita memiliki margin-left, sekarang kita juga memiliki margin-inline-start.
Dalam bahasa seperti bahasa Inggris, dengan teks mengalir dari kiri ke kanan,
inline-start berarti "kiri" dan inline-end sesuai dengan "kanan".
Demikian pula, dalam bahasa seperti bahasa Inggris, yang teksnya ditulis dari atas ke bawah,
block-start sesuai dengan "top" dan block-end terkait dengan "bottom".
Jika menggunakan properti logis di CSS, Anda dapat menggunakan stylesheet yang sama untuk terjemahan halaman. Bahkan jika laman Anda diterjemahkan ke dalam bahasa yang ditulis dari kanan ke kiri atau bawah ke atas, desain Anda akan menyesuaikan. Anda tidak perlu membuat desain terpisah untuk setiap bahasa. Dengan menggunakan properti logis, desain Anda akan merespons setiap mode penulisan. Itu berarti desain Anda bisa menjangkau lebih banyak orang tanpa Anda harus menghabiskan waktu untuk membuat desain terpisah untuk setiap bahasa.
Teknik tata letak CSS modern seperti grid 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.
Buat pola umum seperti ikon di samping teks atau label di samping kolom formulir. Daripada berpikir "label harus memiliki margin di sebelah kanan", pikirkan "label harus memiliki margin di ujung sumbunya yang sejajar".
label {
margin-right: 0.5em;
}
label {
margin-inline-end: 0.5em;
}
Jika halaman tersebut diterjemahkan ke dalam bahasa yang ditulis dari kanan ke kiri,
gaya tidak perlu diperbarui.
Anda dapat meniru efek melihat halaman dalam bahasa yang ditulis dari 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 sejajar), berikut demonstrasi interaktif.
Identifikasi 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 lagi. Berikut cara menyatakan bahwa halaman menggunakan bahasa Inggris AS:
<html lang="en-us">
Mendeklarasikan bahasa dokumen Anda berguna untuk mesin telusur. Hal ini juga berguna untuk teknologi alat bantu seperti pembaca layar dan asisten suara. Dengan memberikan metadata bahasa, Anda membantu penyintesis ucapan semacam ini mengucapkan konten Anda dengan benar.
Atribut lang dapat berada di 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 yang ditautkan
Ada atribut lain bernama hreflang yang dapat Anda gunakan pada link.
hreflang menggunakan notasi kode bahasa yang sama dengan atribut lang dan mendeskripsikan bahasa dokumen yang tertaut.
Jika terjemahan seluruh halaman Anda tersedia dalam bahasa Jerman, tautkan ke sana 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 Jerman, gunakan hreflang dan lang.
Di sini, teks "Versi Deutsche" ditandai sebagai dalam bahasa Jerman, dan tautan tujuan juga ditandai sebagai dalam bahasa Jerman:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
Anda juga dapat menggunakan atribut hreflang pada elemen link. Ini berlaku di head dokumen Anda:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
Namun, tidak seperti atribut lang, yang dapat berada di elemen apa pun, hreflang hanya dapat diterapkan ke elemen a dan link.
Pertimbangkan internasionalisasi dalam desain Anda
Saat Anda merancang {i>website<i} yang akan diterjemahkan ke dalam bahasa lain dan mode penulisan, pertimbangkan faktor-faktor berikut:
- Beberapa bahasa, seperti bahasa Jerman, memiliki penggunaan kata-kata yang panjang. Antarmuka Anda perlu beradaptasi dengan kata-kata ini, jadi hindari mendesain kolom yang sempit. Anda juga dapat menggunakan CSS untuk memperkenalkan tanda hubung.
- Pastikan nilai
line-heightAnda dapat mengakomodasi karakter seperti aksen dan diakritik lainnya. Baris teks yang terlihat baik-baik saja 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 diterjemahkan.
- Jangan membuat gambar yang berisi teks. Jika demikian, Anda harus membuat gambar terpisah untuk setiap bahasa. Sebagai gantinya, pisahkan teks dan gambar, dan gunakan CSS untuk menempatkan teks pada gambar.
Berpikirlah secara internasional
Atribut seperti lang dan hreflang membuat HTML Anda lebih bermakna untuk internasionalisasi.
Demikian juga, properti logis membuat CSS Anda lebih mudah disesuaikan.
Jika Anda terbiasa memikirkan top, bottom, left, dan right,
mungkin sulit untuk mulai memikirkan block start, block end, inline start, dan inline end.
Tapi itu sepadan. Properti logis adalah kunci untuk membuat tata letak yang benar-benar responsif.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang internasionalisasi.
Dalam bahasa Inggris, sisi right fisik sebuah kotak, secara logis sisi mana?
block-starttopblock-endbottominline-startleftinline-endAtribut mana yang harus Anda tambahkan ke HTML agar lebih bermakna untuk internasionalisasi?
englishlanglanguagei18nBerikutnya, Anda akan mempelajari cara menerapkan tata letak tingkat halaman, yang juga dikenal sebagai tata letak makro.