In this instalment, we'll be continuing our investigation of Inkscape's text tools. Previously, you learned how to create SVG Text (compliant with the SVG 1.1 spec, and supported in many other applications), and a couple of ways to create Flowed Text (not compatible with any official SVG spec, so practically restricted to use within Inkscape). Whichever sort of text you use, when the Text tool is selected, you are presented with the same Tool Control Bar. Last time, we looked at the left half of this toolbar, where you can select a font, size, style and justification. We used these controls to choose the settings for an entire block of text at a time, but Inkscape also lets you apply most of them to individual words or characters within a text object. The obvious use for this is to emphasise particular words by making them bold, italic, or bold and italic, but you can also change the font, size and color of parts of your text, should you need to.

Dans cet épisode, nous allons continuer notre enquête sur les outils de texte d'Inkscape. Précédemment, vous avez appris à créer un texte SVG (conforme à la spécification SVG 1.1, et pris en charge dans de nombreuses autres applications), et quelques façons de créer un texte encadré (non compatible avec les spécifications SVG officielles, donc pratiquement limité à l'utilisation dans Inkscape). Quel que soit le type de texte que vous utilisez, lorsque l'outil Texte est sélectionné, vous voyez la même barre de contrôle de l'outil. La dernière fois, nous avons regardé la moitié gauche de cette barre d'outils, où vous pouvez sélectionner une police, la taille, le style et la justification.

Nous avons utilisé ces commandes pour choisir les paramètres d'un bloc entier de texte d'un coup, mais Inkscape permet également d'appliquer la plupart d'entre eux à des mots ou des caractères individuels à l'intérieur d'un objet texte. L'utilisation évidente en est de faire ressortir certains mots en gras, en italique, ou les deux à la fois, mais vous pouvez également changer la police, la taille et la couleur de parties de votre texte, en cas de besoin.

To begin with, you need to have some text to modify. If you're stuck for ideas as to what to type, why not try the Lorem Ipsum extension, which will generate paragraphs of the classic nonsense Latin text that typesetters traditionally use as a placeholder. Simply select the Extensions > Text > Lorem Ipsum menu item, pick some values for the three fields, and click Apply. A Flowed Text object will be created on a new layer, with its flow box set to the size of the page. You may want to change the size of the flow box by double-clicking on the text and then moving the small diamond handle at the bottom right, or you could just make it flow into a new object using the Text > Flow into Frame menu that we looked at last time. With the Text tool selected, click in the flowed text at the point that you would like to place the text editing cursor (from now on, I'll use the term caret to differentiate it from the mouse cursor or cursor keys on the keyboard). Alternatively, if the Select tool is active, you can just double click in the flowed text to both position the caret and switch to the Text tool in one fell swoop.

Pour commencer, vous devez avoir un texte à modifier. Si vous êtes en panne d'idées quant à ce qu'il faut taper, pourquoi ne pas essayer l'extension Lorem Ipsum, qui va générer des paragraphes du texte latin habituel utilisé traditionnellement par les typographes pour remplir l'espace. Il suffit de sélectionner le menu Extensions > Texte > Lorem Ipsum, de choisir des valeurs pour les trois champs, puis de cliquer sur Appliquer. Un objet de texte encadré est créé sur un nouveau calque, avec une taille fixée à la taille de la page. Vous pouvez changer la taille de la zone en double-cliquant sur le texte, puis en déplaçant la petite poignée en forme de diamant en bas à droite, ou vous pouvez simplement le faire continuer dans un nouvel objet en utilisant le menu Texte > Mettre suivant un chemin que nous avons vu la dernière fois.

Avec l'outil Texte sélectionné, cliquez dans le texte encadré à l'endroit où vous souhaitez placer le curseur d'édition (à partir de maintenant, je vais utiliser le terme « curseur d'édition » pour le différencier du curseur de la souris ou des flèches du clavier). Autrement, si l'outil de sélection est actif, il vous suffit de double-cliquer dans le texte encadré pour positionner le curseur d'édition et passer à l'outil de texte d'un seul coup.

