Ausführliche Erläuterung der Verwendung des CSS-Textlayoutattributs für den 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 im -Objekt 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 dem Inhaltsblock des Objekts inhärente Schreibrichtung 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 Auswirkungen 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.

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;   
}

Der HTML-Code lautet wie folgt:

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

Wir können das vertikale Layout antiker Poesie sehen!

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung des CSS-Textlayoutattributs für den Schreibmodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!