Explication détaillée de l'utilisation du mode d'écriture en CSS

Quand j'utilise p{writing-mode:tb-rl;} lors de la création d'une page Web, les caractères chinois affichés sur la page sont solides et affichés normalement, mais lorsque je crée le site Web de mon école, ajoutez ce code *textrea{writing-mode:tb-rl;} à mon tableau de graffitis. J'espère que mon tableau de messages sera stable, mais le résultat est que les mots sont fermement disposés, mais quand je les regarde, ils mentent. vers le bas, c'est-à-dire que les caractères chinois pivotent de 90 degrés dans le sens des aiguilles d'une montre. Pourquoi et que faut-il faire ?

L'attribut writing-mode a deux valeurs : lr-tb et tb-rl. Le premier est gauche-droite, haut-bas par défaut, et le second est haut-bas, droite-gauche.

Par exemple :

p{
writing-mode: tb-rl;
}

peut être combiné avec la disposition des directions.

Exécutez la boîte de code

<style>
p{
writing-mode: tb-rl;
}
</style>
<p>

Les symboles de puce en CSS incluent le disque (point plein), le cercle (cercle vide), le carré (carré plein), le décimal (chiffre arabe), le bas -roman (chiffres romains minuscules), romain supérieur (chiffres romains majuscules), alpha inférieur (lettres anglaises minuscules), alpha supérieur (lettres anglaises majuscules), aucun (aucun). Par exemple, définissez les puces d'une liste (ul ou ol) sur des carrés, tels que :

li{
list-style: square;
}

De plus, list-style a également certaines valeurs, par exemple, vous pouvez utiliser quelques petites images comme symbole d'éléments, écrivez simplement l'URL ("adresse de l'image") directement sous le style de liste. Notez que si le patch extérieur gauche (margin-left) d'une liste d'éléments est défini sur zéro, les puces pour list-style-position : outside (la valeur par défaut est outside) ne pas être affiché. Malheureusement, les puces mentionnées ci-dessus ne semblent pas pouvoir définir la taille et les points et les carrés sont toujours les mêmes. Et l'alignement vertical ne peut pas être défini

lr-tb : valeur par défaut. Le contenu de l'objet s'écoule horizontalement de gauche à droite, la ligne suivante étant située 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 fonctions 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 estwritingMode.

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

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!