With the caret happily flashing in the middle of your text, you should be able to move it around using the cursor keys, just as you would in a word processor. Pressing the Home and End keys will jump the caret to the start or end of the current line, respectively, and holding down the Shift key whilst performing any of these movements will select the appropriate section of text. The mouse isn't without its uses either: click to immediately position the caret, or click and drag to select a contiguous section of the text. Double-click to select a word, triple-click to select a whole line. With a portion of the text selected, it's time to play with the style. Start by setting the fill to a different color, or perhaps adding a stroke. You can set the stroke-width and join-type using the Fill and Stroke dialog, but adding markers will have no effect. Other parts of the dialog affect the text in different ways: you can set an alpha level on the fill or stroke to give it some transparency, but changing the opacity setting has no effect. If you try to use blur, gradients or patterns, you'll find the whole text object is affected, rather than just the selected section. Setting a dash style on the stroke will also affect the whole text object, though you won't notice it on any words that don't have a stroke applied.

Une fois le curseur d'édition clignotant joyeusement au milieu de votre texte, vous devriez pouvoir le déplacer à l'aide des touches fléchées, tout comme dans un traitement de texte. Les touches Début et Fin font respectivement sauter le curseur d'édition au début ou à la fin de la ligne courante et si, on maintient enfoncée la touche Maj en effectuant l'un de ces mouvements, on sélectionne la section appropriée du texte. La souris sert aussi : cliquez pour placer le curseur d'édition, ou cliquez et faites glisser pour sélectionner une section contiguë du texte. Double-cliquez pour sélectionner un mot, triple-cliquez pour sélectionner une ligne entière.

Si une partie du texte est sélectionnée, vous pouvez jouer avec le style. Commencez par régler le remplissage à une couleur différente ou peut-être par ajouter un contour. Vous pouvez régler la largeur et le raccord avec le dialogue Remplissage et contour, mais l'ajout de marqueurs n'aura aucun effet. D'autres parties de la boîte de dialogue modifient le texte de différentes manières : vous pouvez définir un niveau alpha sur le remplissage ou le contour pour lui donner une certaine transparence, mais le paramètre d'opacité n'a aucun effet. Si vous essayez d'utiliser le flou, les dégradés ou des motifs, vous verrez que l'ensemble de l'objet texte est modifié, et pas simplement la section sélectionnée. Régler un style de pointillés sur le contour modifiera également l'ensemble de l'objet texte, mais vous ne le verrez pas sur les mots qui n'ont pas de contour.

On the text control bar, you can change the font for the selection, alter its size, or use the bold and italic buttons. The justification buttons work for only the whole text object, not individual selections. This does, however, mean that, if you want to left-justify one paragraph and right-justify the next, you'll have to split them into separate text objects. Nevertheless, by playing with fonts, fills, strokes and more, you can easily create some truly awful text designs. Now that you've got the hang of positioning the caret and selecting parts of the text, it's time to investigate the less frequently used icons and controls that remain on the rest of the bar. The first of these you may recognise as Superscript and Subscript. Although you can apply them to an entire text object, they work best on a selection of just a few characters at a time. They have the effect of reducing the font size for the selection, and adjusting the text's baseline up or down. The size can subsequently be modified using the toolbar, but adjusting the position isn't so straightforward, so although these buttons are useful for simple super- and sub-scripts such as chemical formulae, they're not very useful if you want to finely position your text.

Dans la barre de contrôle de texte, vous pouvez modifier la police de la sélection, modifier sa taille, ou utiliser les boutons gras et italique. Les boutons de justification fonctionnent seulement pour l'objet texte dans son ensemble, pas pour des sélections. Cela ne signifie cependant pas que, si vous voulez aligner un paragraphe à gauche et le suivant à droite, vous aurez à les diviser en objets de texte séparés. Néanmoins, en jouant avec les polices, les remplissages, les contours etc., vous pouvez facilement créer des mises en pages de textes vraiment horribles.

