17 Agustus 2025Bahasa Indonesia

Panduan komprehensif tentang CSS writing-mode, menjelajahi cara mengontrol arah teks untuk internasionalisasi (i18n) dan membuat situs web yang menarik secara visual dan dapat diakses secara global.

CSS Writing Mode: Menguasai Arah Teks Internasional untuk Situs Web Global

Di dunia yang saling terhubung saat ini, situs web harus melayani audiens yang beragam, dan aspek penting dari itu adalah menangani arah teks yang berbeda. CSS writing-mode adalah alat yang ampuh yang memungkinkan pengembang untuk mengontrol arah aliran teks, memungkinkan mereka untuk menciptakan pengalaman web yang benar-benar terinternasionalisasi (i18n) dan menarik secara visual. Panduan komprehensif ini akan menjelajahi seluk-beluk writing-mode, memberikan contoh praktis dan wawasan yang dapat ditindaklanjuti untuk membantu Anda menguasai arah teks untuk situs web global.

Memahami Mode Penulisan (Writing Modes)

Properti CSS writing-mode menentukan apakah baris teks ditata secara horizontal atau vertikal dan arah di mana blok-blok berlanjut. Ini memainkan peran penting dalam mengadaptasi halaman web untuk bahasa yang menggunakan arah penulisan yang berbeda, seperti:

Kiri-ke-kanan (LTR): Bahasa Inggris, Spanyol, Prancis, Jerman, dan banyak bahasa Barat lainnya.
Kanan-ke-kiri (RTL): Bahasa Arab, Ibrani, Persia, dan Urdu.
Vertikal: Bahasa Tionghoa Tradisional, Jepang, dan Mongolia.

Secara default, browser web menggunakan mode penulisan horizontal-tb, yang menata teks secara horizontal dari atas ke bawah. Namun, writing-mode memungkinkan Anda untuk mengubah perilaku default ini dan membuat tata letak yang mengakomodasi arah teks yang berbeda.

Nilai-nilai Properti `writing-mode`

Properti writing-mode menerima beberapa nilai, masing-masing menentukan arah teks dan alur blok yang berbeda:

horizontal-tb: Horizontal dari atas ke bawah. Baris teks bersifat horizontal dan mengalir dari atas ke bawah. Ini adalah nilai default.
vertical-rl: Vertikal dari kanan ke kiri. Baris teks bersifat vertikal dan mengalir dari kanan ke kiri. Blok berlanjut ke bawah.
vertical-lr: Vertikal dari kiri ke kanan. Baris teks bersifat vertikal dan mengalir dari kiri ke kanan. Blok berlanjut ke bawah.
sideways-rl: Alias usang untuk vertical-rl.
sideways-lr: Alias usang untuk vertical-lr.

Nilai-nilai berikut juga tersedia tetapi lebih jarang digunakan:

block-flow: Gunakan arah dari konteks pemformatan blok, yang dapat dipengaruhi oleh properti lain.

Contoh Dasar

Mari kita ilustrasikan penggunaan writing-mode dengan beberapa contoh sederhana:

Teks Horizontal (Default)

Ini adalah perilaku default, jadi tidak diperlukan writing-mode secara eksplisit:


<p>Ini adalah teks horizontal.</p>

Teks Vertikal (Kanan-ke-Kiri)

Untuk menampilkan teks secara vertikal dari kanan ke kiri, gunakan vertical-rl:


<p style="writing-mode: vertical-rl;">Ini adalah teks vertikal (kanan-ke-kiri).</p>

Teks Vertikal (Kiri-ke-Kanan)

Untuk menampilkan teks secara vertikal dari kiri ke kanan, gunakan vertical-lr:


<p style="writing-mode: vertical-lr;">Ini adalah teks vertikal (kiri-ke-kanan).</p>

Aplikasi Praktis dari `writing-mode`

Selain arah teks dasar, writing-mode menawarkan berbagai aplikasi praktis untuk membuat situs web yang menarik secara visual dan dapat diakses secara internasional:

1. Beradaptasi dengan Bahasa RTL

Untuk situs web yang mendukung bahasa RTL seperti Arab atau Ibrani, writing-mode sangat penting untuk menampilkan teks dengan benar. Anda dapat menggunakan selektor CSS untuk menerapkan writing-mode: rtl; ke elemen tertentu atau seluruh dokumen berdasarkan atribut bahasa:


