Le mode d'écriture de CSS est un attribut utilisé pour contr?ler l'orientation de l'arrangement de texte et est crucial dans la composition multilingue du site Web. Le mode d'écriture a trois valeurs principales: la TB horizontale (par défaut, ligne horizontale de gauche à droite), RL vertical (ligne verticale de droite à gauche, souvent utilisée en chinois traditionnel, japonais, etc.), LR vertical (ligne verticale de gauche à droite, parfois utilisée en chinois moderne). Il affecte non seulement la direction du texte, mais affecte également la structure de disposition globale. La direction de l'élément au niveau du bloc peut être définie avec l'attribut de direction, tel que RTL est utilisé en arabe ou en hébreu; L'orientation du texte est utilisée pour contr?ler l'orientation des caractères en mode vertical, comme le montant pour afficher les caractères en direction avant. Dans les applications pratiques, par exemple, l'interface arabe utilise la direction: RTL et mode d'écriture: TB horizontal, tandis que la ligne verticale chinoise utilise le mode d'écriture: RL vertical et orientation de texte: debout. Les problèmes courants incluent des tables et des boutons malpérés. Il est recommandé de définir le mode vertical uniquement pour les conteneurs de texte; Si les ic?nes ne sont pas alignées sur le texte, vous pouvez utiliser Flex ou en ligne de bloc pour régler; La bo?te d'entrée peut avoir des problèmes de compatibilité du c?té mobile, vous devez donc tester à l'avance. Dans l'ensemble, l'utilisation rationnelle du mode d'écriture et des attributs connexes peut efficacement prendre en charge les langages RTL et verticaux, mais il doit également être fait attention à son impact sur le flux de mise en page.

Lorsque vous traitez avec des sites Web multilingues, vous pouvez rencontrer des problèmes avec une orientation de mise en page incohérente. L'arabe et l'hébreu sont écrits de droite à gauche, le chinois et le japonais sont parfois disposés verticalement, tandis que la plupart des langues telles que l'anglais sont disposées horizontalement de gauche à droite. à l'heure actuelle, le mode d'écriture de CSS est utile.

Ce n'est pas seulement un attribut qui contr?le la direction du texte, mais aussi un outil important pour affecter la disposition globale. Surtout lors de l'adaptation de la localisation, il est très important de comprendre son utilisation.

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

writing-mode contr?le la direction de la disposition des lignes de texte. Vous pouvez le comprendre comme "si une ligne de caractères est organisée horizontalement ou verticalement."

• horizontal-tb : par défaut, organisé horizontalement de gauche à droite (commande de haut en bas), adapté à la plupart des langues.
• vertical-rl : ligne verticale, écrite de haut en bas, chaque colonne est disposée de droite à gauche, souvent utilisée dans les types traditionnels chinois, japonais et coréens.
• vertical-lr : C'est aussi une ligne verticale, mais chaque colonne est doublée de gauche à droite. Ceci est parfois utilisé en chinois moderne.

Pour donner un exemple simple:
Si vous définissez un writing-mode: vertical-rl , le texte à l'intérieur deviendra écrit verticalement et la première colonne est à droite.

Comment l'utiliser avec la direction et l'orientation du texte?

writing-mode n'est que la première étape, et certaines langues doivent également ajuster la direction du contenu et l'orientation des caractères.

• direction : contr?le la direction des éléments au niveau du bloc, tels que rtl (droit à gauche) pour l'arabe ou l'hébreu.
• text-orientation : contr?le la direction des caractères en mode vertical, tels que de faire tourner les marques de ponctuation ou les lettres latines.

En pratique, par exemple, vous souhaitez créer une interface qui prend en charge l'arabe:

 corps {
  Direction: RTL;
  Mode d'écriture: TB horizontal;
}

Cela permet à la page entière d'être affichée de droite à gauche, tout en gardant le texte organisé horizontalement.

S'il s'agit d'un document vertical en chinois:

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

Cela permet de disposer des caractères chinois verticalement et chaque caractère est affiché directement (plut?t que inversé).

Questions fréquemment posées dans les applications pratiques

1. Les tables et les boutons sont incohérents dans la typographie
   Lorsque vous activez le mode vertical, les colonnes de la table modifieront le comportement et les lignes deviendront des colonnes, ce qui peut rendre la mise en page à l'origine bizarre. La solution est:

   • évitez d'utiliser le mode vertical directement sur des structures complexes;
   • Ou définissez séparément le mode d'écriture pour les conteneurs de texte, ce qui n'affectera pas la disposition globale.

2. Les ic?nes ne sont pas alignées sur le texte
   Les ic?nes insérées dans le texte vertical peuvent être anormales en position, et il est recommandé d'utiliser un bloc flex ou en ligne pour contr?ler explicitement l'alignement.

3. Problèmes de compatibilité des bo?tes et des éditeurs
   Certains navigateurs ne prennent pas très bien les entrées verticales, en particulier sur les appareils mobiles. Si l'utilisateur doit entrer du texte vertical, il est préférable de tester les performances des navigateurs grand public.

écrit à la fin

Le mode d'écriture de CSS est utile lorsque vous travaillez sur des projets internationaux, en particulier lorsqu'ils sont confrontés à RTL et aux langues verticales. Bien qu'il soit simple en soi, il peut répondre à une variété de besoins de composition après avoir combiné la direction, l'orientation du texte et même la transformation.

Cependant, il convient également de noter que ces caractéristiques affecteront le flux de disposition et rendront parfois la structure à l'origine simple compliquée. Donc, avant de l'utiliser, clarifiez d'abord vos habitudes de disposition de la langue cible, puis décidez d'activer ces propriétés.

Fondamentalement, c'est tout.

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!