Maintenant que vous avez compris comment positionner le curseur d'édition et sélectionner des parties du texte, il est temps d'aller voir les icônes et les commandes moins fréquemment utilisées qui figurent sur le reste de la barre.

Le premier que vous reconnaîtrez peut-être est Exposant et Indice. Bien que vous puissiez les appliquer à l'ensemble d'un objet texte, ils fonctionnent mieux sur une sélection de quelques caractères à la fois. Ils ont pour effet de réduire la taille de la police pour la sélection et le réglage de la ligne de base de texte vers le haut ou vers le bas. La taille peut être modifiée par la suite en utilisant la barre d'outils, mais ajuster la position n'est pas aussi simple, si bien que, même si ces boutons sont utiles pour de simples exposants et indices tels que les formules chimiques, ils ne sont pas très utiles si vous voulez positionner finement votre texte.

Fine positioning is precisely what the next six controls are all about. The first three work on both SVG Text and Flowed Text, whereas the last three are disabled for Flowed Text objects. The former all deal with the general spacing of your text, whereas the latter allow fine control over individual characters. The first of the spacing controls affects the spacing between lines in a paragraph of text. The value in here is multiplied by the font size in order to produce the final spacing. You can reduce this as low as 0, in which case all the lines will be on top of each other, but it doesn't allow negative values so you can't use it as a way to make your paragraphs run from bottom to top. Typically it's set to 1.25 for normal paragraphs, though you may wish to adjust it for a looser or tighter design. This image shows three paragraphs of our Lorem Ipsum text, set to 0.75, 1.25 and 2.0 respectively.

Le positionnement fin est précisément ce que les six contrôles suivants permettent. Les trois premiers fonctionnent à la fois sur du texte SVG et du texte encadré, tandis que les trois derniers sont désactivés pour les objets texte encadré. Les premiers traitent de l'espacement général de votre texte, tandis que les derniers permettent un contrôle précis de caractères individuels.

La première de ces commandes d'espacement affecte l'espacement entre les lignes d'un paragraphe de texte. La valeur indiquée est multipliée par la taille de la police pour produire l'espacement final. Vous pouvez la réduire jusqu'à 0 et, dans ce cas, toutes les lignes se chevaucheront, mais les valeurs négatives sont interdites ; vous ne pouvez donc pas l'utiliser comme un moyen d'écrire vos paragraphes de bas en haut. Typiquement, elle vaut 1,25 pour les paragraphes normaux, mais vous pouvez l'adapter pour un affichage plus large ou plus serré. Cette image montre trois paragraphes de notre texte Lorem Ipsum, fixés à 0,75, 1,25 et 2,0 respectivement.

The next two controls are used to set the standard spacing between individual letters, and the spacing between words. The tooltips claim that both these values are in pixels, but, in my experience, typing a value directly into these – even if your document is set to use pixels as the default units – results in the value being converted to something different. In practice, it's not too great a problem as it's rare to need specific values in these fields. More usually you will adjust them up and down to make your text a little tighter or looser. These fields will allow you to enter negative values, if you really do want your text to run backwards! The next control is used to adjust horizontal kerning on SVG Text. Kerning is the term used to describe the spacing between two individual characters. By adjusting the kerning, you can arrange for characters to slot together a little more neatly, giving a more pleasing look to text, with fewer blank areas that can form visual “rivers” of white on a page. Using this field is as simple as placing the caret between the pair of letters that you wish to kern, and then entering a value to adjust the spacing. Negative values are most commonly used, to encourage the second character to tuck-in to the white space within the shape of the first, but you can also use a positive value to force a pair of characters further apart. This image shows the effect on a few pairs of characters with no kerning, and then with a negative value.

