Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: unicode-bidi, Kategorien: Bildschirm­darstellung (allgemein), Visual formatting model (CSS 2.1), Writing Modes (CSS 3)

Umkehr der Schreibrichtung

Steuert, ob ein Text in der seiner Sprache entsprechenden Schriftrichtung angezeigt wird, oder ob diese umgekehrt wird.

CSS-Eigenschaft: unicode-bidi
KurzbeschreibungWerteStandardwertKategorieHinweis
Umkehr der Schreibrichtung
  • normal
  • embed
  • bidi-override
  • inherit
normal
Allgemein:
Bildschirm­darstellung
CSS 2.1:
Visual formatting model
CSS 3:
Writing Modes
 

Folgendes ist beim Einsatz von unicode-bidi zu beachten:

  • Die Recherche zu unicode-bidi (da in der Praxis noch nie verwendet oder gesehen) hat im Rahmen dieser Referenz die größten Fragen aufgeworfen. Der Vollständigkeit halber ist sie zwar in jeder anderen CSS-Referenz aufgeführt, wird aber gerne als "Laufrichtung von Texten" oder "Textrichtung" beschrieben, was genaugenommen jedoch nicht stimmt.
  • Um unicode-bidi richtig zu begreifen, ist diese Beschreibung in kleinen Schritten aufgebaut. In der Hoffnung, eine brauchbare und verständliche Erklärung anbieten zu können, werden verwandte Eigenschaften in diesem Kontext erklärt:
  • text-align: right richtet Text innerhalb einer Box rechts aus, ohne diesen in seiner logischen Reihenfolge zu verändern, der Text wird von links nach rechts dargestellt, er ist lediglich rechts ausgerichtet, eine rein optische Variation.
  • direction: rtl dreht die Laufrichtung des HTML um. Dies wird im Bespiel Nr. 2 gezeigt. Dort ist "Zelle 1" oder "links" zwar im Quelltext in der Tabelle zuerst notiert, die Zellen der Tabelle werden dann aber von rechts nach links dargestellt.
  • Das Beispiel Nr. 2 zeigt jedoch das Grundverhalten des Browsers. Die Ausspielung des HTML ist zwar umgedreht, die eigentlichen Texte (also beispielsweise "Zelle 1" oder "rechts") sind jedoch, obwohl die "Laufrichtung" umgedreht ist, richtig geschrieben, also von links nach rechts. Auch der Text im Beispiel Nr. 2, der per direction: rtl umgedreht ist, sieht lediglich so aus, als ob er per text-align: right nach rechts ausgerichtet sei.
  • Verantwortlich für dieses Verhalten ist die Bidirektionale Schreibunterstützung (Bidirectional script support, BiDi oder bidi, siehe auch http://de.wikipedia.org: Bidirektionale Texte in Computersystemen).
    Diese erkennt automatisch die Buchstaben des Textes. Anhand der Buchstaben (sog. strong characters) wird die Schreibrichtung ermittelt. Selbst wenn die Laufrichtung per direction: rtl umgedreht ist, bleibt die eigentliche Schreibrichtung richtig. Die bidirektionale Schreibunterstützung erkennt z.B. auch hebräische Texte und stellt diese von rechts nach links dar.
  • unicode-bidi mit dem Parameter bidi-override; setzt dieses Verhalten außer Kraft. Hier wird die Schreibrichtung, die automatisch vom Rechner ermittelt wurde, ignoriert und stumpf umgedreht. Ob das Sinn macht oder nicht. Dieses Verhalten von unicode-bidi ist im Beispiel Nr. 3 zu sehen.
  • Die Eigenschaft wirkt nur im Zusammenhang von direction, ist diese nicht konfiguriert, hat unicode-bidi keine Auswirkung.
Browserunterstützung von unicode-bidi
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu unicode-bidi:



Beispiele

HTML:

<p class="doTextAlign">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
</p>

CSS:

.doTextAlign {
   text-align: right;
   color: blue;
}
/* Hier lediglich ein rechts ausgerichteter Text. */

Beispiel Nr. 1 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<table>
   <tr>
      <td>Zelle 1</td>
      <td>Zelle 2</td>
   </tr>
   <tr>
      <td>links</td>
      <td>rechts</td>
   </tr>
</table>
<p class="doTextRtl">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
</p>

CSS:

table {
   direction: rtl;
   border: 1px solid #ccc;
}
td {
   border: 1px solid #ccc;
   padding: 10px;
}
.doTextRtl {
   direction: rtl;
   color: red;
}
/* Hier werden sowohl Tabelle als auch der Text ein "direction: rtl" zugewiesen.
Die Tabellenzellen werden von rechts nach links ausgespielt, die eigentliche Schreibrichtung bleibt jedoch erhalten.
Der Text selber sieht aus wie rechts ausgerichtet per "text-align: right". */

Beispiel Nr. 2 So sieht's aus:

Zelle 1 Zelle 2
links rechts

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doBidi">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
</p>

CSS:

.doBidi {
   direction: rtl;
   unicode-bidi: bidi-override;
   color: green;
}
/* Hier wird per per bidi-override die zum Text passende Laufrichtung ignoriert.
Der Wert "rtl" muss für "direction" gesetzt sein. */

Beispiel Nr. 3 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

Beispiel Nr. 4 So sieht es aus:

Weitere Beispiele einschließlich hebräischer Schriftzeichen sind in der anhängenden Zip-Datei zu finden. Viel Spaß und Erfolg beim Testen der HTML-Dateien.

Download:

HTML-Quelltexte für text-align, direction und unicode-bidi (ZIP)

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 8.008 sec.

Browser-Marktanteile