SVG and Typography: Characters
by Fabio Arciniegas A. | Pages: 1, 2, 3

Encodings

Since we talk about including non-Latin characters directly in SVG we must talk of encodings. I'm confident you know XML documents can be written in a variety of encodings such as US-ASCII, UTF-8, and ISO-8859-1 and the encoding of your document must match the value specified in the XML declaration (e.g. <?xml version="1.0" encoding="utf-16"?>). The real question for our discussion is: “which encodings are supported by SVG implementations?”, or in other words “which encodings can I reliably use?”

The answer may be affected by the viewer you are expecting to use, but for the sake of portability you should limit to UTF-8, UTF-16, ISO-8859-1, and US-ASCII. These are the encodings supported in versions 2.0 and 3.0 of Adobe's SVG viewer, they are also supported in Batik, and can be reasonably expected in all other future implementations.

Bidirectionality

So far we've used scripts like Latin and Cyrillic which have a left to right direction. It is important to briefly discuss, however, typesetting of scripts written right to left like Arabic or Hebrew, and how to deal with them in mixed-language environments.

The short version of the story is that this is something well handled automatically and a bad idea to tinker with. More precisely, Unicode defines (in section 3.12, page 55 of the 3.0 print copy) a very precise way to deal with directionality which includes an implicit mechanism based on the characters used and the possibility to override it using the characters RLO (right to left override) and LRO (left to right override).

Unicode provisions for directionality are complex and work consistently well in most scenarios. If you should ever need to override the defaults (I don't recommend it even for aesthetic design purposes), the way to do it is via the direction and unicode-bidi properties, as shown in the graphic below:

<?xml version="1.0" encoding="utf-8"?>
<svg width="400px" height="300px" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>  
 
  <text x="10" y="40"
           style="font-family: 'Arial'; font-size:20pt; ">

   <b> Arabic text: يونِكود </b>

 </text>
  <text x="10" y="70"
           style="direction:rtl; unicode-bidi:bidi-override; 
           font-family: 'Arial'; font-size:20pt; ">
   <b>Arabic text: يونِكود </b>
  </text>
  <text x="10" y="100"
           style="font-family: 'Arial'; font-size:20pt; ">

   <b>Arabic text: 
    <tspan style="direction:rtl; unicode-bidi:embed;">يونِكود
    </tspan>/<b>
</text>
</svg>

rasterized version for users without Arabic support

Fig 6. arabic.svg

In the graphic above, the Arabic text is always correctly displayed: in the first line, because the Unicode algorithm automatically displays the Arabic characters right; in the second line because we are forcing everything to go from right to left; and in the third line because we redundantly make a span with an embedded piece of text from right to left.

The moral of the story is to not complicate matters when dealing with bidirectional text unless you really have a reason to override Unicode's solid provisions. To explicitly override the Unicode bidirectionality algorithm in SVG, specify your desired direction (ltr or rtl) and set unicode-bidi to bidi-override.

Other Special Characters

To wrap this section, lets review two other important problems with characters and their issues inside SVG. The types of characters we will discuss are: ligatures and the euro sign

Ligatures

Ligatures are one of the favorite tools used by typographers to make text readable and beautiful. A ligature is a special character that mixes two or three characters like ‘f’ and ‘i’ to produce a more visually appealing combination, in this case ‘fi’.

Depending on the script used you will have different examples of ligatures, but lets assume you are working with latin characters, in which case the most common and important ligatures are the f-ligatures. The f-ligatures are specified in unicode in characters U+FB00 through U+FB05. The following graphic illustrates their use: ff

<?xml version="1.0" encoding="utf-8"?>
<svg width="150px" height="200px" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>  
<g style="font-family: 'Times new roman'; font-size:20pt;">
  <text x="10" y="20">f + f = &#xFB00;</text>

  <text x="10" y="50">f + i = &#xfb01;</text>

  <text x="10" y="80">f + l = &#xfb02;</text>

  <text x="10" y="110">f + f + i = &#xfb03;</text>

  <text x="10" y="140">f + f + l = &#xfb04;</text>

  <text x="10" y="170">f + t = &#xfb05;</text>
</g>
</svg>

Fig 7. ligatures.svg

Unfortunately, as you can see in figure 7, support for ligature characters is limited even in very popular fonts. To correctly display all ligatures you will probably need to use the embedded fonts mechanism as described in the Fonts section.

The Euro Sign

The Euro sign was introduced to Unicode in 1998. Its point is U+20AC, so its hexadecimal numeric reference is € (which displays like this: €).

Avoid using the letter e as a replacement for the Euro Sign in your SVG. Avoid also using the letters EUR as a replacement for €. By using the tspan element you can include the character using a font that supports it, even if the main font you are using doesn't. This technique is illustrated in the graphic below:

<?xml version="1.0" standalone="no"?> 
<svg width="280" height="100">
<defs >
<font id="macswiss" horiz-adv-x="904" ><font-face
    font-family="E-font"
    units-per-em="2048"
    panose-1="2 11 6 4 2 2 2 2 2 4"
    ascent="1854"
    descent="-434"
    alphabetic="0" />
    <missing-glyph horiz-adv-x="1536" 
    d="M256 0V1280H1280V0H256ZM288 32H1248V1248H288V32Z" />

<glyph unicode="€" glyph-name="Euro" horiz-adv-x="1139" 
d="M790 1325Q622 1325 508 1244Q440 1196 385
 1108Q329 1017 319 935H1001L974 801H303Q302 780 
302 761Q302 684 303 669H947L919 535H324Q366 306 526 
210Q641 141 775 141Q962 141 1067 239V33Q942
-25 791 -25Q339 -25 180 351Q148 427 125 535H-28L0 669H105Q102
711 102 760Q102 780 103 801H-28L0 935H116Q178 1261 439 1403Q600 
1491 794 1491Q980 1491 1107 1410L1067 1224Q945 1325 790 1325Z" />

</font>
</defs>

<g style="font-family: FontWithNoEuro; font-size:18;fill:black"> 
<text x="20" y="60"> Only <tspan style="font-family:E-font">&#x20AC;</tspan>29.99!! 
 for a limited time</text> 

</g>
</svg>

Fig 8. euro.svg

This concludes the second part of our exploration of SVG and typography. All the examples from this installment can be downloaded in this zip

The final two articles of this series deal with techniques to make effects on both static and animated type. There is plenty more fun ahead so stay tuned and see your SVG grow.

---

---

2. 
   2004-05-22 09:54:46 Erika