Zum Inhalt springen
Aback Tools Logo

Schreibmodus-Tester

Testen Sie, wie Text in verschiedenen CSS-Schreibmodi, Richtungen und Textausrichtungen dargestellt wird. Wählen Sie zwischen horizontal-tb, vertical-rl und vertical-lr, wechseln Sie zwischen LTR- und RTL-Richtung und legen Sie die Textausrichtung für vertikale Layouts fest. Geben Sie eigenen Text ein oder nutzen Sie ein Beispiel, passen Sie die Schriftgröße an und sehen Sie eine Live-Vorschau mit kopierbarer CSS-Ausgabe. Vollständig privat, 100% kostenlos und ohne Anmeldung.

Writing Mode Tester

Test how text renders in different CSS writing modes, directions, and text orientations. Preview horizontal, vertical-RTL, and vertical-LTR layouts with custom text and font sizes.

Text flows horizontally from left to right (or right to left with RTL). Lines flow from top to bottom. This is the default writing mode for most languages.

Preview

writing-mode: horizontal-tb; direction: ltr;
The quick brown fox jumps over the lazy dog. Writing modes change how text flows across the page.
.writing-mode-demo {
  writing-mode: horizontal-tb;
  direction: ltr;
  font-size: 18px;
}

Warum unseren Schreibmodus-Tester verwenden?

  • Alle Schreibmodi nebeneinander testen: Vergleichen Sie die CSS-Schreibmodi horizontal-tb, vertical-rl und vertical-lr sofort. Die Vergleichsansicht zeigt alle drei Modi gleichzeitig, sodass Sie genau sehen, wie Ihr Text in jedem Layout dargestellt wird, ohne hin- und herzuschalten.
  • Unterstützung für LTR- und RTL-Richtung: Testen Sie Text sowohl in Links-nach-rechts- (LTR) als auch in Rechts-nach-links-Richtung (RTL). Wechseln Sie mit einem Klick zwischen den Richtungen, um zu sehen, wie Ihr Inhalt für verschiedene Sprachgruppen fließt, darunter arabische, hebräische und persische Schriften.
  • 100% private Verarbeitung im Browser: Alle Schreibmodus-Vorschauen werden vollständig in Ihrem Browser mit nativem CSS gerendert. Ihr Text wird niemals an einen Server gesendet, niemals gespeichert und nirgendwohin übertragen. Ihr Inhalt bleibt vollständig privat.
  • Für immer kostenlos, ohne Anmeldung: Testen Sie unbegrenzt viele Schreibmodus-Kombinationen kostenlos. Keine Premium-Stufen, keine Nutzungslimits, keine versteckten Kosten. Nutzen Sie den Schreibmodus-Tester für private oder kommerzielle Projekte, ohne ein Konto zu erstellen.

Häufige Anwendungsfälle des Schreibmodus-Testers

  • Design mehrsprachiger Websites: Entwerfen Sie Layouts, die horizontale und vertikale Schriftsysteme unterstützen. Testen Sie, wie Ihr japanischer, chinesischer oder koreanischer Inhalt im vertical-rl-Modus neben Ihrem englischen Inhalt im horizontal-tb-Modus fließt, für wirklich internationale Webdesigns.
  • Entwicklung von RTL-Layouts: Entwickeln und testen Sie Rechts-nach-links-Oberflächen (RTL) für arabische und hebräische Websites. Wechseln Sie schnell zwischen LTR- und RTL-Richtung, um zu prüfen, ob Ihr Layout Navigation, Textausrichtung und Lesereihenfolge korrekt spiegelt.
  • UI-Komponententests für vertikalen Text: Testen Sie, wie UI-Komponenten wie Schaltflächen, Labels, Navigationsmenüs und Sidebar-Titel aussehen, wenn sie mit vertikalen Schreibmodi gerendert werden. Stellen Sie vor dem Produktivgang korrekte Abstände, Ausrichtung und Lesbarkeit sicher.
  • Digitales Publizieren und E-Books: Sehen Sie in der Vorschau, wie digitale Publikationen und E-Books in vertikalen Schreibmodi dargestellt werden. Testen Sie Inhalte mit gemischten Schriften aus Japanisch, Chinesisch und Englisch, um korrekte Textausrichtung und Lesefluss in verschiedenen Layouts zu gewährleisten.
  • Typografische Forschung und Bildung: Lernen und vermitteln Sie die Unterschiede zwischen CSS-Schreibmodi, Textausrichtungen und Richtungswerten. Sehen Sie Echtzeit-Visualisierungen, wie jede Eigenschaft das Textlayout verändert, ideal für CSS-Unterricht und Typografie-Workshops.
  • CSS-Codegenerierung für die Produktion: Erzeugen Sie saubere, produktionsreife CSS-Snippets für Ihre Schreibmodus-Implementierungen. Sobald Sie die perfekte Kombination gefunden haben, kopieren Sie die CSS-Eigenschaften mit einem Klick direkt in Ihre Stylesheets.

