Das Schreibmodus ist ein Attribut in CSS, das die Schreibrichtung des Textes steuert. Gemeinsame Werte umfassen horizontales TB (Standard), vertikal-rl (vertikal von rechts nach links) und vertikal-LR (vertikal von links nach rechts); Zu den gemeinsamen Verwendungen geh?ren vertikaler Text, der japanische und koreanische Sprachen, vertikale Navigationsleistenlayout, PDF -Leserschnittstelle usw.; Die textorientierte Orientierung wird verwendet, um die Richtung eines einzelnen Zeichens im vertikalen Modus zu steuern. Zu den gemeinsamen Werten geh?ren gemischte (Standard, lateinische Zeichen bleiben horizontal), aufrecht (alle Zeichen werden vertikal angezeigt), seitw?rts (Zeichen drehen 90 Grad im Uhrzeigersinn); Bei der Verarbeitung von RTL-Sprachen wie Arabisch, Richtung: RTL und Unicode-Bidi: Bidi-Override, um die Textorientierung zu vereinen und die Layoutkonsistenz sicherzustellen; Bei Verwendung dieser Attribute müssen Sie auf ihre Auswirkungen auf die Elementgr??e, die Layoutlogik und den Gesamtstil achten, um die mehrsprachige Kompatibilit?t und Professionalit?t von Webseiten zu verbessern.

CSS -Schreibmodi und Textorientierungssteuerung werden h?ufig übersehen, aber sehr kritische Teile des Webseitenlayouts. Vor allem im Umgang mit mehrsprachigen Websites oder Szenarien, in denen vertikaler Text erforderlich ist, macht das Beherrschen dieser Funktionen Ihre Seite flexibler und professioneller.

Was ist Schreibmodus?

writing-mode bestimmt, wie der Textblock auf der Seite flie?t. Standardm??ig verwenden die meisten Browser von links nach rechts, oben zu BOTB (d. H. horizontal-tb ), was für Englisch, Chinesisch und andere Sprachen geeignet ist.

Aber wenn Sie sich mit Sprachen wie Japanisch, Koreanisch oder Mongolisch befassen müssen, die traditionell vertikal geschrieben haben, k?nnen Sie verwenden:

 Schreibmodus: vertikal-rl; /* Zeile vertikal von rechts nach links*//

oder

 Schreibmodus: vertikal-LR; /* vertikal von links nach rechts*//

Nach dieser Einstellung wird der Text im gesamten Element automatisch vertikal, und das Layout wird entsprechend angepasst. Beispielsweise wird die Breite und H?he eines DIV basierend auf der neuen Schreibrichtung neu berechnet.

Gemeinsame Verwendungen:

• Vertikale Texte auf japanischen, koreanischen und traditionellen chinesischen Websites
• ?ndern Sie die horizontale Navigationsleiste in die vertikale Anordnung und beseitigen Sie die Flex- oder Netzeinstellungen
• Passen Sie Inhalte in verschiedenen Sprachen an, wenn Sie PDF -Leser -Schnittstellen erstellen

Text-Orientierung steuert die Ausrichtung eines einzelnen Zeichens

Bei der Verwendung vertical-rl oder vertical-lr bleiben einige Zeichen standardm??ig horizontal angezeigt, z. B. lateinische Buchstaben und Zahlen. Zu diesem Zeitpunkt k?nnen Sie text-orientation werden, um ihre Ausrichtung zu steuern.

Gemeinsame Werte umfassen:

• mixed : Standardwert, lateinische Zeichen werden horizontal gehalten, chinesische Zeichen und andere Ideogramme drehen sich zu vertikal
• upright
• sideways : Das Gesamtcharakter dreht sich um 90 Grad im Uhrzeigersinn und geeignet für die Titelanzeige geeignet

Wenn Sie beispielsweise einen Text m?chten, der mit Englisch und Chinesen gemischt wird, um bei vertikal arrangierterer ordentlicher auszusehen, k?nnen Sie ihn so schreiben:

 .VERTICAL-Text {
  Schreibmodus: vertikal-rl;
  textorientierung: aufrecht;
}

Auf diese Weise werden sie, egal ob es sich um englische Buchstaben oder chinesische Charaktere handelt, in einer einheitlichen vertikalen Richtung pr?sentiert.

Verwenden Sie die Richtung und Unicode-Bidi zusammen

Obwohl es nicht in die direkte Kategorie der Schreibmodi f?llt, ist es h?ufig erforderlich, direction und unicode-bidi in Verbindung mit RTL-Sprachen (rechts nach links) (wie Arabisch und Hebr?isch) zu verwenden.

• direction: rtl; Erm?glicht den Text innerhalb des gesamten Elements von rechts nach links angezeigt werden
• unicode-bidi: bidi-override; Erzwingen Sie überschreibt den bidirektionalen Algorithmus des Browsers, um die konsistente Richtung zu gew?hrleisten

Zum Beispiel:

 .rtl-content {
  Richtung: RTL;
  Unicode-Bidi: Bidi-Override;
}

Diese Kombination ist besonders in internationalen Websites nützlich, insbesondere wenn Benutzer die Textrichtung beim Wechsel von Sprachen dynamisch ?ndern.

Es ist zu beachten, dass RTL -Layout nicht nur eine ?nderung der Textrichtung ist, sondern auch die Stillogik wie Polsterung, Marge, Flex -Anordnung usw. beeinflusst. Es wird empfohlen, sie in Kombination mit CSS -Toolklassen oder BEM -Namensspezifikationen zu verwalten.

Grunds?tzlich ist das. Der Schreibmodus und die Textausrichtung m?gen einfach erscheinen, aber es ist einfach, Kompatibilit?t oder Fehlausrichtungsprobleme in praktischen Anwendungen zu begegnen. Wenn Sie diese Attribute vernünftigerweise verwenden, k?nnen Sie Ihre Webseite anpassungsf?higer und internationaler machen.

Das obige ist der detaillierte Inhalt vonVerst?ndnis von CSS -Schreibmodi und Textorientierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!