<html lang="ar">
  <body>
    <p>هذا نص عربي.</p>
  </body>
</html>


html[lang="ar"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Meskipun direction: rtl; sangat penting untuk mengatur arah dasar, Anda mungkin juga memerlukan unicode-bidi: bidi-override; untuk memastikan penanganan yang benar dari teks dengan arah campuran. Pendekatan modern sering kali lebih memilih properti logis, yang akan dibahas nanti.

2. Membuat Menu Navigasi Vertikal

writing-mode dapat digunakan untuk membuat menu navigasi vertikal, yang sering terlihat di situs web Jepang dan Tiongkok. Ini dapat menambahkan sentuhan visual yang unik ke situs Anda:


<ul class="vertical-menu">
  <li><a href="#">Beranda</a></li>
  <li><a href="#">Tentang</a></li>
  <li><a href="#">Layanan</a></li>
  <li><a href="#">Kontak</a></li>
</ul>


.vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Dalam contoh ini, text-orientation: upright; digunakan untuk memastikan bahwa teks di dalam item menu vertikal ditampilkan tegak lurus, bukan diputar.

3. Merancang Tata Letak Gaya Majalah

writing-mode dapat digabungkan untuk mencapai tata letak gaya majalah. Misalnya, Anda mungkin memiliki gambar besar dengan teks vertikal yang menimpanya untuk menciptakan efek visual yang mencolok.


<div class="magazine-section">
  <img src="image.jpg" alt="Magazine Image">
  <div class="vertical-text">Wawancara Eksklusif</div>
</div>


.magazine-section {
  position: relative;
  width: 500px;
  height: 300px;
}

.magazine-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vertical-text {
  position: absolute;
  top: 0;
  right: 10px;
  color: white;
  font-size: 2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform-origin: top right;
  transform: rotate(180deg); /* Diperlukan untuk render yang benar di seluruh browser */
}

Properti transform: rotate(180deg); sering kali diperlukan untuk memastikan rendering yang konsisten di berbagai browser, terutama versi yang lebih lama.

4. Meningkatkan Visualisasi Data

Dalam visualisasi data, writing-mode dapat berguna untuk memberi label pada sumbu dalam bagan dan grafik, terutama ketika ruang terbatas. Misalnya, Anda mungkin memutar label pada sumbu vertikal untuk mencegahnya tumpang tindih.

Teknik Lanjutan dan Pertimbangan

Untuk memanfaatkan sepenuhnya kekuatan writing-mode, pertimbangkan teknik lanjutan dan faktor-faktor penting berikut:

1. Properti dan Nilai Logis

CSS modern memperkenalkan properti dan nilai logis, yang menyediakan cara yang lebih fleksibel dan semantik untuk menangani tata letak dan arah. Alih-alih properti fisik seperti left dan right, properti logis seperti start dan end digunakan, yang beradaptasi dengan arah penulisan. Sebagai contoh:

margin-inline-start: Setara dengan margin-left di LTR dan margin-right di RTL.
padding-block-start: Setara dengan padding-top dalam mode penulisan horizontal dan padding-left atau padding-right dalam mode penulisan vertikal.

Menggunakan properti logis membuat CSS Anda lebih mudah beradaptasi dan dipelihara, terutama saat berhadapan dengan beberapa arah penulisan.

2. Menggabungkan `writing-mode` dengan Properti CSS Lainnya

writing-mode berinteraksi dengan properti CSS lainnya, seperti text-orientation, direction, dan unicode-bidi, untuk mengontrol penampilan dan perilaku teks. Memahami interaksi ini sangat penting untuk mencapai hasil yang diinginkan.

text-orientation: Menentukan orientasi karakter dalam mode penulisan vertikal. Nilainya termasuk upright, sideways, mixed, dan use-glyph-orientation.
direction: Menentukan arah dasar teks (LTR atau RTL).
unicode-bidi: Mengontrol bagaimana algoritma dua arah Unicode diterapkan pada elemen.

3. Menangani Teks dengan Arah Campuran

Saat menangani teks yang berisi karakter LTR dan RTL (misalnya, teks bahasa Inggris dalam paragraf bahasa Arab), penting untuk menggunakan properti unicode-bidi untuk memastikan rendering yang benar. Nilai bidi-override sering digunakan untuk memaksakan arah tertentu.


<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">seperti contoh ini.</span></p>

4. Pertimbangan Font

Tidak semua font cocok untuk penulisan vertikal. Beberapa font mungkin tidak mengandung glif untuk penulisan vertikal atau mungkin tidak dirender dengan benar. Saat menggunakan mode penulisan vertikal, pilihlah font yang dirancang khusus untuk teks vertikal atau yang memiliki dukungan baik untuk glif vertikal.

Font dari negara-negara Asia Timur (Tiongkok, Jepang, Korea) umumnya memiliki dukungan yang sangat baik untuk penulisan vertikal.

5. Aksesibilitas

Pastikan penggunaan writing-mode Anda tidak berdampak negatif pada aksesibilitas. Sediakan teks alternatif untuk gambar dan konten non-teks lainnya, dan pastikan teks tersebut dapat dibaca dan dipahami oleh pengguna dengan disabilitas. Gunakan elemen HTML semantik dan atribut ARIA untuk meningkatkan aksesibilitas.

6. Kompatibilitas Browser

writing-mode memiliki dukungan yang baik di browser modern, tetapi browser yang lebih lama mungkin memerlukan awalan vendor (misalnya, -webkit-writing-mode, -ms-writing-mode). Gunakan preprocessor CSS seperti Sass atau Less untuk mengotomatiskan penambahan awalan vendor atau gunakan alat seperti Autoprefixer.

Praktik Terbaik Menggunakan `writing-mode`

Untuk menggunakan writing-mode secara efektif dan membuat situs web yang dapat diakses secara global, ikuti praktik terbaik berikut:

Gunakan properti dan nilai logis kapan pun memungkinkan. Ini akan membuat CSS Anda lebih mudah beradaptasi dan dipelihara.
Pilih font yang sesuai untuk mode penulisan vertikal. Uji font Anda untuk memastikan bahwa font tersebut dirender dengan benar dalam teks vertikal.
Pertimbangkan aksesibilitas. Pastikan penggunaan writing-mode Anda tidak berdampak negatif pada aksesibilitas bagi pengguna dengan disabilitas.
Uji tata letak Anda di berbagai browser dan perangkat. Pastikan tata letak Anda dirender dengan benar di berbagai platform.
Gunakan preprocessor CSS atau Autoprefixer untuk menangani awalan vendor. Ini akan menghemat waktu dan tenaga Anda serta memastikan bahwa CSS Anda kompatibel dengan browser yang lebih lama.
Pisahkan konten dari presentasi. Gunakan CSS untuk mengontrol presentasi konten Anda dan hindari penggunaan HTML untuk tujuan penataan gaya.

Contoh Situs Web Global yang Menggunakan `writing-mode`

Banyak situs web di seluruh dunia memanfaatkan writing-mode untuk berbagai tujuan, mulai dari beradaptasi dengan bahasa RTL hingga membuat tata letak yang unik secara visual. Berikut adalah beberapa contohnya:

Situs Web Berita dalam Bahasa Arab atau Ibrani: Situs-situs ini menggunakan direction: rtl dan penyesuaian writing-mode potensial untuk tampilan teks yang benar.
Situs Web Seni dan Budaya Jepang dan Tiongkok: Sering kali menggabungkan penulisan vertikal untuk judul, menu, dan elemen dekoratif.
Majalah Mode: Sering menggunakan teks vertikal dalam tata letak visual untuk efek gaya.

Kesimpulan

CSS writing-mode adalah alat yang ampuh untuk membuat situs web yang terinternasionalisasi dan menarik secara visual. Dengan memahami berbagai nilai properti dan bagaimana properti tersebut berinteraksi dengan properti CSS lainnya, Anda dapat membuat tata letak yang beradaptasi dengan arah teks yang berbeda dan meningkatkan pengalaman pengguna untuk audiens global. Ingatlah untuk mempertimbangkan aksesibilitas, kompatibilitas browser, dan pemilihan font untuk memastikan bahwa situs web Anda dapat diakses dan menarik secara visual bagi semua pengguna.

Seiring perkembangan pengembangan web yang terus berlanjut, menguasai teknik seperti writing-mode menjadi semakin penting untuk menciptakan pengalaman online yang benar-benar global dan inklusif. Manfaatkan kekuatan internasionalisasi dan buat situs web yang beresonansi dengan pengguna dari seluruh penjuru dunia.