Orientasi teks - Trik CSS | CSS Almanak 2024

The text-orientationproperti dalam teks CSS disejajarkan dalam garis ketika bekerja dengan vertikal writing-mode. Pada dasarnya, ini memutar baris 90 ° searah jarum jam untuk membantu mengontrol bagaimana bahasa vertikal ditampilkan - seperti cara text-combine-uprightmemutar kelompok karakter dalam satu baris teks dalam skrip vertikal, tetapi untuk baris penuh teks.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

Untuk menangani teks dua arah - blok yang berisi teks kiri-ke-kanan dan kanan-ke-kiri, misalnya - lihat unicode-bidipropertinya. Ini digabungkan dengan directionproperti untuk menimpa bagaimana browser memutuskan untuk menampilkan teks.

Sintaksis

text-orientation: mixed | upright | sideways

Awal: mixed
Berlaku untuk: semua elemen kecuali grup baris tabel, baris, grup kolom, dan kolom
Diwariskan: ya
Persentase: n / a
Nilai yang dihitung: nilai yang ditentukan
Jenis animasi: tidak dapat dianimasikan

Nilai

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Nilai default. Karakter dalam skrip horizontal diputar 90 ° searah jarum jam. Karakter dalam skrip vertikal ditampilkan dalam orientasi vertikal aslinya.
upright: Karakter dalam skrip horizontal disetel dalam posisi tegak horizontal aslinya, termasuk beberapa mesin terbang. Jadi, jika mode penulisan vertikal dapat memutar sebaris teks sehingga karakter miring, nilai ini akan memutar karakter itu sendiri 90 ° ke posisi aslinya. Perhatikan bahwa nilai ini memaksa directionproperti menjadi nilai bekas ltr, artinya semua karakter diperlakukan seolah-olah berada dalam mode penulisan kiri-ke-kanan.
sideways: Semua teks dalam mode penulisan vertikal ditampilkan menyamping, seolah-olah dalam tata letak horizontal, tetapi seluruh baris diputar 90 ° searah jarum jam.
sideways-right: Beberapa browser menghormati nilai ini sebagai alias untuk sidewaysnilai yang disimpan untuk kompatibilitas ke belakang.

use-glyph-orientationtelah dihapus sebagai nilai kata kunci pada Desember 2015. Ini digunakan pada elemen SVG untuk menentukan properti SVG glyph-orientation-verticaldan glyph-orientation-horizontalsekarang sudah tidak digunakan lagi. glyph-orientation-verticalsekarang menjadi alias untuk text-orientation.

Dukungan browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome	Firefox	YAITU	Tepi	Safari
48	41	Tidak	79	10.1 *

Ponsel / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10.0-10.2

Spesifikasi

Mode Penulisan CSS Level 3 (Draf editor)

Informasi lebih lanjut

Mengapa Orientasi Teks Vertikal Merupakan Mimpi Buruk Untuk Kompatibilitas Lintas Browser? oleh Nikhil - Penjelasan menyeluruh tentang text-orientationdan writing-mode.
Mudah Membuat Teks Samping Menggunakan Properti CSS "mode-menulis" oleh Adi Purdila - Jelajahi berbagai pendekatan selain menggunakan text-orientation.
2 Cara Membuat Teks Vertikal di CSS oleh WS Toh - Perbandingan yang lebih langsung antara pendekatan menggunakan writing-modedan text-orientation.
Rotasi Teks oleh Chris Coyier - Pendekatan teks vertikal menggunakan transformalih-alih writing-modeatau text-orientation.