Mode Tulisan CSS: Perjalanan Melalui Orientasi Teks

Hai, para pengembang web yang sedang belajar! Hari ini, kita akan mengemban sebuah petualangan menarik ke dunia Mode Tulisan CSS. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda melalui properti yang menarik ini yang bisa benar-benar memutar teks Anda! Jadi, pasang sabuk pengaman dan mari kita masuk ke dalam!

Apa Itu Mode Tulisan CSS?

Sebelum kita mulai mengoding, mari kita pahami apa itu mode tulisan. Bayangkan Anda membaca buku. Dalam Bahasa Inggris, biasanya kita membaca dari kiri ke kanan dan atas ke bawah. Tetapi apa bila Anda membaca buku Jepang tradisional? Teksnya berjalan vertikal dari atas ke bawah dan dari kanan ke kiri. Itu di mana properti writing-mode CSS berguna!

Properti writing-mode dalam CSS memungkinkan kita mengendalikan arah penampilan teks dan konten inline lainnya. Itu seperti memiliki tongkat sihir yang bisa membuat teks Anda menari di berbagai arah!

Nilai yang Mungkin

Bergambarlah kita lihat nilai yang berbeda yang kita bisa gunakan dengan properti writing-mode:

Nilai	Deskripsi
horizontal-tb	Teks mengalir secara horizontal dari kiri ke kanan, atas ke bawah
vertical-rl	Teks mengalir vertikal dari atas ke bawah, kanan ke kiri
vertical-lr	Teks mengalir vertikal dari atas ke bawah, kiri ke kanan
sideways-rl	Teks mengalir vertikal dari atas ke bawah, semua karakter dirotasi 90° searah jarum jam
sideways-lr	Teks mengalir vertikal dari atas ke bawah, semua karakter dirotasi 90° melawan jarum jam

Terapkan Pada

Properti writing-mode dapat diterapkan pada semua elemen, termasuk pseudo-elemen ::first-letter dan ::first-line. Itu seperti remote universal untuk arah teks!

Sintaks DOM

Sekarang, mari kita lihat bagaimana kita bisa menggunakan writing-mode dalam CSS kita:

elemen {
writing-mode: nilai;
}

Simple, kan? Mari kita masuk ke setiap nilai dan lihat mereka dalam aksi!

CSS writing-mode -Nilai horizontal-tb

Ini adalah mode tulisan default untuk sebagian besar bahasa, termasuk Bahasa Inggris. Mari kita lihat contoh:

<div class="horizontal-tb">
<p>Teks ini horizontal dari kiri ke kanan, atas ke bawah.</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

Ini akan menampilkan teks seperti yang Anda baca saat ini. Tidak ada hal menarik, tapi ini adalah titik awal kami!

CSS writing-mode -Nilai vertical-rl

Sekarang, mari kita balikkan halangan:

<div class="vertical-rl">
<p>Teks ini vertikal, kanan ke kiri!</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

Voila! Teks Anda sekarang berjalan vertikal dari atas ke bawah, dan baris ganda akan dimulai dari kanan dan bergerak ke kiri. Itu seperti membaca gulungan Jepang atau Cina tradisional!

CSS writing-mode -Nilai vertical-lr

Mari kita mencoba mode vertikal kiri ke kanan:

<div class="vertical-lr">
<p>Teks ini vertikal, kiri ke kanan!</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

Sekarang teks Anda vertikal, tapi dimulai dari sisi kiri. Itu seperti membaca naskah Mongolia!

CSS writing-mode -Nilai sideways-rl

Siap untuk beberapa akrobatik? Mari kita mencoba sideways-rl:

<div class="sideways-rl">
<p>Teks ini berjejer, kanan ke kiri!</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

Ini memutar setiap karakter 90° searah jarum jam. Itu seperti teks Anda melakukan loncatan!

CSS writing-mode -Nilai sideways-lr

Dan sekarang untuk flip terakhir:

<div class="sideways-lr">
<p>Teks ini berjejer, kiri ke kanan!</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

Pada saat ini, setiap karakter dirotasi 90° melawan jarum jam. Itu seperti teks Anda melakukan loncatan balik!

CSS writing-mode - Penggunaan Estetik (Bahasa Inggris)

Meskipun mode tulisan yang berbeda ini sangat penting untuk mendukung berbagai bahasa, mereka juga bisa digunakan secara kreatif dalam Bahasa Inggris. Ini adalah contoh menarik:

<div class="book-spine">
<h2>The CSS Adventure</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

Ini menciptakan teks vertikal yang terlihat seperti punggung buku di rak. Keren, kan?

CSS writing-mode - Properti Terkait

Untuk mengendalikan sepenuhnya orientasi teks, Anda mungkin ingin menggunakan properti ini bersamaan dengan writing-mode:

Properti	Deskripsi
text-orientation	Menentukan orientasi karakter teks
direction	Menetapkan arah teks, elemen inline, dan kolom tabel
unicode-bidi	Menimpa algoritma bidirectional untuk teks

Ini adalah contoh cepat:

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

Ini memungkinkan teks vertikal di mana beberapa karakter (seperti huruf Latin) dirotasi, sedangkan yang lain (seperti karakter Cina) tetap tegak lurus.

Dan itu saja, teman-teman! Kita telah menjelajahi dunia menarik Mode Tulisan CSS. Ingat, web adalah platform global, dan properti ini membantu membuatnya dapat diakses dan indah bagi semua orang, tanpa mengira bahasa atau skrip mereka.

Berikutnya kali Anda membuat website, mengapa tidak mencoba memainkan properti ini? Anda mungkin akan menciptakan sesuatu yang menarik dan tak terduga! Semangat coding, dan mayatext Anda selalu mengalir ke arah yang benar!

Credits: Image by storyset