mozilla
Vos résultats de recherche

    writing-mode

    Introduction

    CSS Writing Modes Level 3 définit un ensemble de fonctionalités CSS permettant la gestion des modes d'écritures internationaux, tels que de gauche à droite (p. ex. script latin et brahmique), de droite à gauche (p. ex. script hébreu et arabe), bidirectionnel (p. ex. script latin mixte et arabe) et vertical (p. ex. script asiatique. Cet article est à propos de la propriété CSS writing-mode.

    Un writing mode (mode d'écriture) en CSS est déterminé par les propriétés writing-mode, direction et text-orientation. Cela s'applique seulement à l'élément <text>, et est ignoré par les sous-éléments <tspan>, <tref>, <altGlyph> et <textPath>. (Remarquez que la direction de progression en ligne peut changer dans un élément <text> à cause de l'algorithme bidirectionnel Unicode et les propriétés direction et unicode-bidi.) Un mode d'écriture est définit principalement en terme de ses inline base direction (direction en ligne de base) et block flow direction (direction de flux de blocs).

    La inline base direction est la direction principale selon laquelle les éléments inline sont ordonnées, et définit quels côtés d(une ligne sont considérés comme le « début » et la « fin ». La propriété direction définit la inline base direction d'un élément, et (avec la propriété unicode-bidi et la direction inhérente du texte), détermine l'ordonnancement du contenu inline.

    La block flow direction est la direction selon laquelle les éléments blocs sont empilés, et la direction du flux selon lequel les éléments inline sont distribués dans un bloc contenant. La propriété writing-mode détermine dont aussi l'ordonnancement des éléments blocs.

    En général, un mode d'écriture horizontal consiste en plusieurs lignes horizontales et un flux de blocs vers le haut ou le bas. Un mode d'écriture vertical consiste en plusieurs lignes verticales et un flux de blocs vers la gauche ou la droite.

    Valeurs

    La propriété writing-modes peut prendre les valeurs suivantes :

    Valeur Effet Exemple
    horizontal-tb Valeur par défaut. Le contenu est ordonné horizontalement, de gauche à droite et verticalement de haut en bas. La ligne horizontale suivante est en-dessous de la ligne précédente. horizontal-tb est la valeur par défaut car c'est le mode d'écriture le plus répandu. Pour les documents SVG1 uniquement, utilisez les valeurs dépréciées lr, rl ou lr-tb. <div style="horizontal-tb">...</div>
    rl-tb Le contenu est ordonné horizontalement, de droite à gauche et verticalement de haut en bas. La ligne horizontale suivante est en-dessous de la ligne précédente. <div style="rl-tb">...</div>
    vertical-lr Le contenu est ordonné verticalement, de haut en bas, et horizontalement de gauche à droite. La ligne suivante est positionnée à droite de la ligne précédente. Pour les documents SVG1 uniquement, utilisez la valeur dépréciée tb-lr. <div style="vertical-lr">...</div>
    vertical-rl Le contenu est ordonné verticalement, de haut en bas, et horizontalement de droite à gauche. La ligne suivante est à gauche de la ligne précédente. Pour les documents SVG1 uniquement, utilisez la valeur dépréciée tb ou tb-rl. <div style="vertical-rl">...</div>
    bt-rl Le contenu est ordonné verticalement, de bas en haut, et horizontalement de droite à gauche. La ligne suivante est à gauche de la ligne précédente. <div style="bt-rl">...</div>
    bt-lr Le contenu est ordonné verticalement, de bas en haut, et horizontalement de gauche à droite. La ligne suivante est à droite de la ligne précédente. <div style="bt-lr">...</div>
    lr-bt Le contenu est ordonné horizontalement, de gauche à droite et verticalement de bas en haut. La ligne suivante est au-dessus de la ligne précédente. <div style="lr-bt">...</div>
    rl-bt Le contenu est ordonné horizontalement, de droite à gauche, et verticalement de bas en haut. La ligne suivante est au-dessus de la ligne précédente. <div style="rl-bt">...</div>
    lr Déprécié sauf pour les documents SVG1. Pour CSS, utilisez horizontal-tb (valeur par défaut).  <div style="horizontal-tb">...</div>
    lr-tb Déprécié sauf pour les documents SVG1. Pour CSS, utilisez horizontal-tb (valeur par défaut). <div style="horizontal-tb">...</div>
    rl Déprécié sauf pour les documents SVG1. Pour CSS, utilisez horizontal-tb (valeur par défaut).  <div style="horizontal-tb">...</div>
    tb Déprécié sauf pour les documents SVG1. Pour CSS, utilisez vertical-rl <div style="vertical-rl">...</div>
    tb-lr Déprécié sauf pour les documents SVG1. Pour CSS, utilisez vertical-lr. <div style="vertical-lr">...</div>
    tb-rl Déprécié sauf pour les documents SVG1. Pour CSS, utilisez vertical-rl. <div style="vertical-rl">...</div>

    Voir également

    En tant qu'attribut de présentation, writing-mode peut être utilisée comme propriété dans une feuille de styles CSS. Reportez-vous à l'article MDN à propos de writing-mode et à la spécification Writing Modes du W3C pour plus d'informations.

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, FredB
    Dernière mise à jour par : teoli,