kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS 3-Feature: Writing-Mode

Die westliche Leserichtung ist bekanntlich von links nach rechts und von oben nach unten. Insbesondere in asiatischen und arabischen Ländern wird hingegen oft von rechts nach links geschrieben und gelesen. Ebenso gibt es Kulturen in denen die Zeilen von oben nach unten verlaufen. CSS 3 ermöglich nun endlich diese Textdarstellung.
In diesem Beitrag beschreibe ich Funktionsweise und praktische Anwendung des CSS 3-Features "writing-mode".

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

CSS-Attribut & Werte

Der Textfluss wird mit dem Attribut "writing-mode" beeinflusst. Dort können dann verschiedene Werte angegeben werden. Die folgende Liste fasst diese kurz zusammen:

lr-tb
Textfluss: left → right → top → bottom. Wird verwendet für lateinische, griechische, kyrillische und viele andere Sprachsysteme.
rl-tb
Textfluss: right → left → top → bottom. Wird verwendet in arabischen und hebräischen Sprachsystemen.
tb-rl
Textfluss: top → bottom → right → left. Wird verwendet von ost-asiatischen Sprachsystemen.
tb-lr
Textfluss: top → bottom → left → right. Wird im mongolischen Sprachsystem verwendet.

Entsprechend der möglichen Angaben wird der Code wie folgt verwendet. Der HTML-Code bleibt selbstverständlich unverändert.


p {
 writing-mode: rl-tb;
}

Aktueller Browser-Support

Soweit ich informiert bin, unterstützt aktuell KEIN Browser diese CSS Eigenschaft. Einzig der Internet Explorer 8 Beta 2 wird mit dem Microsoft-Präfix "-ms-writing-mode" (nicht das Minus am Anfang vergessen!) dieses Attribut anzeigen. Das folgende Beispiel können daher nur Internet Explorer 8 User sehen.

Hier steht der Text.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

1 Kommentar

  1. Markus

    Verfasst am 31. Dezember 2008 um 10:38 Uhr.

    na dann abwarten und Tee trinken bis alle Browser es können :)
    aber trotzdem danke für den tip

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.