The previous instalment included a comic strip which was made in Inkscape using paths, ellipses and rectangles with flat fills and gradients – all elements that have been covered in this series so far. But it also included one other type of object which is an essential element of many images: text. Creating text objects in Inkscape isn't difficult, but does come with a few caveats that can easily trip up beginners. Some of these are common to all vector graphics programs, but the first issue you're likely to face is peculiar to Inkscape and involves a brief history lesson… Inkscape's native file format is SVG, an open format specified by the World Wide Web Consortium (W3C). By using an open format, Inkscape creates files that can be viewed and edited, at least to some extent, in a wide range of applications. This is a huge benefit to the user, whose files aren't locked-in to being used just within Inkscape, but has the disadvantage that the Inkscape developers have little direct control over what makes it into the specification, and what doesn't.

Le précédent opus incluait une bande dessinée fabriquée dans Inkscape en utilisant des chemins, des ellipses et des rectangles avec des remplissages unis et dégradés - tous les éléments qui ont été abordés dans cette série jusqu'à présent. Mais elle contenait également un autre type d'objet qui est un élément essentiel de nombreuses images : du texte.

Ce n'est pas difficile de créer des objets texte dans Inkscape, mais cela peut avoir quelques inconvénients qui peuvent facilement dérouter les débutants. Certains d'entre eux sont communs à tous les programmes graphiques vectoriels, mais le premier que vous risquez de rencontrer est propre à Inkscape et implique une brève leçon d'histoire…

Le format de fichier natif d'Inkscape est le SVG, un format ouvert spécifié par le World Wide Web Consortium (W3C). En utilisant un format ouvert, Inkscape crée des fichiers qui peuvent être affichés et modifiés, au moins dans une certaine mesure, dans un large éventail d'applications. C'est un énorme avantage pour l'utilisateur, dont les fichiers ne sont pas verrouillés pour être utilisés seulement dans Inkscape, mais présente l'inconvénient que les développeurs d'Inkscape ont peu de contrôle direct sur ce qui entre ou pas dans le cahier des charges.

The first version of the SVG spec was released in 2001, followed by version 1.1 in 2003. After that, several years were spent working on version 1.2, which was to include many additions and improvements – including additions to support text which will wrap and reflow to fill its container. The Inkscape developers spent quite some time implementing support for this “flowed text” format, fully anticipating its official release in the new SVG standard. Then SVG 1.2 withered and died. It never became a standard and to this day – 8 years later! – SVG 1.1 is still the latest official version of the SVG specification. This left Inkscape with the ability to create objects that are compatible with only an aborted spec, but, as this facility had made it into a release version of the software, it would break compatibility with users' files if the code was simply excised. The Inkscape developers took the pragmatic decision to leave the Flowed Text feature in place, even though using it will create files that other applications will not fully understand.

La première version de la spécification SVG est sortie en 2001, suivie par la version 1.1 en 2003. Après cela, plusieurs années ont été consacrées à travailler sur la version 1.2, qui devait inclure de nombreux ajouts et améliorations - y compris des ajouts de support de texte qui irait à la ligne pour remplir son contenant. Les développeurs d'Inkscape ont passé pas mal de temps pour mettre en œuvre ce format de « texte évoluant », s'attendant vraiment à ce qu'il sorte officiellement dans la nouvelle norme SVG.

Ensuite, SVG 1.2 a périclité et disparu. Ce n'est jamais devenu une norme et à ce jour - 8 ans plus tard ! - SVG 1.1 est toujours la dernière version officielle de la spécification SVG. Ce qui a laissé à Inkscape le seul choix de créer des objets qui ne sont compatibles qu'avec une spécification avortée, mais comme cette fonctionnalité était sortie dans une version du logiciel, cela rompait la compatibilité avec les fichiers des utilisateurs si le code était simplement supprimé. Les développeurs d'Inkscape ont pris la décision pragmatique de laisser la fonction de texte encadré en place, même si son utilisation crée des fichiers que d'autres applications ne pourront pas bien comprendre.

