Orientation du texte - Astuces CSS

La text-orientationpropriété en CSS aligne le texte sur une ligne lorsque vous travaillez avec une verticale writing-mode. Fondamentalement, il fait pivoter la ligne de 90 ° dans le sens des aiguilles d'une montre pour aider à contrôler l'affichage des langues verticales - un peu comme la façon dont text-combine-uprightfait pivoter les groupes de caractères dans une ligne de texte dans un script vertical, mais pour des lignes complètes de texte.

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

Pour gérer du texte bidirectionnel - un bloc contenant à la fois du texte de gauche à droite et de droite à gauche, par exemple - consultez la unicode-bidipropriété. Il est combiné avec la directionpropriété pour remplacer la façon dont le navigateur décide d'afficher le texte.

Syntaxe

text-orientation: mixed | upright | sideways

Initiale: mixed
S'applique à: tous les éléments à l'exception des groupes de lignes de tableau, des lignes, des groupes de colonnes et des colonnes
Héritée: oui
Pourcentages: n / a
Valeur calculée: valeur spécifiée
Type d'animation: non animable

Valeurs

/* 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: Valeur par défaut. Les caractères d'un script horizontal sont pivotés de 90 ° dans le sens des aiguilles d'une montre. Les caractères d'un script vertical sont affichés dans leur orientation verticale naturelle.
upright: Les caractères d'un script horizontal sont placés dans leur position verticale horizontale naturelle, y compris certains glyphes. Ainsi, lorsqu'un mode d'écriture verticale peut faire pivoter une ligne de texte de sorte que les caractères soient sur le côté, cette valeur fait pivoter les caractères eux-mêmes de 90 ° vers leur position naturelle. Notez que cette valeur force la directionpropriété à une valeur utilisée de ltr, ce qui signifie que tous les caractères sont traités comme s'ils étaient dans un mode d'écriture de gauche à droite.
sideways: Tout le texte en mode d'écriture verticale est affiché sur le côté, comme s'il était dans une disposition horizontale, mais la ligne entière est tournée de 90 ° dans le sens des aiguilles d'une montre.
sideways-right: Certains navigateurs respectent cette valeur comme un alias de la sidewaysvaleur conservée à des fins de compatibilité descendante.

use-glyph-orientationa été supprimée en tant que valeur de mot clé en décembre 2015. Elle a été utilisée sur les éléments SVG pour définir les propriétés SVG glyph-orientation-verticalet glyph-orientation-horizontalqui sont maintenant obsolètes. glyph-orientation-verticalest maintenant un alias pour text-orientation.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome	Firefox	C'EST À DIRE	Bord	Safari
48	41	Non	79	10,1 *

Mobile / tablette

Chrome Android	Android Firefox	Android	Safari sur iOS
88	85	81	10,0-10,2

spécification

Modes d'écriture CSS Niveau 3 (brouillon de l'éditeur)

Plus d'information

Pourquoi l'orientation verticale du texte est-elle un cauchemar pour la compatibilité entre navigateurs? par Nikhil - Une explication approfondie de text-orientationet writing-mode.
Créez facilement du texte latéral à l'aide de la propriété CSS «mode d'écriture» d'Adi Purdila - Explorez différentes approches en plus d'utiliser text-orientation.
2 façons de créer du texte vertical en CSS par WS Toh - Une comparaison plus directe entre les approches utilisant writing-modeet text-orientation.
Rotation de texte par Chris Coyier - Une approche du texte vertical utilisant transformau lieu de writing-modeou text-orientation.