Detaillierte Erläuterung der Verwendung des Textlayout-Attributs „Schreibmodus“ von CSS

Der Schreibmodus wird häufig verwendet, um die vertikale Anordnung von Text auf der Seite zu realisieren. Hier werfen wir einen systematischen Blick auf die Methode zur Verwendung des Textlayout-Attributs für den Schreibmodus von CSS, einschließlich eines Beispiels aus einem alten Gedicht Demonstrieren Sie die vertikale Anordnung von Text im Schreibmodus.

Syntax:

writing-mode : lr-tb | tb-rl

/* 关键字值 */
writing-mode: horizontal-tb;    /* 默认值 */
writing-mode: vertical-rl;   
writing-mode: vertical-lr;

/* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */
writing-mode: inherit;   
writing-mode: initial;   
writing-mode: unset;

lr-tb: Standardwert . Der Inhalt des Objekts fließt horizontal von links nach rechts, wobei die nächste Zeile unter der vorherigen Zeile liegt. Alle Glyphen sind vertikal und nach oben gerichtet. Dieses Layout wird in romanischen Sprachen verwendet

tb-rl: oben-unten, rechts-links. Der Inhalt eines Objekts fließt vertikal von oben nach unten und von rechts nach links. Die nächste vertikale Reihe befindet sich links von der vorherigen vertikalen Reihe. Zeichen voller Breite zeigen vertikal nach oben und Zeichen halber Breite wie lateinische Buchstaben oder Katakana werden um 90 Grad im Uhrzeigersinn gedreht. Dieses Layout wird häufig in ostasiatischen Sprachen verwendet.

Beschreibung:
Legt die inhärente Schreibrichtung des Inhaltsblocks des Objekts fest oder ruft sie ab. Westliche Sprachen verwenden tatsächlich die Schreibweise von links nach rechts und von oben nach unten. Aber asiatische Sprachen haben oft einen Auf-Ab-Rechts-Links-Schreibstil.
Wenn sich der Wert dieses Attributs ändert, ändern sich auch die Funktionen des text-align-Attributs und des Vertical-align-Attributs.
Stylesheet-Eigenschaften sind für die folgenden Elemente nicht vererbbar:
BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA

Die Wirkung dieses Attributs ist nicht kumulativ. Wenn beispielsweise der Wert dieser Eigenschaft des übergeordneten Objekts auf tb-rl festgelegt ist, führt das Festlegen des Werts dieser Eigenschaft des untergeordneten Objekts auf tb-rl nicht zu einer Drehung des untergeordneten Objekts.
Wenn die Schreibmoduseigenschaft des Objekts anders eingestellt ist als die seines übergeordneten Objekts, erhält es sein eigenes Layout. Die Breite eines solchen Objekts wird anhand der Höhe seines ersten angeordneten übergeordneten Objekts bestimmt.
Wenn Sie Objekte mit unterschiedlichen Schreibmodus-Eigenschaftswerten verwenden, erhalten Sie durch die Angabe bestimmter Größen für jedes Objekt eine bessere Gesamtkontrolle über deren Layout.
Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar.
Die entsprechende Skriptfunktion ist writingMode.

Ein Beispiel für vertikales Textlayout:

.verticle-mode {   
    writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl;         
    writing-mode: vertical-rl;   
}   
/* IE7比较弱，需要做点额外的动作 */
.verticle-mode {   
    *width: 120px;   
}   
.verticle-mode h4,   
.verticle-mode p {   
    *display: inline;   
    *writing-mode: tb-rl;   
}   
.verticle-mode h4 {   
    *float:rightright;   
}

HTML lautet wie folgt:

<p class="verticle-mode">
    <h4>咏柳</h4>
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>
</p>

Wir können uralt sehen Poesie Es ist vertikal angeordnet!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Textlayout-Attributs „Schreibmodus“ von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!