As a result of this historical issue, Inkscape can create text in two different forms: the SVG 1.1 type, which doesn't automatically flow into its container (which I'll be referring to as SVG Text), and the SVG 1.2 type which does flow (Flowed Text), but which doesn't conform to the SVG specification. The problem arises because it's far too easy to accidentally create Flowed Text, especially if you have previous experience with other graphics applications. Let's get practical and actually create some text. First select the Text tool by clicking its icon in the tool palette, or by pressing “T” or F8. Now, simply click inside the drawing window and start typing. If you can't see anything, check that your color and opacity settings make sense via the status bar. Congratulations, you've just created some SVG Text. If you switch back to the Select tool using the tool palette or F1 key, you can move, scale, skew and rotate your text object in the same way as any other SVG element. Because this type of text object conforms to SVG 1.1, it can be displayed or edited by various other applications. As you can see from this image, even skewing and rotating the text object in Inkscape (below) isn't enough to prevent it displaying in Firefox (bottom):

En raison de ce problème historique, Inkscape peut créer un texte sous deux formes différentes : de type SVG 1.1, qui ne se répartit pas de lui-même dans son conteneur (auquel je ferai référence comme texte SVG), et de type SVG 1.2 qui se répartit (texte encadré), mais qui n'est pas conforme à la spécification SVG. Le problème se pose parce qu'il est beaucoup trop facile de créer accidentellement un texte encadré, surtout si vous avez déjà utilisé d'autres applications graphiques.

Passons à la pratique et créons réellement un texte. Sélectionnez d'abord l'outil de texte en cliquant sur son icône dans la palette d'outils, ou en appuyant sur « T » ou F8.

Maintenant, cliquez simplement dans la fenêtre de dessin et commencez à taper. Si vous voyez rien, vérifiez via la barre d'état que vos paramètres d'opacité et de couleur sont logiques. Félicitations, vous venez de créer du texte SVG. Si vous revenez à l'outil de sélection en utilisant la palette d'outils ou la touche F1, vous pouvez déplacer, redimensionner, incliner et faire pivoter votre objet texte de la même façon que tout autre élément SVG. Puisque ce type d'objet texte est conforme à SVG 1.1, il peut être affiché ou édité par diverses autres applications. Comme vous pouvez le voir sur cette image, même l'inclinaison et la rotation de l'objet texte dans Inkscape (ci-dessous) n'empêche pas l'affichage dans Firefox (en bas) :

Some other graphics applications require you to drag a rectangle on the canvas to contain your text. This is especially common in desktop publishing programs such as Scribus, where almost everything is defined by drawing a frame to contain it. You can do this in Inkscape as well – just select the Text tool then click and drag a rectangle onto the canvas before typing. You've now created a Flowed Text object. With the Text tool still active, and the Flowed Text object selected, you should see a small square handle at the bottom-left of the text frame. By moving this handle you can change the size and shape of your frame, and the text will re-flow automatically. The following image shows the same Flowed Text object duplicated a couple of times in Inkscape. The copies have had their frame sizes changed, and you can easily see that the text has moved around, and, in the case of the bottom-right frame, it has been automatically truncated: If we load this SVG file into Firefox, the result is a blank page. Firefox ignores the Flowed Text completely, and the same applies to almost every other application. Remember, the difference between creating SVG Text and Flowed Text is as simple as whether you just click, or click-drag. If you want to use your SVG files in other applications, you should almost always just click when creating your text objects. If you're in any doubt, select your text object and check the status bar, which will describe the object as either “Text” or “Flowed text”.

D'autres applications graphiques nécessitent que vous délimitiez un rectangle sur le canevas pour contenir votre texte. Ceci est particulièrement fréquent dans les programmes de PAO comme Scribus, où presque tout est défini en dessinant un cadre comme conteneur. Vous pouvez également le faire dans Inkscape - il suffit de sélectionner l'outil Texte puis de cliquer et faire glisser un rectangle sur le canevas avant de taper. Vous venez de créer un objet texte encadré. Avec l'outil Texte toujours actif et l'objet texte encadré sélectionné, vous devriez voir une petite poignée carrée en bas à gauche du cadre du texte. En déplaçant cette poignée, vous pouvez modifier la taille et la forme de votre cadre, et le texte sera modifié automatiquement. L'image suivante montre le même objet texte encadré dupliqué plusieurs fois dans Inkscape. La taille des cadres des copies ont été modifiées et vous pouvez facilement voir que le texte a bougé, et, dans le cas du cadre en bas à droite, il a été tronqué automatiquement :

