CSS/Eigenschaften/Schreib- und Leserichtung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Empfehlung: Die CSS Spezifikation besagt, dass die CSS Eigenschaften direction und unicode-bidi nicht in HTML Dokumenten verwendet werden sollen. Sie sind eigentlich für Autoren von Dokumenttyp-Defintionen (DTD) vorgesehen. Innerhalb eines HTML Dokuments sollen das Attribut dir und das Element bdo genutzt werden.

writing-mode[Bearbeiten]

Mittels der writing-mode Eigenschaft kann gesteuert werden, ob die Schreibrichtung (die Inlineachse) horizontal oder vertikal verläuft. Entsprechend verläuft die Zeilenrichtung (die Blockachse) rechtwinklig dazu. Diese Eigenschaft ist hauptsächlich für die Darstellung von asiatischen Schriften gedacht.

  • Chrome
  • Firefox
  • IE 11
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • horizontal-tb = Die Inlineachse verläuft horizontal entsprechend dem dir-Attribut, die Blockachse von oben nach unten.
  • vertical-rl = Die Inlineachse verläuft vertikal entsprechend dem dir-Attribut, die Blockachse von rechts nach links.
  • vertical-lr = Die Inlineachse verläuft vertikal entsprechend dem dir-Attribut, die Blockachse von links nach rechts.

Das dir-Attribut verwendet auch in den vertikalen Schreibmodi die Werte ltr und rtl. ltr bedeutet „von oben nach unten“ und rtl „von unten nach oben“

direction[Bearbeiten]

Mit der Angabe direction können Sie die Schreibrichtung bei Elementen erzwingen, und abhängig davon auch, in welche Richtung beispielsweise Breitenangaben berechnet werden, oder an welcher Seite überbreite Inhalte mit overflow abgeschnitten werden. Die Schreibrichtung ist vor allem für die Darstellung von Schriftkulturen wie der arabischen und hebräischen gedacht, wo von rechts nach links geschrieben wird.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • ltr = von links nach rechts (bzw. von oben nach unten in einem vertikalen writing-mode)
  • rtl = von rechts nach links (bzw. von unten nach oben in einem vertikalen writing-mode)

Eine Angabe von direction bei Inline-Elementen ist nur möglich, wenn mittels der unicode-bidi Eigenschaft ein zusätzlicher Ausrichtungskontext geschaffen wird.


Beispiel
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>direction</title>
</head>

<body style="direction:rtl">
   <h1>Hi Junkie!</h1>
   <p>Hier könnte möglicherweise alles anders aussehen als normal ...</p>
</body>
</html>

unicode-bidi[Bearbeiten]

Die unicode-bidi Eigenschaft ermöglicht, den von Unicode festgelegten Ausrichtungsalgorithmus in einzelnen Elementen zu überschreiben. In Inline-Elementen ist eine direction-Angabe nur bei Verwendung eines passenden Wertes für unicode-bidi möglich.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • normal: (Standardwert)
  • embed: ermöglicht das Festlegen einer direction-Angabe für inline-Elemente
  • bidi-override: die Anordnung der Elemente erfolgt strikt gemäß der direction-Eigenschaft
  • isolate: Isoliert die Richtungsberechnungen des Containers von denen im isolierten Element
  • isolate-override: Kombiniert isolate und bidi-override
  • plaintext: ermöglicht die Anzeige von Daten, für die der Unicode-Richtungsalgorithmus bereits separat angewendet wurde.
  • initial:
  • inherit


Weblinks[Bearbeiten]