Was sind CSS-Schreibmodi?

CSS-Schreibmodi definieren die Richtung, in der Text auf einer Webseite fließt. Die CSS-Eigenschaft writing-mode steuert, ob Text horizontal (von links nach rechts) oder vertikal (von oben nach unten) verläuft. In Kombination mit den Eigenschaften direction und text-orientation ermöglichen Schreibmodi die vollständige Unterstützung der vielfältigen Schriftsysteme der Welt - von Englisch und Arabisch bis Japanisch und Mongolisch - innerhalb eines einzigen Webseiten-Layouts.

So funktioniert unser Schreibmodus-Tester

  1. Wählen Sie einen Schreibmodus: Wählen Sie aus den drei CSS-writing-mode-Werten - horizontal-tb (standardmäßiges horizontales Layout), vertical-rl (vertikal von rechts nach links, traditionell ostasiatisch) oder vertical-lr (vertikal von links nach rechts, moderne oder mongolische Schrift).
  2. Richtung und Ausrichtung konfigurieren: Legen Sie die Textrichtung auf LTR oder RTL fest und wählen Sie für vertikale Modi die Textausrichtung - mixed (Standard), upright (alle Zeichen bleiben vertikal) oder sideways (alle Zeichen gedreht).
  3. Vorschau und Kopieren: Geben Sie eigenen Text ein oder verwenden Sie ein Beispiel, passen Sie die Schriftgröße an und sehen Sie die Live-Vorschau. Der CSS-Ausgabeblock zeigt den vollständigen Eigenschaftssatz, bereit zum Kopieren in Ihre Stylesheets.

Wichtige CSS-Eigenschaften erklärt

  • writing-mode: die Haupt-Eigenschaft, die die Blockflussrichtung festlegt. horizontal-tb ist der Standard für die meisten Sprachen. vertical-rl lässt Text von oben nach unten mit Zeilen von rechts nach links fließen. vertical-lr lässt ihn von oben nach unten mit Zeilen von links nach rechts fließen.
  • direction: steuert die Inline-Grundrichtung (ltr oder rtl). In vertikalen Modi beeinflusst direction die Reihenfolge der Zeilen statt der Zeichen. Unerlässlich für die Unterstützung von Arabisch und Hebräisch.
  • text-orientation: gilt nur in vertikalen Schreibmodi. mixed (Standard) dreht lateinische und kyrillische Zeichen um 90°, während CJK-Zeichen aufrecht bleiben. upright hält alle Zeichen in ihrer normalen Ausrichtung. sideways dreht alle Zeichen um 90°.

Datenschutz, Sicherheit und Verfügbarkeit

Alle Schreibmodus-Vorschauen werden vollständig in Ihrem Browser mit nativem CSS gerendert. Ihr Text verlässt niemals Ihr Gerät - er wird nicht an einen Server gesendet, nicht gespeichert und nicht übertragen. Der Schreibmodus-Tester ist völlig kostenlos, ohne Anmeldung, ohne Nutzungslimits und ohne Premium-Funktionen. Testen Sie unbegrenzt viele Schreibmodus-Kombinationen für private oder kommerzielle Projekte.

