CSS - Properti unicode-bidi: Menungkai Teks Birectional
Hai teman-teman, pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia CSS dan menjelajahi properti yang mungkin terdengar menakutkan pada awalnya: unicode-bidi. Tetapi jangan khawatir, pada akhir tutorial ini, Anda akan menangani teks birectional seperti seorang profesional!
Apa Itu Unicode-bidi?
Sebelum kita masuk ke detailnya, mari pahami apa unicode-bidi itu sebenarnya. Bayangkan Anda menulis situs web multibahasa yang termasuk bahasa Inggris (kiri-ke-kanan) dan Arab (kanan-ke-kiri). Bagaimana Anda memastikan bahwa setiap bahasa ditampilkan dengan benar? Itu tempat unicode-bidi datang untuk membantu!
Properti unicode-bidi adalah teman setia Anda saat berurusan dengan teks birectional dalam CSS. Itu membantu Anda mengatur bagaimana teks birectional ditangani dalam dokumen, memastikan bahwa konten Anda ditampilkan dengan benar tanpa menghiraukan arah tulisan.
Nilai yang Mungkin
Marilah kita lihat nilai yang mungkin untuk properti unicode-bidi:
| Nilai | Deskripsi |
|---|---|
| normal | Elemen tidak membuka level penembusan tambahan |
| embed | Membuka level penembusan tambahan |
| bidi-override | Membuat pengecualian untuk algoritma birectional |
| isolate | Elemen dipisahkan dari saudaranya |
| isolate-override | Menggabungkan efek 'isolate' dan 'bidi-override' |
| plaintext | Elemen dipisahkan dan pemformatan birectional direset |
Jangan khawatir jika ini tampak membingungkan saat ini. Kita akan menjelajahi setiap nilai ini secara detil dengan contoh!
Terapkan ke
Properti unicode-bidi dapat diterapkan ke semua elemen. Namun, itu paling banyak digunakan dengan elemen inline atau elemen yang telah diatur ke display: inline.
Sintaks DOM
Untuk menggunakan unicode-bidi dalam JavaScript Anda, Anda dapat menggunakan sintaks berikut:
object.style.unicodeBidi = "value"Sekarang, mari kita masuk ke setiap nilai dan lihat bagaimana mereka bekerja dalam aksi!
CSS unicode-bidi - Nilai normal
Nilai normal adalah pengaturan default. Itu tidak membuka level penembusan tambahan terhadap algoritma birectional.
<p style="unicode-bidi: normal;">
This is English text. هذا نص عربي.
</p>Dalam contoh ini, teks akan ditampilkan sebagai:
This is English text. هذا نص عربي.
Teks Inggris adalah kiri-ke-kanan, sedangkan teks Arab adalah kanan-ke-kiri, mengikuti arah alaminya.
CSS unicode-bidi - Nilai embed
Nilai embed membuka level penembusan tambahan terhadap algoritma birectional.
<p style="unicode-bidi: embed; direction: rtl;">
This is English text. هذا نص عربي.
</p>Ini akan ditampilkan sebagai:
.هذا نص عربي This is English text.
Di sini, keseluruhan paragraf dianggap kanan-ke-kiri, tetapi teks Inggris mempertahankan arah kiri-ke-kanan dalam konteks RTL keseluruhan.
CSS unicode-bidi - Nilai bidi-override
Nilai bidi-override membuat pengecualian untuk algoritma birectional. Itu memaksa arah teks untuk cocok dengan properti direction.
<p style="unicode-bidi: bidi-override; direction: rtl;">
This is English text. هذا نص عربي.
</p>Ini akan ditampilkan sebagai:
.يبرع صن اذه .txet hsilgnE si sihT
Dalam kasus ini, semua teks dianggap sepenuhnya kanan-ke-kiri, bahkan membalik urutan karakter dalam teks Inggris.
CSS unicode-bidi - Nilai isolate
Nilai isolate memisahkan elemen dari saudaranya dalam hal pemformatan birectional.
<p>This is <span style="unicode-bidi: isolate; direction: rtl;">هذا نص عربي</span> some English text.</p>Ini akan ditampilkan sebagai:
This is هذا نص عربي some English text.
Teks Arab dipisahkan dan ditampilkan kanan-ke-kiri, sedangkan teks Inggris sekitarnya tetap tak terpengaruh.
CSS unicode-bidi - Nilai isolate-override
Nilai isolate-override menggabungkan efek 'isolate' dan 'bidi-override'.
<p>This is <span style="unicode-bidi: isolate-override; direction: rtl;">English text</span> in a sentence.</p>Ini akan ditampilkan sebagai:
This is txet hsilgnE in a sentence.
Teks dalam span dipisahkan dan sepenuhnya dibalik.
CSS unicode-bidi - Nilai plaintext
Nilai plaintext memisahkan elemen dan mengreset pemformatan birectional ke arah implisitnya.
<p style="direction: rtl;">
This is <span style="unicode-bidi: plaintext;">some English text</span> بعض النص العربي
</p>Ini akan ditampilkan sebagai:
بعض النص العربي some English text This is
Teks Inggris dalam span ditampilkan dalam arah alaminya kiri-ke-kanan, tanpa menghiraukan arah kanan-ke-kiri dari induknya.
CSS unicode-bidi - Properti Terkait
Saat bekerja dengan unicode-bidi, Anda sering kali akan menemukan properti terkait ini:
| Properti | Deskripsi |
|---|---|
| direction | Mengatur arah teks |
| writing-mode | Menentukan apakah baris teks diletakkan secara horizontal atau vertikal |
Ingat, properti unicode-bidi bekerja bersamaan dengan properti direction untuk mengatur aliran teks birectional.
Kesimpulan
Selamat! Anda baru saja masuk ke dunia unicode-bidi. Properti ini mungkin tampak kompleks pada awalnya, tetapi itu adalah alat yang sangat berharga saat bekerja dengan situs web multibahasa. Ingat, latihan membuat sempurna, jadi jangan ragu untuk mencoba nilai yang berbeda dan lihat bagaimana mereka mempengaruhi teks Anda.
Saat Anda terus melanjutkan perjalanan Anda dalam pengembangan web, Anda akan menghadapi banyak situasi di mana pemahaman teks birectional sangat penting. Apakah Anda membuat situs web untuk audiensi global atau bekerja pada proyek lokalisasi, keterampilan yang Anda pelajari hari ini akan sangat membantu Anda.
Terus coding, terus belajar, dan terutama, bersenang-senang! Dunia pengembangan web penuh dengan tantangan menarik, dan menguasai properti seperti unicode-bidi hanya awal perjalanan Anda. Selamat coding!
Credits: Image by storyset