Richtung - CSS-Tricks

Anonim

Die directionEigenschaft in CSS legt die Richtung des Inhaltsflusses innerhalb eines Elements auf Blockebene fest. Dies gilt für Text-, Inline- und Inline-Block-Elemente. Außerdem werden die Standardausrichtung von Text und die Richtung festgelegt, in die Tabellenzellen innerhalb einer Tabellenzeile fließen.

.main-content ( direction: rtl; /* Right to Left */ )

Die gültigen Werte sind:

  • ltr - Die Standardeinstellung von links nach rechts
  • rtl - Rechts nach links
  • inherit - erbt seinen Wert vom übergeordneten Element

Der Text auf dieser Seite ist in der Standardrichtung festgelegt ltr. Der am häufigsten festgelegte Anwendungsfall rtlsind Webseiten mit hebräischem oder arabischem Text. Hier ist ein Beispiel für Arabisch in RTL:

طهيس يس تآخت تهات يس وريتتآن فروم ريغت ل لآفت تهات يس وسآد

Es gibt auch ein HTML-Attribut zum Festlegen der Richtung:

Sowohl die CSS-Eigenschaft als auch das HTML-Attribut kaskadieren die Richtung zu absteigenden Elementen. Es wird empfohlen, das HTML-Attribut zu verwenden, da dies auch dann funktioniert, wenn CSS fehlschlägt oder die Seite aus irgendeinem Grund nicht beeinflusst.

Es gibt auch ein bestimmtes HTML-Tag, mit dem die Textrichtung geändert werden kann : das bidirektionale Überschreibungselement. Dies ist vorhanden, sodass nur für diesen Zweck ein semantikfreies Element verwendet werden kann. Zum Beispiel:

This text will go left to right. This text will go right to left.

Um all dies mit CSS zu koppeln…

*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )

"Bidi" = "bidirektional"

Beim Erstellen von Layouts in einer Pre-Flexbox-Pre-Grid-Welt wurde häufig zwischen Floats und Inline-Blocks gewählt, um Spalten zu erstellen. Ein Vorteil des Inline-Blocks ist, dass das Ändern der Richtungseigenschaft auch das Layout umkehrt, abgesehen davon, dass der Float nicht mehr gelöscht werden muss. Dies gilt nicht für Floats, die zurückgesetzt werden müssten, wenn eine Webseite mehrere Sprachen unterstützt und die Sprachrichtung von ltr nach rtl oder umgekehrt geändert wird.

Wenn Sie die Richtung eines Inline-Elements ändern müssen (gegenüber dem übergeordneten Element auf Blockebene), müssen Sie entweder das Element verwenden oder sicherstellen, dass das Inline-Element die Unicode-Bidi-Eigenschaft ordnungsgemäß festlegt:

Some regular text reverse direction text text reverse direction
span(dir) ( unicode-bidi: bidi-override; )

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
2.0+ 1.3+ Irgendein 9.2+ 5,5+ Irgendein 3.1+