Rassurez-vous tout de suite, la gestion du texte en SVG est ultra-simple. Pour la bonne raison qu’un glyphe (ou une lettre, mais dans notre cas on ne parlera que de glyphe) est un objet graphique… comme un autre ! Concrètement, ça veut dire que vous pouvez styler du texte comme vous l’avez déjà fait avec les rectangle, cercle, polygone et autres formes SVG. Voilà, ceci étant dit, le chapitre est presque terminé !
En fait, il y a encore quelques notions à voir. Par exemple, les propriétés CSS. De celles que l’on a déjà parlé, on peut appliquer les suivantes :
Sympa, non ? Et pour ceux qui connaissent déjà les propriétés de police CSS2.1, la suite va être encore plus facile. Pour les autres, voici la liste des propriétés CSS qu’on peut appliquer au texte, avec leur description :
Les connaisseurs me diront qu’il y en a surement d’autres, et ils auront raison. Nous les verrons en temps voulu.
Vous l’aviez sans doute deviné, la balise qui permet d’inclure du texte s’appelle text. Elle accepte entre autres les attributs x et y qui définissent le point de départ du texte.
Rien de bien compliqué, sauf lorsqu’il s’agit de centrer du texte ! Comme vous l’avez vu, les coordonnées de la ligne trois (le grand 3) n’indique pas qu’il y a centrage. J’ai donc du tatonner avant de trouver les bonnes coordonnées. Heureusement, CSS permet de centrer tout ça très facilement.
Pour centrer du texte, nous allons utiliser deux propriétés CSS : text-anchor et baseline-shift.
La première permet de spécifier l’alignement (début, milieu ou fin) par rapport au coordonnées de la balise text. Elle peut prendre trois valeur : start (valeur par défaut) qui permet d’aligner les coordonnées avec le début du texte, middle qui permet l’alignement avec le milieu du texte (le processeur SVG s’occupe des calculs) et la valeur end grâce à laquelle on pourra spécifier que c’est la fin du texte qui doit être aligné avec les coordonées anoncées.
Un exemple classique :
Vous verrez que cette propiété est très utile ! Maintenant, on peut se demander ce qu’il en est avec le centrage vertical. C’est un peu plus compliqué. On doit utiliser la propriété baseline-shiht qui prend comme paramètre soit les mots-clefs baseline (valeur par défaut), sub (pour mettre le texte en indice) et super (pour le mettre en exposant), soit en pourcentage, soit dans une autre unité. C’est la dernière possibilité qui va nous intéresser. En effet, vous savez que l’on peut utiliser les unités de polices relatives : les em et les ex.
Cette propriété ne s’applique pas directement à l’élément text. En effet, baseline-shiht permet de décaler la ligne de base du texte sur lequel il est appliqué par rapport au parent. Il faut donc envelopper le texte que l’on souhaite dans un tspan qui sera décalé par rapport au text parent.
Le principal problème que vous rencontrerez est que le centrage vertical du texte est plus compliqué que le centrage horizontal. En effet, si vous mettez 0,5 em, le texte semblera beaucoup trop décalé vers le bas. En fait, il vaut mieux spécifier 0,5 ex, car la plupart des glyphes ont la taille du x.
Le ex est une unité relative au texte et 1 ex vaut la hauteur de la lettre « x ».
À l’instar d’XHTML, il existe en SVG une balise tspan qui permet de désigner une portion de texte. On peut y indiquer les attributs id et class afin de styler une portion de texte en particulier. Par exemple :
Le nom des classes devrait toujours être choisi en tenant compte de la fonction de cette classe et non pas en fonction du rendu visuel. J’aurais pu appelé cette classe matar ou gras, mais le rajout d’un autre texte avec cette même classe aurait pu devenir illogique (par exemple, le texte « vivre » avec une classe matar). Dans le cas ci-dessus, la classe strong a été choisi parcequ’elle indique du texte important, en référence à l’élément XHTML strong.
Cet élément accepte aussi les attributs x et y, ce qui peut s’avérer très utile pour écrire du texte multiligne. En effet, SVG 1.1 n’offre pas de mécanisme pour faire cela automatiquement (c’est prévu dans WD (Working Draft) SVG 1.2). Faisons un peu de poésie :
On aurait bien sur pu écrire plusieurs balises text, une pour chaque ligne, mais ça n’aurait pas été correct d’un point de vue sémantique (le poème fait parti d’un tout et à ce titre, le titre aussi aurait du être inclu dans l’élément text principal) et la sélection du poème en entier aurait été impossible. Essayez de sélectionner le titre, le poème et le nom de l’auteur : c’est impossible parcequ’ils ne sont pas dans la même balise.
text et tspan accepte tous deux les attributs dx et dy, qui permettent d’effectuer un glissement sur les axes x et y, et rotate qui permet de faire subir une rotation à un glyphe.
Les attributs dx et dy prennent en paramêtre une ou plusieurs
longueurs séparées par des blancs ou des virgules.
dx provoque, dans le cas ou une seule valeur est spécifié, un glissement de la valeur spécifié sur
l’axe des x.
dy fait la même chose, mais sur l’axe des y.
Vous pouvez bien sur combiner dx et dy à votre gré. Remarquez que dans le texte « Ceci est un test », seul « un » subit un glissement, mais que la suite (« test ») reste sur la même ligne. En fait, c’est la position du texte courante qui est modifiée, non seulement pour le texte de la balise tspan, mais aussi pour le texte qui suit.
Quand on souhaite faire glisser une série de lettres, le code devient vite chargé. C’est pourquoi il est permis d’indiquer une série de longueurs séparées par des blancs ou des virgules. Chaque valeur de position n désigne le ne glyphe. Si il n’y a pas assez de longueurs spécifiées dans l’attribut, aucun glissement n’est réalisé sur les derniers glyphes. Si au contraire il y a trop de valeurs, alors celles supplémentaires n’affecteront aucun glyphe.
La rotation fonctionne exactement de la même manière que les deux attributs vu ci-dessus : on renseigne l’attribut rotate d’une ou plusieurs valeurs, les rotations des glyphes en degrés. Exemple :
La rotation se fait à partir du coin bas gauche du glyphe, ce qui rend le résultat assez moyen. Cet attribut permet néanmoins d’écrire du texte vertical : il suffit de faire subir une rotation de -90 à chaque lettre et de faire subir une rotation au texte entier comme ceci :
Pas très convaincant… Il existe heureusement une autre manière d’écrire du texte vertical, grâce aux propriétés CSS writing-mode et glyph-orientation-vertical.
Il faut tout d’abord fixer la propriété writing-mode à tb (pour top-bottom, de bas en haut) car la propriété glyph-orientation-vertical ne fonctionne que quand writing-mode est sur tb. On doit ensuite déterminer un angle de 0 degré pour glyph-orientation-vertical.
C’est mieux (essayez de sélectionner chacun des deux textes, vous comprendrez pourquoi) ! On peut faire varier l’espacement entre les glyphes avec la propriété letter-spacing comme vu précédemment.
Jusqu’ici, nous n’avons spécifié la taille du texte (font-size) qu’avec des pixels, cette unité absolue nous garantissant un contrôle strict sur la longueur du texte. Imaginez maintenant que la longueur du texte ne soit pas connue à l’avance, par exemple avec des données provenant d’un formulaire et traitées avec PHP : ça devient problématique ! SVG permet évidemment de remédier à cela grâce aux attributs textLength et lengthAdjust (qui ne sont pas supportés par le viewer d’Adobe).
Le premier attribut, textLength, reçoit la longueur que doit faire le texte (la valeur doit être positive). Le traitement de la longueur du texte se fait après les opérations effectuées par les propriétés kerning, letter-spacing et word-spacing et les attributs dx et dy.
Le second attribut, lengthAdjust, permet quant à lui un contrôle plus fin sur le type d’ajustement utilisé pour textLength. La valeur par défaut est spacing qui demande que l’ajustement se fasse seulement sur les espacements. Les glyphes ne sont donc ni étirés, ni compressés. Si on veut que l’ajustement se fasse aussi sur les glyphes, on doit utiliser la valeur spacingAndGlyphs.
L’élément text peut contenir soit du texte, soit un élément tref qui peut appeler du texte grâce à l’attribut xlink:href qui prend en paramêtre l’adresse du texte à appeler. Il accepte, à l’instar de text et de tspan, les attributs suivants : x, y, dx, dy, rotate, textLength et lengthAdjust.
C’est maintenant que ça commence à devenir intéressant . Allo ? Vous rappelez vous avoir tracé des carrés au chapitre précédent alors que rect est là pour ça ? C’est maintenant que nous servir car nous allons apprendre à mettre du texte sur un chemin ! Génial, non ?
Pour mettre du texte sur un path, on utiliser l’élément textPath dans un text. On écrit ensuite le texte qu’on désire faire suivre le chemin entre les balises ouvrantes et fermantes de textPath. L’attribut xlink:href de textPath désigne le chemin à utiliser.
Le texte en trop n’est bien sur pas affiché.
On est bien sur pas obligé de faire figurer le chemin : il suffit de mettre le path en définition. On peut aussi utiliser l’élément tref au lieu d’écrire le texte directement.
Remarquez que nous avons utilisé un path déjà tracé dans un autre fichier SVG (textPath.svg#chemin). Avec xlink:href, on peut toujours faire référence à des fragments de fichiers extérieurs (identifiés grâce aux id).
textPath peut porter plusieurs attributs, dont startOffset que vous allez bientôt adorer (je ne vous en dit pas plus ). Il prend en paramètre une longueur représentera le décalage du texte par rapport au point de départ du chemin. Si sa valeur est un pourcentage, c’est en pourcentage du chemin. On peut donc facilement centrer du texte sur un path :
L’attribut method permet d’indiquer la méthode de rendu du texte. Sa valeur par défaut est align. Dans ce cas, le côté de la boîte (rectangulaire) contenant le glyphe touchant le chemin fait parti de la tangente :
Cet attribut peut aussi prendre la valeur strectch. Dans ce cas, les glyphes prendront la forme du chemin et seront donc déformés. Néanmoins, dans le cas où on utilise des glyphes reliés (écritures cursives), ils restent reliés après la transformation. Le viewer d’Adobe ne supporte pas cet attribut.
La gestion des espaces blancs se fait grâce à l’attribut standard XML xml:space qui peut prendre deux valeurs :
Pour la valeur default (qui est la valeur par défaut), les retours à la lignes et les tabulations sont convertis en espace blanc. Ensuite, les espaces de tête et de queue sont supprimés (ainsi, « texte » est converti en « texte »). Puis, les suites d’espaces sont ramenées à un seul espace.
Quand xml:space prend la valeur preserve, seuls les retours à la ligne et les tabulations sont convertis en espaces blancs. Ensuite, le texte est dessiné avec tous les espaces blancs.
SVG met à disposition un élément, switch, qui permet le traitement conditionnel à partir de trois critères : les capacités du DOM SVG, les extensions supportées et la langue indiqué par l’utilisateur. Nous ne verrons que cette dernière possibilité.
Le processeur va parcourir les enfants directs de switch et évaluer l’attribut systemLanguage jusqu’à ce qu’il trouve la valeur qui lui convient. Il arrête alors son traitement et les enfants suivants ne sont donc pas affichés. Si un des éléments évalués n’a pas d’attributs systemLanguage, alors il est évalué comme convenable et est traité en tant que tel.
Vous pouvez spécifier plusieurs langues, les valeurs devant être séparées par des virgules.
Vous pouvez aussi donnez des codes de pays arpès un code de langue, par exemple, vous pouvez écrire fr-fr et fr-be pour différencier
les français et les belges.
Les codes de langues sont disponibles à cette adresse là et les codes de
pays à celle-ci.
Ce chapitre assez barbant touche ici à sa fin, et nous allons maintenant passer à quelquechose d’autrement plus passionant : les animations .
Contact : tangui.lepense@free.fr - Jabber : Tangui@im.apinc.org
Merci à Link Mauve pour sa relecture, ses conseils et ses corrections.
Ce tutoriel SVG (texte et images
d'exemple) de Tangui Le Pense est
mis à disposition selon les termes de la licence Creative Commons
Paternité - Partage à l'Identique 3.0 non transposé. Basé(e) sur
une oeuvre à svground.fr.