Chapitre 5  Afficher du texte

Extrait

Internationalisation
SVG supporte l'internationalisation avec le codage Unicode et la gestion multilangues grâce à l'élément <switch>.

Encodage Unicode 
Unicode est un standard ISO qui supporte tous les codes de caractères des différentes langues.
Vous êtes sans doute familier avec un encodage tel que "&#160;" qui représente un espace en HTML. 
C'est un code de caractère Unicode. Unicode définit déjà les caractères utilisés par des centaines de langues à travers le monde.
SVG supporte aussi bien ce codage que n'importe quel autre. Il suffit de déclarer le codage retenu dans l'en-tête du document:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
Cette en-tête ne vous permettra pas l'affichage des lettres accentuées comme é, è à …
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
Celle-ci vous permettra de mettre directement les lettres accentuées dans votre contenu texte:

<text x="40" y="50" fill="black" font-size="12" font-family="Verdana">
    Je suis très heureux de pouvoir utiliser des lettres accentuées  

</text>

Restera le problème d'utiliser des caractères spécifiques au langage XML dans un contenu texte comme <, > … qui seraient interprétés comme des débuts ou fins de balises.
Ces lettres devront être codées comme ceci
Pour <, vous devrez utiliser &#60; (décimal) ou &#x003C; (hexadécimal) ou &lt; (prédéfini)
Pour >, vous devrez utiliser &#62; (décimal) ou &#x003E; (hexadécimal) ou &gt; (prédéfini)

Ce qui nous donnera:

<text x="40" y="50"
fill="black" font-size="12" font-family="Verdana">
Je suis très heureux de pouvoir utiliser &lt; et &gt; dans mon texte 
</text>

Nous avons mis dans l'annexe B des tables des caractères les plus utilisés, caractères alphabétiques ou symboles.

L'élément 'switch'

L'élément switch permet qu'à l'affichage du document, un choix soit fait sur le poste client, en fonction de la langue de l'utilisateur par exemple ou des possibilités du visualiseur, pour l'affichage de texte ou d'images.

Avec cet exemple, la bulle affichée sera dans la langue de l'utilisateur.

       

           

Figure 5-19.  L'élément 'switch'

( voir cet exemple comme svg )

<svg width="350" height="300">
<!— bulle -->
  <path transform="translate(-150 -80)"
     
d="M314.669 164.186 C320.812 160.386 324 153.585 324 148.857
    L324 117.286 C324 108.844 313.907 102 301.457 102
    L204.543 102 C192.093 102 182 108.844 182 117.286

    L182 148.857 C182 157.299 192.093 164.143 204.543 164.143
    L285.024 164.143 L276.175 188 z"

    fill="white" stroke="black" stroke-width="3"/>
  <
switch>
    <!— La langue du système est l'allemand
à
    <text systemLanguage="de" x="40" y="50"
fill="black" font-size="12" font-family="Verdana">
     
 
<tspan dy="-5">Die Liebe geht</tspan>
     
  <tspan x="40" dy="20">durch den Magen.</tspan>

     
</text>
    <!— La langue du système est l'anglais 
à
    <text systemLanguage="en" x="40" y="50"
fill="black" font-size="12" font-family="Verdana">
     
  <tspan dy="-5">Love comes</tspan>
     
  <tspan x="40" dy="20">through the stomach.</tspan>
     
</text>
    <!—
La langue du système est le français  à
     
<text systemLanguage="fr" x="40" y="50" fill="black" font-size="12" font-family="Verdana">
     
 
<tspan dy="-5">L'amour va</tspan>
     
 
<tspan x="40" dy="20">par l'estomac.</tspan>
     
</text>
    <!—
La langue du système est l'espagnol à
    <text systemLanguage="es" x="40" y="50" fill="black" font-size="12" font-family="Verdana">
     
  <tspan dy="-5">El amor viene a</tspan>
     
  <tspan x="40" dy="20">traves del estomago.</tspan>
     
</text>
  </
switch>
</svg>

Si votre système est en français, vous verrez la bulle en français.

Ceci montre les possibilités de SVG de produire des documents adaptés à l'utilisateur.
Vous trouverez des informations supplémentaires sur cet aspect à "document RFC": http://www.ietf.org/rfc/rfc3066.txt  
Codes pour les différentes langues: http://www.din.de/gremien/nas/nabd/iso3166ma/codlstp1/index.html