SVG Text Layout And Alignment

Posted: 17 Nov 2015 05:30 AM PST

At the start of this series on SVG text I mentioned font tables. I said that certain alignment details for rendering a font's glyphs were contained inside those tables. I also mentioned at some point in the series we'd see how we could alter some of this information

When you position SVG text, the default is to display the left edge of the EM box and the baseline of the character at the position you specify. Both can be adjusted.

However, before we get to those adjustments let's talk about how we might display SVG text for international fonts. SVG includes support for international writing directions and we can change the default direction.

Writing Modes in SVG

You can use the writing-mode property to change the inline direction from the default, which is left-to-right. You can set the text to display either right-to-left or top-to-bottom instead.

It works like the css writing-mode property which does the same thing. In SVG, writing-mode is an attribute with the following values.

lr-tb | lr — either sets direction as left to right (default)
rl-tb | rl — either sets direction as right to left
tb-rl | tb — either sets direction as top to bottom

The values above show there are two ways to set the specific value you want depending on which direction you want the text to flow. I'll stick to the two character values and save the extra bit of typing.

As always let's start with an example and build on it. I created an SVG element, set the viewport size, gave it an outline, bumped up the font-size, and set the overflow to visible in case any text renders outside of the viewport.

1  2  3

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="300" y="100" writing-mode="tb">SVG</text>    </svg>

I set the writing-mode as tb or top to bottom and you can see the text flows vertically, though the characters are now rendered on their sides.

Unfortunately I haven't been able to get a left-to-right writing-mode working at all. The values I showed for writing-mode have been deprecated for everything other than SVG, though they should still work with SVG.

There's a different set of values if you want to use the CSS writing-mode property, though the values don't include a right-to-left direction.

Regardless of my issues you should be able to set the writing-mode so it renders right-to-left using either rl or rl-tb as the writing-mode value.

Let's get back to the example again and note that while the text was rendered from top to bottom, the characters are also rotated 90 degrees. You might think the solution is to use the SVG rotate attribute and set them back.

1  2  3

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="300" y="100" writing-mode="tb" rotate="-90">SVG</text>    </svg>

I added a rotation of –90, which does rotate the characters so they're upright, but as you can see it doesn't look quite right.

Let's try something else.

Glyph Orientation

You can rotate individual characters with either of the two glyph orientation properties.

glyph-orientation-horizontal — when writing-mode is left-to-right or right-to-left.
glyph-orientation-vertical — when writing-mode is top-to-bottom.

The values of both are limited to 0, 90, 180, and 270.

1  2  3

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="300" y="100" writing-mode="lr" glyph-orientation-horizontal="90">SVG</text>    </svg>

Here I set writing-mode to its default left to right and changed glyph-orientation-horizontal to 90. Each character is now rotated 90 degrees.

Let's fix the problem we encountered with top-to-bottom writing-mode in the last section using glyph-orientation-vertical.

1  2  3

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="300" y="100" writing-mode="tb" glyph-orientation-vertical="0">SVG</text>    </svg>

Note that 0 is the value to get the characters to sit upright, which may or may not be what you expect.

I'll let you experiment with the other values. This probably isn't something you'll use in practice a lot unless you often use a writing-direction of top-to-bottom as some Eastern Asian languages do.

Then again, it's possible you just want to get creative and play with different writing-modes and glyph orientations.

The text-anchor Property

By default when you position SVG text the position you specify is aligned with the left edge and the baseline of the text.

One property you may find useful is the text-anchor property, which lets you align text horizontally at the start, middle, or end of the EM box.

Here's an example comparing all three values. I set three lines of the same text at different y-coordinates. All three lines have an x-coordinate of 0 so we can see how they render against the left edge of the viewport.

1  2  3  4  5

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="0" y="60" text-anchor="start">SVG</text>      <text x="0" y="100" text-anchor="middle">SVG</text>      <text x="0" y="140" text-anchor="end">SVG</text>    </svg>

I set the text-anchor of each to the three different values. You can probably tell by looking which line of text has which value set, but the order from top to bottom is start, middle, end.

There are also some properties for adjusting SVG text along the baseline, but let's save those for next week.

Closing Thoughts

The writing mode of SVG text can be changed from its default left-to-right orientation to display either right-to-left or top-to-bottom. While I've been able to get the latter working, I haven't had much success with the former.

When the writing-mode is changed from top-to-bottom, the glyphs are rotated with the line of text. If you want to rotate the glyphs in any writing-mode you can use either glyph-orientation-horizontal or glyph-orientation-vertical, depending on the writing-mode being used.

Finally if you want to change where the EM box around a glyph is aligned you can set the text-anchor property to either start, middle, or end.

Next week I'll cover baseline alignment of SVG text.v

Download a free sample from my book Design Fundamentals.

The post SVG Text Layout And Alignment appeared first on Vanseo Design.