CSS Writing Mode: A Journey Through Text Orientation

Hello, aspiring web developers! Today, we're going to embark on an exciting adventure into the world of CSS Writing Mode. As your friendly neighborhood computer teacher, I'm here to guide you through this fascinating property that can quite literally turn your text on its head! So, buckle up and let's dive in!

What is CSS Writing Mode?

Before we start coding, let's understand what writing mode is all about. Imagine you're reading a book. In English, we typically read from left to right and top to bottom. But what if you're reading a traditional Japanese book? The text runs vertically from top to bottom and right to left. That's where CSS writing-mode comes in handy!

The writing-mode property in CSS allows us to control the direction in which we display text and other inline content. It's like having a magic wand that can make your text dance in different directions!

Possible Values

Let's take a look at the different values we can use with the writing-mode property:

Value	Description
horizontal-tb	Text flows horizontally from left to right, top to bottom
vertical-rl	Text flows vertically from top to bottom, right to left
vertical-lr	Text flows vertically from top to bottom, left to right
sideways-rl	Text flows vertically from top to bottom, all characters rotated 90° clockwise
sideways-lr	Text flows vertically from top to bottom, all characters rotated 90° counter-clockwise

Applies to

The writing-mode property can be applied to all elements, including ::first-letter and ::first-line pseudo-elements. It's like a universal remote control for text direction!

DOM Syntax

Now, let's see how we can use writing-mode in our CSS:

element {
writing-mode: value;
}

Simple, right? Let's dive into each value and see them in action!

CSS writing-mode - horizontal-tb Value

This is the default writing mode for most languages, including English. Let's see an example:

<div class="horizontal-tb">
<p>This is horizontal text from left to right, top to bottom.</p>
</div>

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

This will display the text just as you're reading this article now. Nothing fancy, but it's our starting point!

CSS writing-mode - vertical-rl Value

Now, let's flip things around:

<div class="vertical-rl">
<p>This text is vertical, right to left!</p>
</div>

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

Voila! Your text is now running vertically from top to bottom, and multiple lines will start from the right and move left. It's like reading a traditional Japanese or Chinese scroll!

CSS writing-mode - vertical-lr Value

Let's try the left-to-right vertical mode:

<div class="vertical-lr">
<p>This text is vertical, left to right!</p>
</div>

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

Now your text is vertical, but it starts from the left side. It's like reading a Mongolian script!

CSS writing-mode - sideways-rl Value

Ready for some acrobatics? Let's try sideways-rl:

<div class="sideways-rl">
<p>This text is sideways, right to left!</p>
</div>

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

This rotates each character 90° clockwise. It's like your text is doing a cartwheel!

CSS writing-mode - sideways-lr Value

And now for the final flip:

<div class="sideways-lr">
<p>This text is sideways, left to right!</p>
</div>

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

This time, each character is rotated 90° counter-clockwise. It's like your text is doing a back-flip!

CSS writing-mode - Aesthetic Use (English Language)

While these different writing modes are crucial for supporting various languages, they can also be used creatively in English. Here's a fun example:

<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;
}

This creates a vertical text that looks like the spine of a book on a shelf. Cool, right?

CSS writing-mode - Related Properties

To fully control text orientation, you might want to use these properties alongside writing-mode:

Property	Description
text-orientation	Defines the orientation of the text characters
direction	Sets the direction of text, inline elements, and table columns
unicode-bidi	Overrides the bidirectional algorithm for text

Here's a quick example:

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

This allows for vertical text where some characters (like Latin letters) are rotated, while others (like Chinese characters) remain upright.

And there you have it, folks! We've journeyed through the fascinating world of CSS Writing Mode. Remember, the web is a global platform, and these properties help make it accessible and beautiful for everyone, regardless of their language or script.

Next time you're building a website, why not try playing around with these properties? You might just create something unexpectedly awesome! Happy coding, and may your text always flow in the right direction!

---

Modul CSS: Satu Perjalanan Melalui Orientasi Teks

Hai, para pengembang web yang sedang mencari tahu! Hari ini, kita akan embarkasi pada sebuah petualangan yang menarik ke dalam dunia CSS Writing Mode. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk menggembalakan Anda melalui properti yang sangat menarik ini yang dapat secara harfialihkan teks Anda! Jadi, sabungkan dan mari kita masuk ke dalam!

Apa Itu CSS Writing Mode?

Sebelum kita mulai mengoding, mari kita memahami apa yang dimaksud dengan 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? Teks berjalan secara vertikal dari atas ke bawah dan kanan ke kiri. Itu di mana CSS writing-mode berguna!

Properti writing-mode dalam CSS memungkinkan kita mengendalikan arah penampilan teks dan konten inline lainnya. Itu seperti memiliki tongkat ajaib yang dapat membuat teks Anda menari dalam arah yang berbeda!

Nilai Yang Mungkin

Mari kita lihat nilai yang berbeda yang dapat kita gunakan dengan properti writing-mode:

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

Terapkan ke

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

Sintaks DOM

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

element {
writing-mode: value;
}

Mudah, 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 Inggris. Mari kita lihat contoh:

<div class="horizontal-tb">
<p>This is horizontal text from left to right, top to bottom.</p>
</div>

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

Ini akan menampilkan teks seperti yang Anda baca saat ini. Tidak ada yang khusus, tapi itu adalah titik awal kita!

CSS writing-mode - Nilai vertical-rl

Sekarang, mari kita balikkan hal tersebut:

<div class="vertical-rl">
<p>This text is vertical, right to left!</p>
</div>

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

Walaupun! Teks Anda sekarang berjalan secara 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 coba mode vertikal kiri ke kanan:

<div class="vertical-lr">
<p>This text is vertical, left to right!</p>
</div>

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

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

CSS writing-mode - Nilai sideways-rl

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

<div class="sideways-rl">
<p>This text is sideways, right to left!</p>
</div>

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

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

CSS writing-mode - Nilai sideways-lr

Dan sekarang untuk flip terakhir:

<div class="sideways-lr">
<p>This text is sideways, left to right!</p>
</div>

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

Kali ini, setiap karakter diputar 90° melawan jarum jam. Itu seperti teks Anda melakukan back-flip!

CSS writing-mode - Penggunaan Estetik (Bahasa Inggris)

Meskipun mode tulisan yang berbeda ini sangat penting untuk mendukung bahasa yang beragam, mereka juga dapat digunakan secara kreatif dalam bahasa Inggris. Ini adalah contoh yang 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 mirip dengan punggung buku di rak. Keren, kan?

CSS writing-mode - Properti Terkait

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

Properti	Deskripsi
text-orientation	Menentukan orientasi karakter teks
direction	Mengatur 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) diputar, sedangkan yang lain (seperti karakter Cina) tetap tegak lurus.

Dan itu adalah nya, teman-teman! Kita telah melakukan perjalanan melalui dunia yang menarik CSS Writing Mode. Ingat, web adalah platform global, dan properti ini membantu membuatnya dapat diakses dan indah bagi semua orang, tanpa mengira bahasa atau skrip mereka.

Pada kesempatan berikutnya Anda membuat website, mengapa tidak mencoba bermain dengan properti ini? Anda mungkin menciptakan sesuatu yang menarik dan tak terduga! Selamat coding, dan may your text always flow in the right direction!

Credits: Image by storyset