Si nous chargeons ce fichier SVG dans Firefox, le résultat est une page blanche. Firefox ignore complètement les textes encadrés, et il se passe la même chose dans presque toutes les autres applications. Rappelez-vous, la différence entre un texte SVG et un texte encadré est aussi simple que juste cliquer ou cliquer-glisser. Si vous souhaitez utiliser vos fichiers SVG dans d'autres applications, vous devriez presque toujours simplement cliquer pour créer vos objets texte. Si vous avez un doute, sélectionnez votre objet texte et vérifiez la barre d'état, qui décrit l'objet comme « texte » ou « texte encadré ».

Despite the tone of the previous few paragraphs, there are sometimes valid reasons why you would want to use Flowed Text. If you don't want to use your Inkscape files in another application, then the presence of non-standard SVG code won't affect you. Even if you do want to use your SVG files elsewhere, it can sometimes be easier to create Flowed Text during the drawing stage, and then convert it to SVG text using the Text > Convert to Text menu entry just before you save the final version of your file. Loading the file into Firefox gives exactly the result you would expect: The real advantage of Flowed Text in Inkscape is that it can flow into shapes other than simple rectangles. First you will need a shape for the text to flow into: this can be any of the simple Inkscape primitives such as rectangles, ellipses and stars, or it can be a path element which allows you to create complex shapes using all the Boolean operations and node editing tools that have been described in previous articles. It must be a single object though, so can't be a group. You will also need some text, but it doesn't matter whether you create SVG Text or Flowed Text at this stage. Select both your shape and the text, and then use the Text > Flow into Frame menu to perform the magic. Note that the status bar now describes your text object as “Linked flowed text”, and that you can modify your shape as much as you like, with the text re-flowing to fit: As with normal Flowed Text, this will not be understood by other SVG applications. You can still use Text > Convert to Text, although with very complex paths you may find that the text shifts around a lot during the conversion. Nevertheless, for labels and speech bubbles, the ability to change your container shapes and have the text re-flow to suit, can be a real time saver. Now that you know how to create basic text objects in their various forms, it's time to exert a little more control over the style of your words. Most commonly, you'll want to choose a suitable font, set its size, and perhaps change the justification. All of these options are available from the Tool Control Bar, and, although they can be changed at any time, it's often easier to set them before you click (or click-drag) to place your text cursor to avoid problems with the focus being in the wrong place when you start to type.

Malgré le ton des quelques paragraphes précédents, il y a parfois des raisons valables pour lesquelles vous voulez utiliser un texte encadré. Si vous ne souhaitez pas utiliser vos fichiers Inkscape dans une autre application, la présence d'un code SVG non standard ne vous gênera pas. Même si vous souhaitez utiliser vos fichiers SVG ailleurs, il peut parfois être plus facile de créer un texte encadré pendant la phase de dessin, puis le convertir en texte SVG en utilisant le menu Texte > Convertir en texte juste avant d'enregistrer la version finale de votre fichier. Le chargement du fichier dans Firefox donne exactement le résultat attendu :

Le véritable avantage du texte encadré dans Inkscape est qu'il peut se répartir dans des formes autres que de simples rectangles. D'abord, vous aurez besoin d'une forme à remplir avec le texte : cela peut être l'une des primitives Inkscape simples comme des rectangles, ellipses et étoiles, ou bien un élément chemin qui vous permet de créer des formes complexes à l'aide de toutes les opérations booléennes et des outils d'édition de nœuds qui ont été décrites dans les articles précédents. Cependant, cela doit être un objet unique, pas un groupe. Vous aurez également besoin d'un peu de texte, mais peu importe que vous utilisiez du texte SVG ou du texte encadré à ce stade. Sélectionnez à la fois la forme et le texte, puis utilisez le menu Texte > Mettre suivant un chemin pour que la magie opère. Notez que la barre d'état décrit maintenant votre objet texte comme « Texte le long d'un chemin », et que vous pouvez modifier votre forme autant que vous voulez, avec le texte qui se modifie pour s'adapter :

Comme avec un texte encadré normal, ce ne sera pas compris par d'autres applications SVG. Vous pouvez toujours utiliser Texte > Convertir en texte, mais avec des chemins très complexes, vous pouvez constater que le texte se déplace pas mal durant la conversion. Néanmoins, pour des étiquettes et des bulles de BD, la possibilité de modifier vos formes de conteneurs et d'avoir le texte qui suit peut être un véritable gain de temps. Maintenant que vous savez comment créer des objets de texte de base dans leurs différentes formes, il est temps de contrôler un peu plus le style de vos mots. Le plus souvent, vous aurez envie de choisir une police appropriée, régler sa taille et peut-être changer la justification. Toutes ces options sont disponibles dans la barre des contrôles d'outils et, même si elles peuvent être modifiées à tout moment, il est souvent plus simple de les régler avant de cliquer (ou cliquer-glisser) pour placer le curseur de votre texte pour éviter que le focus soit mal placé lorsque vous commencez à taper.

