9.6 Vertical text

• One way to produce vertical text is to rotate the text using a transform.
  transform="rotate(90)"
  This works everywhere, but it rotates the entire text as a graphic.
• A more “text-native” way is to use modern writing modes (instead of depracated tb): set writing-mode
  
  • writing-mode: vertical-rl
    Let the text flow vertically from top to bottom, horizontally from right to left
  • writing-mode: vertical-lr
    Let the text flow vertically from top to bottom, horizontally from left to right
  Note: For svg it doesn't matter: vertical-rl and vertical-lr work the same, no visible effect. The only reason both exist in SVG is for consistency with CSS.
• To control whether glyphs stay upright or rotate in vertical text, use text-orientation (instead of obsolate and ignored by browsers glyph-orientation-vertical):
  - text-orientation: mixed; (commonly default; Latin may rotate sideways)
  - text-orientation: upright; (forces letters upright in a vertical column)

Example 1. Vertical-rl vs vertical-lr in CSS and html5

<div style="writing-mode: vertical-rl;
            height: 150px;
            border: 1px solid red;
            padding: 10px;
            color: red;">
    <p>First line</p>
    <p>Second line</p>
    <p>Third line</p>
</div>

<div style="writing-mode: vertical-lr;
            height: 150px;
            border: 1px solid blue;
            padding: 10px;
            color: blue;">
    <p>First line</p>
    <p>Second line</p>
    <p>Third line</p>
</div>

Example 2. Vertical text in SVG

<text x="30" y="20" style="writing-mode: vertical-rl;">vertical-rl</text>
<text x="100" y="20" style="writing-mode: vertical-lr;">vertical-lr</text>
<text x="170" y="20" style="writing-mode: vertical-rl; text-orientation: upright;">upright</text>