Text in SVG (Writing Direction, Orientation)

By mbystedt on Mar 1, 2014, 12:00:59 AM

Writing Direction

Text is usually written left to right and top to bottom in English. For charts, writing vertically is sometimes necessary. Other languages also have different traditions for writing. The writing-mode attribute enables text in SVG to handle these use cases.

Example 1. A Japanese fortune called a omikuji written traditionally. Firefox does not render properly. (Download)

  <g writing-mode="tb-rl" fill="black" font-size="20" transform="translate(190)">
    <text y="50px" letter-spacing="10px" text-anchor="middle">方角</text>
    <text y="100px">東の方よし</text>
  </g>
  <g writing-mode="tb-rl" fill="black" font-size="14" transform="translate(210)">
    <text y="50px" text-anchor="middle">Direction</text>
    <text y="100px">East is good</text>
  </g>

Code 1. The first fortune. Traditional Japanese is read top to bottom and right to left.

Attribute	Values	Initial	Comments
writing-mode	( lr-tb \| rl-tb \| tb-rl \| lr \| rl \| tb \| inherit )	lr-tb	Sets the writing mode. See below.

The first two letters indicate the writing direction and the last two the flow of lines. Since there is no word-wrap, indicating flow of lines in SVG is only notational. The abbreviations stand for:

lr: left to right
rl: right to left
tb: top to bottom

Glyph Orientation

The above example shows the auto-rotation of glyphs (letters) SVG can do for vertical text. When writing top to bottom in English, rotating the characters saves a lot of space. The Japanese glyphs (kanji) are not auto-rotated as that would save no space and is not done in that language. The glyph-orientation-horizontal and glyph-orientation-vertical attributes are used to specify the glyph rotation.

Example 2. Glyph Orientation. Firefox does not render properly. (Download)

<g fill="blue" font-size="20" writing-mode="tb-rl">
  <text x="370" y="20" glyph-orientation-vertical="auto">auto</text>
  <text x="410" y="20" glyph-orientation-vertical="0">0 degrees</text>
  <text x="450" y="20" glyph-orientation-vertical="90">90 degrees</text>
...

Code 2. Glyph Orientation example.

Attribute	Values	Initial	Comments
glyph-orientation-horizontal	( angle \| inherit )	0	Only applied in horizontal writing mode. Values other than 0, 90, 180, 270 are rounded to nearest value.
glyph-orientation-vertical	( auto \| angle \| inherit )	auto	Only applied in vertical writing mode. 'auto' picks a value which best matches the characters. Values other than 0, 90, 180, 270 are rounded to nearest value.