Explication détaillée de l'utilisation de l'attribut de mise en page du texte en mode écriture CSS

Syntaxe :

writing-mode : lr-tb | tb-rl

/* 关键字值 */  
writing-mode: horizontal-tb;    /* 默认值 */  
writing-mode: vertical-rl;   
writing-mode: vertical-lr;  
/* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */  
writing-mode: inherit;   
writing-mode: initial;   
writing-mode: unset;

lr-tb : Valeur par défaut. Le contenu de l' objet s'écoule horizontalement de gauche à droite, la ligne suivante étant en dessous de la ligne précédente. Tous les glyphes sont verticaux et vers le haut. Cette disposition est utilisée dans les langues romaines

tb-rl : haut-bas, droite-gauche. Le contenu d'un objet circule verticalement de haut en bas et de droite à gauche. La ligne verticale suivante se trouve à gauche de la ligne verticale précédente. Les caractères pleine chasse sont pointés verticalement vers le haut et les caractères demi-chasse tels que les lettres latines ou les katakana pivotent de 90 degrés dans le sens des aiguilles d'une montre. Cette mise en page est couramment utilisée dans les langues d'Asie de l'Est

Description :

Définit ou récupère le sens d'écriture inhérent au bloc de contenu de l'objet. Les langues occidentales utilisent une écriture de haut en bas de gauche à droite. Mais les langues asiatiques ont souvent des styles d’écriture haut-bas et droite-gauche.

Lorsque la valeur de cet attribut change, les effets de l'attribut text-align et de l'attribut vertical-align changeront également.

Les propriétés de la feuille de style ne sont pas héritables pour les éléments suivants :

BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type =submit INPUT type=text ISINDEX OPTION TEXTAREA

L'effet de cet attribut ne sera pas cumulatif. Par exemple, si la valeur de cette propriété de l'objet parent est définie sur tb-rl, la définition de la valeur de cette propriété de l'objet enfant sur tb-rl n'entraînera pas la rotation de l'objet enfant.

Si la propriété writing-mode de l'objet est définie différemment de son objet parent, il aura sa propre mise en page. La largeur d'un tel objet est déterminée en utilisant la hauteur de son premier parent disposé.

Lorsque vous utilisez des objets avec des valeurs de propriété de mode d'écriture différentes, la spécification de certaines tailles pour chaque objet vous donne un meilleur contrôle global sur leur disposition.

Cette propriété est en lecture seule pour l'objet currentStyle. Il est lisible et inscriptible par d'autres objets.

La fonctionnalité de script correspondante est writingMode.

Exemple de disposition verticale d'un texte :

.verticle-mode {   
    writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl;         
    writing-mode: vertical-rl;   
}   
/* IE7比较弱，需要做点额外的动作 */  
.verticle-mode {   
    *width: 120px;   
}   
.verticle-mode h4,   
.verticle-mode p {   
    *display: inline;   
    *writing-mode: tb-rl;   
}   
.verticle-mode h4 {   
    *float:rightright;   
}

Le html est le suivant :

<div class="verticle-mode">  
    <h4>咏柳</h4>  
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>  
</div>

On peut voir la disposition verticale de la poésie ancienne !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!