The drop down menu to the left of the toolbar lets you select a font. Inkscape can be a little fussy about its fonts, so you may find that some fonts on your system aren't available, especially those that haven't been created by a professional type foundry. There's also an occasional glitch that can occur when you first open this menu: Inkscape shows a shortened version of it, with just a few fonts listed. If that happens, simply click away from the menu to close it, and then re-open it. Finally, you may find that some fonts simply refuse to stay selected when picked from this menu. I commonly have this problem with “Arial Black”, which Inkscape immediately replaces with a bold version “Arial”. In this case, you can use the “Text and Font” dialog from the Text menu to select the stubborn typeface, which will be used when you click the Apply button. The size drop-down lets you pick from a few predefined sizes, all in units of “SVG pixels”. You can also type directly into this box to specify a different size, but there's no way to use any other units. The following two buttons are toggles, used to switch to bold or italic versions of the selected font – or a bold-italic version if both are active.

Le menu déroulant à gauche de la barre d'outils vous permet de sélectionner une police. Inkscape peut être un peu pointilleux sur ses polices, donc il se peut que certaines polices sur votre système ne soient pas disponibles, en particulier celles qui n'ont pas été créées par un atelier professionnel. Il y a aussi un petit problème occasionnel qui peut survenir lorsque vous ouvrez ce menu : Inkscape montre une version abrégée de celui-ci, avec seulement quelques polices répertoriées. Si cela arrive, il suffit de cliquer en dehors du menu pour le fermer, puis de le rouvrir. Enfin, vous pouvez constater que certaines polices refusent tout simplement de rester sélectionnées quand on les choisit dans ce menu. J'ai souvent ce problème avec « Arial Black », qu'Inkscape remplace immédiatement avec une version en gras de « Arial ». Dans ce cas, vous pouvez utiliser la boîte de dialogue « Texte et police » dans le menu Texte pour sélectionner la police récalcitrante, qui sera utilisée lorsque vous cliquez sur le bouton Appliquer.

La liste déroulante des tailles vous permet de choisir parmi quelques tailles prédéfinies, toutes en unités « SVG pixels ». Vous pouvez également taper directement dans cette case pour spécifier une taille différente, mais il n'y a aucun moyen d'utiliser d'autres unités. Les deux boutons suivants permettent de basculer entre les versions en gras ou en italique de la police sélectionnée - ou une version gras-italique si les deux sont actifs.

Finally, there are four buttons for setting the text's justification. Left, centre and right justification can be used for any piece of text, but full justification (where the program tries to line up both the start and end of every line) is available only for flowed text. You can convert fully justified flowed text into SVG text – which does a surprisingly good job of maintaining the justification, but it plays havoc with Inkscape's on-page text editing if you need to subsequently change the content. Having created your text objects in Inkscape, you may want to transfer the SVG file to another machine, or post it online. In doing so, there's a good chance that you'll run into a problem with missing fonts. Text in SVG files is stored as a string of characters, together with some style information which contains the font name. If an identically named font isn't present on the destination computer, the software used to display the file will substitute it with an alternative, often with dramatic effects on the appearance of your image. The image right shows a couple of panels from one of my comic strips, first as it should appear using a couple of commercial comic fonts, and then how it appears on an Ubuntu box that doesn't have those fonts installed.

Enfin, il y a quatre boutons pour le réglage de la justification du texte. Les justifications à gauche, centré et à droite peuvent être utilisées pour n'importe quel texte, mais la justification complète (où le programme tente d'aligner à la fois le début et la fin de chaque ligne) est disponible uniquement pour un texte encadré. Vous pouvez convertir un texte encadré pleinement justifié en texte SVG - qui fait un travail étonnamment bon en maintenant la justification, mais qui fait des ravages avec l'édition ultérieure si vous avez besoin de changer par la suite le contenu.

