CSS - Sifat Unicode-bidi: Menjawar Teks Beraarah
Hai sana, para 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 beraarah seperti seorang ahli!
Apa Itu Unicode-bidi?
Sebelum kita masuk ke rincian, mari pahami apa yang dimaksudkan oleh unicode-bidi. Bayangkan Anda menulis situs multibahasa yang mencakup bahasa Inggris (kiri-ke-kanan) dan Arab (kanan-ke-kiri). Bagaimana Anda memastikan bahwa setiap bahasa ditampilkan dengan benar? Itu adalah tempat unicode-bidi datang ke pertolongan!
Properti unicode-bidi adalah teman setia Anda saat berurusan dengan teks beraarah dalam CSS. Itu membantu Anda mengatur bagaimana teks beraarah ditangani dalam dokumen, memastikan bahwa konten Anda ditampilkan dengan benar tanpa menghiraukan arah tulisan.
Nilai Yang Mungkin
Mari kita lihat nilai yang mungkin untuk properti unicode-bidi:
| Nilai | Deskripsi |
|---|---|
| normal | Elemen tidak membuka tingkat penembusan tambahan |
| embed | Membuka tingkat penembusan tambahan |
| bidi-override | Membuat penyesuaian untuk algoritma beraarah |
| isolate | Elemen dipisahkan dari saudaranya |
| isolate-override | Menggabungkan efek isolate dan bidi-override
|
| plaintext | Elemen dipisahkan dan pemformatan beraarah direset |
Jangan khawatir jika ini masih membingungkan saat ini. Kita akan menjelajahi masing-masing dari mereka dengan contoh!
Terapkan Pada
Properti unicode-bidi dapat diterapkan ke semua elemen. Namun, itu paling sering 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 tindakan!
CSS unicode-bidi - Nilai normal
Nilai normal adalah pengaturan default. Itu tidak membuka tingkat penembusan tambahan terhadap algoritma beraarah.
<p style="unicode-bidi: normal;">
Ini adalah teks Inggris. هذا نص عربي.
</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 tingkat penembusan tambahan terhadap algoritma beraarah.
<p style="unicode-bidi: embed; direction: rtl;">
This is English text. هذا نص عربي.
</p>Ini akan ditampilkan sebagai:
.هذا نص عربي This is English text.
Di sini, seluruh paragraf dianggap kanan-ke-kiri, tetapi teks Inggris menjaga arah kiri-ke-kanan dalam konteks RTL secara keseluruhan.
CSS unicode-bidi - Nilai bidi-override
Nilai bidi-override membuat penyesuaian untuk algoritma beraarah. Itu memaksa arah teks untuk mencocokkan 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 beraarah.
<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 tidak 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 beraarah 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 parent.
CSS unicode-bidi - Properti Terkait
Saat bekerja dengan unicode-bidi, Anda sering akan menemukan properti ini yang terkait:
| Properti | Deskripsi |
|---|---|
| direction | Menyetel arah teks |
| writing-mode | Menentukan apakah baris teks diletakkan secara horizontal atau vertikal |
Ingat, properti unicode-bidi bekerja bersama dengan properti direction untuk mengontrol aliran teks beraarah.
Kesimpulan
Selamat! Anda baru saja masuk ke dunia unicode-bidi. Properti ini mungkin terlihat kompleks pada awalnya, tetapi itu adalah alat yang sangat berharga saat bekerja dengan situs 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 menemui banyak situasi di mana pemahaman teks beraarah sangat penting. Apakah Anda membuat situs untuk audiens global atau bekerja pada proyek pelokalan, keterampilan yang Anda pelajari hari ini akan 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