Orientace textu - Triky CSS | Almanach CSS 2025

text-orientationNemovitost v CSS zarovná text v souladu při práci s vertikální writing-mode. V zásadě otočí řádek o 90 ° ve směru hodinových ručiček, aby pomohl ovládat, jak se zobrazují svislé jazyky - podobně jako způsob text-combine-uprightotáčí skupiny znaků v řádku textu ve svislém skriptu, ale pro celé řádky textu.

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

Pro manipulaci s obousměrným textem - blok, který obsahuje například text zleva doprava i zprava doleva - zkontrolujte unicode-bidivlastnost. V kombinaci s directionvlastností přepíše, jak se prohlížeč rozhodne zobrazit text.

Syntax

text-orientation: mixed | upright | sideways

Počáteční: mixed
Platí pro: všechny prvky kromě skupin řádků tabulky, řádků, skupin sloupců a sloupců
Zděděno: ano
Procenta: n / a
Vypočítaná hodnota: zadaná hodnota
Typ animace: nelze animovat

Hodnoty

/* 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: Výchozí hodnota. Znaky v horizontálním skriptu jsou otočeny o 90 ° ve směru hodinových ručiček. Znaky ve svislém skriptu se zobrazují ve své přirozené svislé orientaci.
upright: Znaky ve vodorovném skriptu jsou nastaveny do své přirozené vodorovné svislé polohy, včetně některých piktogramů. Pokud tedy vertikální režim psaní může otočit řádek textu tak, aby byly znaky bokem, tato hodnota otočí samotné znaky o 90 ° do jejich přirozené polohy. Všimněte si, že tato hodnota vynutí directionvlastnost na použitou hodnotu ltr, což znamená, že se všemi znaky se zachází, jako by byly v režimu psaní zleva doprava.
sideways: Veškerý text v režimu svislého psaní je zobrazen do strany, jako by byl v horizontálním rozložení, ale celý řádek je otočen o 90 ° ve směru hodinových ručiček.
sideways-right: Některé prohlížeče tuto hodnotu respektují jako alias pro sidewayshodnotu uchovávanou pro zpětnou kompatibilitu.

use-glyph-orientationbyl odstraněn jako hodnota klíčového slova v prosinci 2015. Byl použit na prvcích SVG k definování vlastností SVG glyph-orientation-verticala glyph-orientation-horizontalkteré jsou nyní zastaralé. glyph-orientation-verticalje nyní alias pro text-orientation.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome	Firefox	TJ	Okraj	Safari
48	41	Ne	79	10,1 *

Mobilní / Tablet

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

Specifikace

Režimy psaní CSS úrovně 3 (návrh redaktora)

Více informací

Proč je vertikální orientace textu noční můrou pro kompatibilitu mezi prohlížeči? Nikhil - Důkladné vysvětlení text-orientationa writing-mode.
Snadné vytváření bočního textu pomocí vlastnosti CSS „režimu psaní“ Adi Purdila - prozkoumejte kromě použití i různé přístupy text-orientation.
2 způsoby, jak vytvořit svislý text v CSS pomocí WS Toh - přímější srovnání mezi přístupy používajícími writing-modea text-orientation.
Otočení textu Chris Coyier - přístup k vertikálnímu textu pomocí transformnamísto writing-modenebo text-orientation.