Properti text-orientation menentukan orientasi karakter dalam satu baris konten. Ini hanya berlaku untuk mode tipografi vertikal.
Bahasa Asia Timur seperti Cina atau Jepang dapat ditulis secara horizontal, mengalir dari atas ke bawah atau secara vertikal, mengalir dari kanan ke kiri. Tulisan tradisional Mongolia ditulis secara vertikal, mengalir dari kiri ke kanan. Meskipun arah aliran blok vertikal, masing-masing mesin terbang tetap tegak secara default.
Seringkali, halaman web dalam bahasa Asia Timur akan memiliki karakter dan angka berbasis Latin yang dicampur dalam konten juga. Setiap karakter Unicode secara default memiliki orientasi berdasarkan karakteristik sistem penulisan masing-masing, dan halaman dengan karakter dari berbagai bahasa akan tetap ditampilkan dalam orientasi yang benar.
Bahasa berbasis Latin, ketika ditampilkan secara vertikal dengan properti mode penulisan memiliki mesin terbangnya ditampilkan ke samping, memungkinkan teks inline untuk dibaca secara normal, meskipun halaman berubah 90 derajat searah jarum jam di sisinya. Namun, kami dapat membuat setiap karakter menampilkan tegak lurus dengan properti orientasi teks.
Official Syntax:
- Syntax:
1<span class="hljs-attribute">text-orientation</span>: mixed | upright | sideways - Berlaku untuk: Semua elemen kecuali grup baris tabel, baris, grup kolom, dan kolom
Values:
- mixed: Ini adalah nilai awal. Skrip yang horizontal-saja akan memiliki karakter mereka mengeset menyamping (diputar 90 ° searah jarum jam) sementara skrip vertikal akan mengeset tegak.
- upright: Semua teks akan diketik tegak lurus, dengan masing-masing karakter dalam orientasi horizontal standar.
- sideways: Semua teks akan mengeset samping (diputar 90 ° searah jarum jam), seolah-olah dalam tata letak horizontal.
Contoh:
Properti text-orientation hanya berpengaruh pada konten yang memiliki mode penulisan vertikal. Secara default, browser sudah menampilkan setiap karakter dalam orientasi yang asli ke sistem penulisan masing-masing, tetapi mungkin ada contoh ketika kita ingin mengubah orientasi itu. Misalnya, membuat karakter atau angka berbasis Latin tegak ketika baris konten mengalir ke samping.
Ambil contoh markup ini:
|
1 2 3 |
<p class="vertical-text">Painter and theorist Barnett Newman was one of the most intellectual artists of the New York School. In <span>1933</span>, he ran for mayor of his city on a write-in ticket with a cultural platform, and he maintained a keen awareness of such modern horrors as Nazism and the atomic bomb.</p> |
Secara default, angka 1933 akan menampilkan ke samping, sama seperti karakter lainnya ketika mode penulisan diatur ke vertikal, tetapi kita dapat membuatnya tegak dengan mengubah nilai text-orientation rentang.
|
1 2 3 4 5 6 7 |
.vertical-text { writing-mode: vertical-rl; } .vertical-text span { text-orientation: upright; } |