Les deux commandes suivantes sont utilisées pour définir l'espacement standard entre les lettres, ainsi que l'espacement entre les mots. Les info-bulles affirment que ces deux valeurs sont en pixels, mais, dans mon expérience, en tapant une valeur directement - même si votre document est configuré pour utiliser les pixels comme unité par défaut - la valeur est convertie en quelque chose de différent. En pratique, ce n'est pas un gros problème, car il est rare d'avoir besoin de valeurs spécifiques dans ces champs. En général, vous réglez plus haut ou plus bas pour rendre votre texte un peu plus ou un peu moins serré. Ces champs vous permettent d'entrer des valeurs négatives, si vous avez vraiment envie que votre texte aille vers l'arrière !

La commande suivante permet de régler le crénage horizontal sur du texte SVG. Le crénage est le terme utilisé pour décrire l'espacement entre deux caractères individuels. En ajustant le crénage, vous pouvez vous arranger pour que les caractères soient mieux accolés, donnant une apparence plus agréable au texte, avec moins d'espaces vides qui peuvent former des « rivières » de blanc sur une page. Pour utiliser ce champ, il suffit de placer le curseur d'édition entre les deux lettres que vous souhaitez, puis d'entrer une valeur pour régler l'écartement. Les valeurs négatives sont couramment utilisés, pour que le deuxième caractère entre dans l'espace à l'intérieur de la forme du premier, mais vous pouvez également utiliser une valeur positive pour forcer deux caractères à être plus espacés. Cette image montre l'effet sur quelques caractères sans crénage, puis avec un crénage négatif.

After the Horizontal Kerning control, there's a similar field for adjusting the vertical position of your characters. If you simply position the caret, then it shifts the text from that point to the end of the line up or down. Alternatively you can select specific characters or words to limit its effects – although, if your selection spans more than one line, the behaviour can be a little unexpected. Negative values in this field will move your text upwards, positive numbers will move it downwards. Combined with changing the font size, this can give you more fine-grained control than you get from using the Superscript and Subscript buttons. The last of this group of controls lets you rotate individual characters, with the value being a figure in degrees. Positive numbers rotate clockwise, negative numbers counter-clockwise. Placing the caret will cause it to rotate just the following character. Selecting some text will rotate the individual characters of the selection, not the whole selection as one. It's not possible to select the rotation centre, but using the Horizontal Kerning and Vertical Shift controls can allow you to compensate for this if you need to.

Après le contrôle du crénage horizontal, il y a un champ similaire pour régler la position verticale de vos caractères. Il suffit de placer le curseur d'édition et alors il déplacera le texte de ce point à la fin de la ligne vers le haut ou vers le bas. Sinon, vous pouvez sélectionner des caractères ou des mots spécifiques pour limiter ses effets - bien que, si votre sélection s'étend sur plus d'une ligne, le comportement puisse être un peu inattendu. Les valeurs négatives dans ce champ déplaceront votre texte vers le haut, les nombres positifs le déplaceront vers le bas. Combiné avec la modification de la taille de la police, cela peut vous donner un contrôle plus fin que celui obtenu à l'aide des boutons exposant et indice.

Le dernier de ce groupe de contrôles vous permet de faire pivoter des caractères individuels, la valeur étant en degrés. Les nombres positifs tournent dans le sens horaire, les nombres négatifs dans le sens antihoraire. Placer le curseur d'édition ne va faire tourner qu le caractère suivant. La sélection d'un peu de texte va faire tourner les caractères individuels de la sélection, et non l'ensemble de la sélection en un seul bloc. Il n'est pas possible de sélectionner le centre de rotation, mais en utilisant le crénage horizontal et les contrôles de décalage vertical vous pouvez compenser cela si vous en avez besoin.

