Annuaire d'articles
- 1. Introduction
- 2.mode d'écriture
-
- 1. Grammaire
-
- horizontal-tb (par défaut : direction horizontale, texte de gauche à droite, lignes de haut en bas)
- vertical-rl (direction verticale, texte de haut en bas, lignes de droite à gauche)
- vertical-lr (direction verticale, texte de haut en bas, lignes de gauche à droite)
- sideways-rl (valeur expérimentale)
- sideways-lr (expérimental)
- 2. Correspondance d'attributs
- 3. Vie passée et présente
- 3. Prolonger l'apprentissage
- Documentation : mode écriture - CSS : Feuilles de style en cascade | MDN
1. Introduction
Le projet exige que le texte soit disposé verticalement. J'ai immédiatement pensé à directioncet attribut en CSS, mais cet attribut ne peut définir le texte que "de gauche à droite" ou de droite à gauche. Après recherche, j'ai trouvé qu'il existe un "attribut peu commun" ——writing-mode
Ceci peut être réalisé comme suit :
writing-mode: vertical-lr;
2.mode d'écriture
writing-modeLes propriétés définissent la disposition horizontale ou verticale du texte et la direction dans laquelle le texte se déplace dans les éléments de niveau bloc.
1. Grammaire
/* 关键字值 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
/* 全局值 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;
horizontal-tb (par défaut : direction horizontale, texte de gauche à droite, lignes de haut en bas)
Pour le texte aligné à gauche (ltr), le contenu s'écoule horizontalement de gauche à droite. Pour le texte aligné à droite (rtl), le contenu s'écoule horizontalement de droite à gauche. La ligne horizontale suivante se trouve en dessous de la ligne précédente.
vertical-rl (direction verticale, texte de haut en bas, lignes de droite à gauche)
Pour le texte justifié à gauche (ltr), le contenu s'écoule verticalement de haut en bas, la ligne verticale suivante étant à gauche de la ligne précédente. Pour le texte aligné à droite (rtl), le contenu circule verticalement de bas en haut, la ligne verticale suivante étant à droite de la ligne précédente.
vertical-lr (direction verticale, texte de haut en bas, lignes de gauche à droite)
Pour le texte justifié à gauche (ltr), le contenu s'écoule verticalement de haut en bas, avec la ligne verticale suivante à droite de la ligne précédente. Pour le texte aligné à droite (rtl), le contenu circule verticalement de bas en haut, la ligne verticale suivante étant à gauche de la ligne précédente.
sideways-rl (valeur expérimentale)
Pour le texte aligné à gauche (ltr), le contenu circule verticalement de bas en haut. Pour le texte aligné à droite (rtl), le contenu s'écoule verticalement de haut en bas. Tous les glyphes, même ceux en texte vertical, sont orientés vers la droite.
sideways-lr (expérimental)
Pour le texte aligné à gauche (ltr), le contenu s'écoule verticalement de haut en bas. Pour le texte aligné à droite (rtl), le contenu circule verticalement de bas en haut. Tous les glyphes, même ceux du texte vertical, sont orientés vers la gauche.
2. Correspondance d'attributs
writing-modeVous pouvez modifier le sens de la disposition du texte, et certains attributs liés au texte auront également des utilisations plus intéressantes :
(1) La boîte est centrée verticalement——margin: auto 0;
<div class="container">
<div class="content"></div>
</div>
.container {
width: 100%;
height: 100%;
background-color: #f00;
writing-mode: vertical-lr;
}
.container .content {
height: 100px;
width: 200px;
margin: auto 0;
background-color: #0f0;
}
Remarque : largeur et hauteur fixes
(2) Centrer verticalement l'image du texte——text-align: center;
<div class="container">
我是一行文字<br>程序边界<br>
<img src="https://profile-avatar.csdnimg.cn/ea275d892df44c5fb722c5756f8ba98b_qq_32682301.jpg">
</div>
.container {
width: 100%;
height: 100%;
background-color: #0fF;
writing-mode: vertical-lr;
text-align: center;
}
Adresse originale des limites du programme : https://iseeu.blog.csdn.net/article/details/131709017
(3) L'indentation de la première ligne change le texte en puits——text-indent
<div class="container">
我是一行文字<br>程序边界<br>
</div>
.container {
width: 100%;
height: 100%;
background-color: #0fF;
writing-mode: vertical-lr;
text-indent: 2rem;
}
Merveilleuse application
https://www.zhangxinxu.com/study/201604/writing-mode-text-indent-vertical-down.html
Adresse originale des limites du programme : https://iseeu.blog.csdn.net/article/details/131709017
(4) Autres
D'autres façons de jouer sont lentement explorées et découvertes, et cela continuera. . .
3. Vie passée et présente
L'attribut writing-mode n'était à l'origine qu'un attribut dans IE et n'était pris en charge que par IE. Il est désormais pris en charge par Google et Firefox en CSS3.
Par conséquent, vous devez vous souvenir de deux ensembles de syntaxe différents lorsque vous l’utilisez : les attributs privés d’IE et les attributs canoniques de CSS3.
Si vous avez uniquement besoin d'être compatible avec IE8+, vous pouvez simplement utiliser les propriétés standard de CSS3.
3. Prolonger l'apprentissage
direction
Documentation : direction - CSS : Feuilles de style en cascade | MDN
La propriété CSS direction est utilisée pour définir la direction du texte, des colonnes du tableau et du débordement horizontal .