Comment utiliser l'attribut de mode d'écriture CSS-tutoriel CSS-php.cn

Comment utiliser l'attribut de mode d'écriture CSS

青灯夜游

Libérer： 2019-05-28 17:57:08

original

3095 Les gens l'ont consulté

L'attribut CSS writing-mode définit la manière dont le texte est disposé horizontalement ou verticalement et est utilisé pour contrôler la direction d'affichage du texte afin qu'il puisse être lu de haut en bas ou de gauche à droite, selon la langue. Les langues occidentales s'écrivent généralement à la manière lr-tb, mais les langues asiatiques s'écrivent à la manière lr-tb-rl.

Comment utiliser l'attribut de mode d'écriture CSS

Comment utiliser l'attribut CSS writing-mode ?

L'attribut writing-mode définit la manière dont le texte est disposé horizontalement ou verticalement.

Syntaxe :

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Copier après la connexion

Valeur de l'attribut :

● horizontal-tb : méthode d'écriture horizontale descendante . C'est-à-dire gauche-droite-haut-bas

● vertical-rl : méthode d'écriture de droite à gauche dans le sens vertical. C'est-à-dire haut-bas-droite-gauche

● vertical-lr : le contenu dans la direction verticale est de haut en bas et la direction horizontale est de gauche à droite

● latéralement -rl : Le contenu est dans le sens vertical du haut. Organiser de bas en bas

● sideways-lr : Organiser le contenu verticalement de bas en haut

Description :

L'attribut writing-mode définit ou récupère des objets La direction d'écriture inhérente du bloc de contenu. Les langues occidentales s'écrivent généralement à la manière lr-tb, mais les langues asiatiques s'écrivent à la manière lr-tb-rl.

L'attribut CSS du mode d'écriture était autrefois un attribut unique d'IE et est déjà pris en charge par le navigateur IE5.5. Pendant longtemps, les navigateurs modernes tels que FireFox et Chrome ne prenaient pas en charge le mode écriture. Les principaux navigateurs modernes ont implémenté une prise en charge plus standard du mode écriture (principalement en raison du suivi actif du navigateur FireFox).

Exemple d'attribut de mode d'écriture CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table, td, th {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
    width: 100%;
}
.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}
.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}
.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}
.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}
.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}
</style>
</head>
<body>
<table>
    <tr>
        <th>value</th>
        <th>Vertical script</th>
        <th>Horizontal script</th>
        <th>Mixed script</th>
    </tr>
    <tr>
        <td>horizontal-tb</td>
        <td class="example Text1"><span>我家没有电脑。</span></td>
        <td class="example Text1"><span>Example text</span></td>
        <td class="example Text1"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>vertical-lr</td>
        <td class="example Text2"><span>我家没有电脑。</span></td>
        <td class="example Text2"><span>Example text</span></td>
        <td class="example Text2"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>vertical-rl</td>
        <td class="example Text3"><span>我家没有电脑。</span></td>
        <td class="example Text3"><span>Example text</span></td>
        <td class="example Text3"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>sideways-lr</td>
        <td class="example Text4"><span>我家没有电脑。</span></td>
        <td class="example Text4"><span>Example text</span></td>
        <td class="example Text4"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>sideways-rl</td>
        <td class="example Text5"><span>我家没有电脑。</span></td>
        <td class="example Text5"><span>Example text</span></td>
        <td class="example Text5"><span>1994年に至っては</span></td>
    </tr>
</table>
</body>
</html>

Copier après la connexion

Rendu :

Comment utiliser lattribut de mode décriture CSS