Le mode d'écriture est un attribut de CSS qui contr?le la direction d'écriture du texte. Les valeurs communes incluent la TB horizontale (par défaut), la RL verticale (verticale de droite à gauche) et la LR verticale (verticale de gauche à droite); Ses utilisations courantes incluent le texte vertical qui prend en charge les langues japonaises et coréennes, la disposition de la barre de navigation verticale, l'adaptation d'interface du lecteur PDF, etc.; L'orientation du texte est utilisée pour contr?ler la direction d'un seul caractère en mode vertical. Les valeurs communes incluent mixtes (par défaut, les caractères latins restent horizontaux), vertical (tous les caractères sont affichés verticalement), latéralement (les caractères tournent à 90 degrés dans le sens des aiguilles d'une montre); Lors du traitement des langues RTL telles que l'arabe, direction: RTL et Unicode-bidi: Bidi-override pour unifier l'orientation du texte et assurer la cohérence de la disposition; Lorsque vous utilisez ces attributs, vous devez faire attention à leur impact sur la taille des éléments, la logique de mise en page et le style global pour améliorer la compatibilité multilingue et le professionnalisme des pages Web.

Les modes d'écriture CSS et le contr?le d'orientation du texte sont souvent négligés mais des parties très critiques de la disposition des pages Web. Surtout lorsque vous traitez avec des sites Web multilingues ou des scénarios où le texte vertical est requis, la ma?trise de ces fonctionnalités rend votre page plus flexible et professionnelle.

Qu'est-ce que le mode d'écriture?

writing-mode détermine comment le bloc de texte circule sur la page. Par défaut, la plupart des navigateurs utilisent la gauche à droite, de haut en bas (c'est-à-dire horizontal-tb ), qui convient aux langues anglaises, chinoises et autres.

Mais si vous devez faire face à des langues comme le japonais, le coréen ou le mongol qui ont traditionnellement écrit verticalement, vous pouvez utiliser:

 mode d'écriture: Vertical-RL; / * Ligne verticalement de droite à gauche * /

ou

 mode d'écriture: LR vertical; / * verticalement de gauche à droite * /

Après ce paramètre, le texte de l'élément entier deviendra automatiquement vertical et la disposition sera ajustée en conséquence. Par exemple, la largeur et la hauteur d'un div seront recalculées en fonction de la nouvelle direction d'écriture.

Utilisations courantes:

• Textes verticaux dans les sites Web japonais, coréenne et traditionnel chinois
• Modifiez la barre de navigation horizontale en arrangement vertical, en éliminant les paramètres de flexion ou de grille
• Adapter le contenu dans différentes langues lors de la création d'interfaces de lecture PDF

L'orientation du texte contr?le l'orientation d'un seul caractère

Lorsque vous utilisez vertical-rl ou vertical-lr , certains caractères restent horizontalement affichés par défaut, tels que des lettres et des nombres latins. Pour le moment, vous pouvez utiliser text-orientation pour contr?ler leur orientation.

Les valeurs communes incluent:

• mixed : la valeur par défaut, les caractères latins sont maintenus horizontaux, les caractères chinois et d'autres idéogrammes tournent vers la verticale
• upright : tous les caractères sont affichés verticalement (adaptés aux symboles pleine largeur et au kanna japonais)
• sideways : le caractère global tourne à 90 degrés dans le sens des aiguilles d'une montre, adapté à l'écran de titre

Par exemple, si vous voulez un texte mélangé à l'anglais et au chinois pour être plus soigné lorsqu'il est organisé verticalement, vous pouvez l'écrire comme ceci:

 .vertical-text {
  mode d'écriture: Vertical-RL;
  Orientation du texte: droit;
}

De cette fa?on, que ce soit des lettres anglaises ou des caractères chinois, ils seront présentés dans une direction verticale unifiée.

Utilisez la direction et Unicode-Bidi ensemble

Bien qu'il ne tombe pas dans la catégorie directe des modes d'écriture, il est souvent nécessaire d'utiliser direction et unicode-bidi en conjonction avec les langues RTL (droite à gauche) (comme l'arabe et l'hébreu).

• direction: rtl; Permet de s'afficher du texte dans l'ensemble de l'élément de droite à gauche
• unicode-bidi: bidi-override; Forcer l'écrasement de l'algorithme bidirectionnel par défaut du navigateur pour assurer la direction cohérente

Par exemple:

 .rtl-contenu {
  Direction: RTL;
  Unicode-bidi: Bidi-Override;
}

Cette combinaison est particulièrement utile dans les sites Web internationaux, en particulier lorsque les utilisateurs modifient dynamiquement la direction du texte lors de la commutation des langues.

Il convient de noter que la disposition RTL n'est pas seulement un changement de direction du texte, mais affecte également la logique de style tel que le rembourrage, la marge, la disposition de la flexion, etc. Il est recommandé de le gérer en combinaison avec des classes d'outils CSS ou des spécifications de dénomination BEM.

Fondamentalement, c'est tout. Le mode d'écriture et l'orientation du texte peuvent sembler simples, mais il est facile de rencontrer des problèmes de compatibilité ou de désalignement dans des applications pratiques. L'utilisation de ces attributs peut raisonnablement rendre votre page Web plus adaptable et internationale.

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!