In practice, the Horizontal Kerning, Vertical Shift and Character Rotation controls are often best adjusted using keyboard shortcuts. Holding ALT while using the cursor keys will adjust the kerning and vertical shift, whilst ALT-] and ALT-[ can be used for character rotation. The Text > Remove Manual Kerns menu entry will remove all the Horizontal Kerning, Vertical Shift and Character Rotation adjustments for the whole text object, but won't remove any changes to the line, letter or word spacing controls. The final buttons on the toolbar let you switch between creating horizontal and vertical text. In the latter case, the individual characters are the right way up, but the words run vertically down the page – as opposed to simply rotating the text object, in which case the characters are also rotated.

En pratique, le crénage horizontal, le décalage vertical et les contrôles de rotation de caractères sont souvent plus précis en utilisant les raccourcis clavier. Maintenez ALT tout en utilisant les touches fléchées ajuste le crénage et le décalage vertical, alors que ALT-] et ALT-[ peuvent être utilisés pour la rotation de caractères. Le menu Texte > Retirer les crénages manuels va supprimer tout le crénage horizontal, le décalage vertical et les rotations de caractères dans tout l'objet texte, mais ne supprimera pas les modifications apportées par les contrôles sur l'espacement des lignes, des lettres ou des mots.

Les dernières touches sur la barre d'outils vous permettent de basculer entre la création d'un texte horizontal et celle d'un texte vertical. Dans ce dernier cas, les caractères individuels sont dans le bon sens, mais les mots sont tracés verticalement vers le bas de la page - par opposition à une simple rotation de l'objet texte, auquel cas les caractères sont tournés aussi.

There's one big elephant in the room which can't go unmentioned when discussing text and SVG files: SVG fonts. The SVG specification includes a font format where the individual glyphs are defined using standard SVG objects. In theory, this should allow fonts to be created that contain colour and animations, and that can be dynamically changed by using standard Javascript code in a web browser – all while still presenting understandable text content to search engines. Although Inkscape contains a dedicated interface for creating SVG fonts, via the Text > SVG Font Editor menu, there are a couple of reasons why it's probably not worth using. The first is that the Firefox developers have specifically rejected the idea of supporting SVG fonts, due to their lack of some layout and internationalisation features that are available in other font formats. Their concerns are certainly valid for a general purpose font format, but I think that misses some of the advantages that SVG fonts can offer when used in an SVG image, and which no other format can. An even bigger reason not to use SVG fonts, ironically, is Inkscape itself. Although it has an interface to help create them, it has no mechanism to actually use them once they've been created. The Font Editor, therefore, is useful only if you're creating SVG fonts as an interim step towards generating a TrueType or Postscript font using an application such as FontForge.

Il y a un sujet tabou qui ne peut pas être passé sous silence lorsqu'on parle de texte et de fichiers SVG : les polices SVG. La spécification SVG comprend un format de police où les glyphes individuels sont définis en utilisant des objets SVG standards. En théorie, cela devrait permettre de créer des polices contenant des couleurs et des animations, qui puissent être modifiées dynamiquement en utilisant du code Javascript standard dans un navigateur Web - tout en présentant du contenu de texte compréhensible par les moteurs de recherche. Bien qu'Inkscape contienne une interface dédiée à la création de polices SVG, via le menu Texte > Éditeur de police SVG, il y a quelques raisons pour lesquelles ce n'est probablement pas la peine de l'utiliser. La première est que les développeurs de Firefox ont expressément rejeté l'idée de prendre en charge les polices SVG, en raison de leur manque de certaines fonctionnalités de mise en page et de l'internationalisation qui sont disponibles dans d'autres formats de polices. Leurs préoccupations sont certainement valables pour un format de police à but général, mais je pense que quelques-uns des avantages que les polices SVG peuvent offrir lorsqu'elles sont utilisées dans une image SVG, et que nul autre format ne rend possible, sont ainsi absents.

Une plus grande raison de ne pas utiliser les polices SVG, ironiquement, est Inkscape lui-même. Bien qu'il dispose d'une interface pour aider à les créer, il n'a pas de mécanisme pour les utiliser une fois qu'elles ont été créées. L'éditeur de police, par conséquent, n'est utile que si vous créez des polices SVG comme étape intermédiaire vers la création d'une police TrueType ou Postscript en utilisant une application comme FontForge.