Après avoir créé vos objets texte dans Inkscape, vous pouvez vouloir transférer le fichier SVG sur une autre machine, ou le mettre en ligne. Dans ce cas, il y a une bonne chance que vous rencontriez un problème de polices manquantes. Le texte dans les fichiers SVG est stocké comme une chaîne de caractères, accompagnée de certaines informations de style qui contiennent le nom de la police. Si une police portant le même nom n'est pas présente sur l'ordinateur de destination, le logiciel utilisé pour afficher le fichier la remplacera par une autre, souvent avec des effets dramatiques sur l'apparence de votre image. L'image de droite montre quelques panneaux d'une de mes bandes dessinées, d'abord comme ils devraient apparaître en utilisant des polices commerciales de bandes dessinées, puis comment il apparaît sur ​​un ordinateur Ubuntu où ces polices ne sont pas installées.

There are four possible solutions to this problem: • Ensure that the required fonts are present also on the destination machine. This may not be possible if it's not your computer, or if the font licence prohibits it. • Don't use the SVG format to transfer files to other systems. For my comics, I always export a PNG version of the file to ensure that my readers see a pixel-perfect representation of the image. Exporting to other formats will be the subject of part 12 of this series. • Only use commonly available fonts. This is not a perfect solution, but may be viable in some circumstances. My “Greys” comics, for which I make the SVG files available to download, use the ubiquitous “Arial” font for this reason. Even with that precaution, they often display poorly in a web browser, and although this approach makes it easier to open the files in Inkscape, I still produce PNG versions for the benefit of casual readers. • Convert your text into paths before saving the file.

Il existe quatre solutions à ce problème : • Veillez à ce que les polices nécessaires soient présentes également sur ​​la machine de destination. Cela peut ne pas être possible si ce n'est pas votre ordinateur, ou si la licence de la police l'interdit.

• N'utilisez pas le format SVG pour transférer ces fichiers vers d'autres systèmes. Pour mes bandes dessinées, j'exporte toujours une version PNG du fichier pour être sûr que mes lecteurs verrons un affichage au pixel près de l'image. L'exportation vers d'autres formats sera l'objet de la partie 12 de cette série. • Utilisez uniquement des polices couramment disponibles. Ce n'est pas une solution parfaite, mais peut être viable dans certaines circonstances. Mes BD « Greys », pour lesquels les fichiers SVG sont disponibles au téléchargement, utilisent la police omniprésente « Arial » pour cette raison. Même avec cette précaution, ils s'affichent souvent mal dans un navigateur web, et bien que cette approche rende plus facile l'ouverture des fichiers dans Inkscape, je produis quand même des versions PNG pour les lecteurs occasionnels. • Convertissez votre texte en chemins avant d'enregistrer le fichier.

That last solution is as simple as selecting the text then the Path > Object to Path menu entry. In Inkscape 0.48, your text will be replaced with some identical looking paths, one for each letter, grouped together. Earlier versions simply produced a single composite path that contained all the letters. Once converted to paths, the text is just another collection of shapes in your SVG file and no longer require the fonts to be installed. This might sound like an ideal solution, but does come with a drawback: your “text” is no longer a text object, so can no longer be edited using the text Tool in Inkscape. If you decide to use this approach I recommend performing the conversion to paths as late as possible. You should also make a copy of the text object before you do so, in case you need to edit it again at a later date. The text object should then be put onto a hidden layer, dropped behind some other object, made transparent, or secreted away in some other manner so that it doesn't interfere with the rendering of the file on the destination machine.

Cette dernière solution est aussi simple que de sélectionner le texte, puis le menu Chemin > Objet en chemin. Dans Inkscape 0.48, votre texte sera remplacé par des chemins parfaitement ressemblants, un pour chaque lettre, et regroupés. Les versions antérieures produisaient simplement un chemin composite unique contenant toutes les lettres. Une fois converti en chemins, le texte est simplement une collection de formes dans votre fichier SVG et ne nécessite plus que les polices soient installées.

Cela peut sembler une solution idéale, mais il y a un inconvénient : votre « texte » n'est plus un objet texte et ne peut donc plus être modifié en utilisant l'outil texte dans Inkscape. Si vous décidez d'utiliser cette approche, je vous recommande d'effectuer la conversion en chemins le plus tard possible. Vous devriez également faire une copie de l'objet texte avant de le convertir, au cas où vous auriez besoin de l'éditer à nouveau à une date ultérieure. L'objet texte devrait ensuite être mis sur un calque masqué, ou derrière un autre objet, ou encore rendu transparent, ou caché de quelque autre manière pour qu'il n'interfère pas avec le rendu du fichier sur la machine de destination.