Häufig gestellte Fragen

Ein CSS-Schreibmodus-Tester ist ein browserbasiertes Tool, mit dem Sie die Darstellung von Text in verschiedenen CSS-Schreibmodi, Richtungen und Textausrichtungen in der Vorschau betrachten können. Unser Schreibmodus-Tester unterstützt alle drei writing-mode-Werte (horizontal-tb, vertical-rl, vertical-lr), die Richtungen LTR und RTL sowie text-orientation-Werte (mixed, upright, sideways) mit Live-Vorschau und kopierbarer CSS-Ausgabe.

Wählen Sie einen Schreibmodus aus den drei Optionen (horizontal-tb, vertical-rl, vertical-lr), wählen Sie eine Richtung (LTR oder RTL) und für vertikale Modi eine Textausrichtung (mixed, upright, sideways). Geben Sie eigenen Text ein oder klicken Sie auf eine Beispieltext-Schaltfläche, passen Sie die Schriftgröße an und die Live-Vorschau aktualisiert sich sofort. Aktivieren Sie die Vergleichsansicht, um alle drei Modi nebeneinander zu sehen.

Traditionelles Japanisch, Chinesisch (Traditionell) und Koreanisch sind die wichtigsten Sprachen, die vertikale Schreibmodi (vertical-rl) verwenden. Im vertikalen Layout fließt der Text von oben nach unten, und die Zeilen verlaufen von rechts nach links. Moderne ostasiatische Typografie mischt oft horizontale und vertikale Schrift, und CSS-Schreibmodi handhaben beide nahtlos mit einer einzigen Eigenschaftsänderung.

Ja. Alle Schreibmodus-Vorschauen werden vollständig in Ihrem Browser mit nativem CSS gerendert. Ihr Text wird niemals auf einen Server hochgeladen, niemals gespeichert und niemals übertragen. Der Schreibmodus-Tester verarbeitet alles lokal auf Ihrem Gerät für vollständige Privatsphäre und Datensicherheit.

text-orientation: mixed (der Standard) dreht lateinische und kyrillische Zeichen um 90° im Uhrzeigersinn, während CJK-Zeichen in ihrer normalen Leseausrichtung aufrecht bleiben. text-orientation: upright erzwingt, dass alle Zeichen in ihrer normalen aufrechten Ausrichtung ohne Drehung angezeigt werden, was lateinischen Text schwerer lesbar machen kann, aber das natürliche Erscheinungsbild von CJK-Zeichen bewahrt.

Ja. Die CSS-Ausgabe verwendet Standardeigenschaften, die gut unterstützt werden: writing-mode, direction und text-orientation. Alle modernen Browser unterstützen diese Eigenschaften. Kopieren Sie einfach das CSS-Snippet oder den Inline-Style und fügen Sie es direkt in Ihre Stylesheets ein, um es sofort in Produktions-Webprojekten zu nutzen.

Ja. Der Schreibmodus-Tester ist zu 100% kostenlos, ohne Anmeldung, ohne Premium-Funktionen und ohne Nutzungslimits. Testen Sie unbegrenzt viele Schreibmodus-Kombinationen ohne Einschränkungen oder versteckte Kosten. Es gibt keine Werbung, die die Oberfläche blockiert.

Die Vergleichsansicht zeigt alle drei Schreibmodi - horizontal-tb, vertical-rl und vertical-lr - in einem dreispaltigen Layout. Jede Spalte zeigt die CSS-Eigenschaftsbezeichnung und eine Beschreibung des Modus. So lässt sich leicht vergleichen, wie derselbe Text in jedem Layout unterschiedlich dargestellt wird, was Ihnen hilft, den besten Schreibmodus für Ihren Inhalt zu wählen.