SVG/Tutorials/Text/Schreib- und Leserichtung

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Text
Wechseln zu: Navigation, Suche

Text-Info


Mit CSS kann die Schreib- und Leserichtung verändert werden. Damit lassen sich fremdsprachige Texte in anderer Schreibrichtung, aber auch gestalterische Effekte erzielen.[1]

Daneben gab es in SVG entsprechende XML-Attribute, die aber teilweise nicht von allen Browsern unterstützt wurden. Dieser Artikel zeigt direkt einsetzbare Beispiele, die in allen Browsern laufen.

Laufrichtung[Bearbeiten]

Mit der Eigenschaft direction (analog der CSS-Eigenschaft: direction) können Sie die Laufrichtung von Text beeinflussen. (Eine Angabe des HTML-Universalattributs dir ist in SVG nicht möglich!)

Folgende Angaben sind möglich:

  • ltr: (Standardwert) von links nach rechts
  • rtl: von rechts nach links

Um eine Festlegung von direction zu ermöglichen, muss die Eigenschaft unicode-bidi gesetzt werden.

Folgende Angaben sind möglich:

  • normal: (Standardwert)
  • ltr: bidi-override (überschreibt vorgegebene Laufrichtung)
Änderung der Laufrichtung ansehen …
  <text x="210" y="30" direction="rtl" unicode-bidi="bidi-override">
    andersrum!
  </text>
  <text x="260" y="100" direction="rtl" unicode-bidi="bidi-normal">
    andersrum!
  </text>

Beachten Sie das Ausrufezeichen im unteren Text. Mit unicode-bidi: bidi-normal ändern die Satzzeichen, aber nicht die Buchstaben ihre Laufrichtung.

writing-mode[Bearbeiten]

Mit dem writing-mode-Attribut können Sie die Laufrichtung eines Textes verändern bzw. dessen Grundlinie neu ausrichten. Dies ist bei manchen Sprachen wie Hebräisch und Arabisch (rechts nach links) oder asiatischen Sprachen (von oben nach unten) wichtig.

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

In SVG1 waren folgende Angaben möglich, sind aber heute obsolet:

  • lr: (Standardwert) von links nach rechts
  • rl: rechts nach links
  • tb: von oben nach unten

In SVG2 sind die Werte aus CSS übernommen worden:

  • 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.

Deshalb muss für die Dastellung linksläufiger Schriften nun die bereits oben erwähnte direction-Eigenschaft verwendet werden:

writing-mode und direction ansehen …
<text x="340" y="70" class="rl" lang="he">
	סאלפהטמל
</text>
<text x="340" y="100" class="rl">
	right-to-left
</text>
<text x="20" y="40" class="tb">
	top-bottom
</text>
<text x="50" y="40" class="tb" lang="zh">		
	欢迎来到 2021 年!
</text>
Die Textelemente erhalten Klassen und Sprachangaben mit einem lang-Attribut.
.lr {
	writing-mode: horizontal-tb;
}

.rl {
	direction: rtl;
}
.tb {
	writing-mode: tb;
}

Die linksläufige hebräische Schrift wird mit der direction-Eigenschaft, der chinesische Satz mit der writing-mode-Eigenschaft formatiert.

Orientierung[Bearbeiten]

Mit den obsoleten glyph-orientation-horizontal- (bei writing-mode:lr bzw. rl) und glyph-orientation-vertical-Attributen (bei writing-mode:tb) konnten Sie bei geänderter Laufrichtung die einzelnen Zeichen entsprechend drehen. Dabei waren als Werte die Gradzahlen 0, 90, 180, 270 möglich. Andere Angaben werden auf den nächsten zulässigen Wert aufgerundet.

  • Achtung
  • SVG 1.1

Im Firefox wurde dies nie implementiert. Stattdessen gibt es mittlerweile die text-orientation-Eigenschaft, die aber nur eine Drehung um 90° vorsieht:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
.vertical {
  writing-mode: vertical-rl;
	fill: #c32e04; /*red */
}
.upright {
	text-orientation: upright;
	fill: none;
	stroke: #5a9900; /*green*/
	stroke-width: 1;
}

Der Text mit der Klasse .vertical erhält mit writing-mode eine Laufrichtung von oben nach unten - die Ausrichtung der Buchstaben bleibt jedoch erhalten.

Der Text mit der Klasse upright wird nun mit text-orientation: upright so gedreht, dass die Laufrichtung vertikal, die Ausrichtung der einzelnen Buchstaben aber horizontal ist.

Weblinks[Bearbeiten]

  1. W3C: Structural markup and right-to-left text in HTML