As promised last time, I’m going to continue describing the flowed text improvements in Inkscape v1.0. Previously, I showed you how to turn off the new SVG 2.0 flowed text implementation, in order to produce files that are compatible with Inkscape 0.92, but, unless you’ve got a specific reason for doing that, I strongly recommend sticking with the SVG 2.0 variety for compatibility with web browsers and future Inkscape releases. This time I’ll dig into the gory details of the new features, both from an Inkscape user’s perspective, and also with regard to the way flowed text appears in your SVG file. First, some definitions: flowed text is the sort that will automatically wrap its lines to fill the available area. Usually that area is defined as a rectangle (though Inkscape can also flow text into arbitrary shapes), and the text will be rendered so that each line fills the width of the rectangle as fully as it can. Changing the dimensions of the rectangle causes the text to move around – to “flow” – in order to best fill the width. Ordinary (non-flowed) text refers to text objects that aren’t constrained inside a rectangle or other shape, and don’t flow to fill the space. Line breaks are explicitly entered, and have to be manually adjusted if you want the layout of the text to change. Whereas flowed text gives layout control to Inkscape, ordinary text keeps that control solely with the creator.
Comme promis la dernière fois, je vais continuer à décrire les améliorations du texte en flux continu dans Inkscape v1.0. Précédemment, je vous ai montré comment désactiver la nouvelle implémentation du texte fluide SVG 2.0, afin de produire des fichiers compatibles avec Inkscape 0.92, mais, à moins que vous n'ayez une raison spécifique de le faire, je vous recommande fortement de vous en tenir à SVG 2.0 pour la compatibilité avec les navigateurs Web et les futures versions d'Inkscape. Cette fois-ci, je vais entrer dans les détails sanglants des nouvelles fonctionnalités, à la fois du point de vue de l'utilisateur d'Inkscape, et aussi en ce qui concerne la façon dont le texte en continu apparaît dans votre fichier SVG.
Tout d'abord, quelques définitions : le texte en continu est le genre de texte qui dimensionne automatiquement ses lignes pour remplir la zone disponible. Habituellement, cette zone est définie comme un rectangle (bien qu'Inkscape puisse également « couler » du texte dans des formes arbitraires), et le texte sera rendu de sorte que chaque ligne remplisse la largeur du rectangle aussi complètement que possible. En modifiant les dimensions du rectangle, le texte se déplacera - coulera - afin de remplir au mieux la largeur. Le texte ordinaire (non coulé) désigne les objets texte qui ne sont pas contraints à l'intérieur d'un rectangle ou d'une autre forme et qui ne coulent pas pour remplir l'espace. Les sauts de ligne sont saisis explicitement et doivent être ajustés manuellement si vous souhaitez modifier la mise en page du texte. Alors que le texte en continu donne le contrôle de la mise en page à Inkscape, le texte ordinaire laisse ce contrôle au seul créateur.
In earlier versions of the program, it was possible to create flowed text by dragging a rectangle with the Text tool selected, then typing your content into it. Ordinary text was created by just clicking on the canvas with the Text tool in order to position the text entry caret, and then typing. Those were your only two options: flowed or ordinary. With Inkscape v1.0, however, there are now two different varieties of flowed text to understand. As with previous releases, you can click-drag to create a rectangular text box on the canvas when the Text tool is selected. Typing into this box will produce flowed text which, in practice, behaves the same way that flowed text did in earlier Inkscape releases, but with greater compatibility outside the program.
Dans les versions précédentes du programme, il était possible de créer du texte en flux continu en faisant glisser un rectangle avec l'outil Texte sélectionné, puis en y tapant votre contenu. Pour créer du texte ordinaire, il suffisait de cliquer sur le canevas avec l'outil Texte afin de positionner le signe d'insertion du texte, puis de taper. C'étaient vos deux seules options : fluide ou ordinaire. Avec Inkscape v1.0, cependant, il y a maintenant deux variétés différentes de texte en continu à comprendre.
Comme dans les versions précédentes, vous pouvez cliquer-glisser pour créer une zone de texte rectangulaire sur le canevas lorsque l'outil Texte est sélectionné. En tapant dans cette zone, vous obtiendrez un texte en continu qui, en pratique, se comporte avec la même fluidité que le texte des versions précédentes d'Inkscape, mais avec une meilleure compatibilité en dehors du programme.
The image below shows a single piece of flowed text that was duplicated twice (and the text color changed). You can see that each container has a small diamond-shaped handle at the bottom-right corner: dragging this resizes the container and re-flows the text, as seen in the black and red text versions. The one with the blue text was achieved in the same way, but the handle was deliberately dragged such that the container size was too small for the text it needs to contain. You can see that Inkscape draws the container in red in this situation, as a visual indicator that the text has overflowed outside of the allowable space. In this example, it’s pretty obvious that the text has overflowed the last container, but that’s not always the case. When dealing with large amounts of text in a bigger container, you may not notice that the border turns red when you add a word into the middle of the prose. The second flowed text type, referred to as “Column mode”, goes some way to addressing this possibility.
L'image ci-dessous montre un seul morceau de texte en flux continu qui a été dupliqué deux fois (et la couleur du texte a été modifiée). Vous pouvez voir que chaque conteneur a une petite poignée en forme de losange dans le coin inférieur droit : en la tirant, on redimensionne le conteneur et on refait couler le texte, comme on le voit dans les versions de texte noir et rouge. La version avec le texte bleu a été réalisée de la même manière, mais la poignée a été délibérément déplacée de sorte que la taille du conteneur est trop petite pour le texte qu'il doit contenir. Vous pouvez voir qu'Inkscape dessine le conteneur en rouge dans cette situation, comme un indicateur visuel que le texte a débordé de l'espace autorisé.
Dans cet exemple, il est assez évident que le texte a débordé du dernier conteneur, mais ce n'est pas toujours le cas. Lorsqu'il s'agit de grandes quantités de texte dans un conteneur plus grand, vous ne remarquerez peut-être pas que la bordure devient rouge lorsque vous ajoutez un mot au milieu de la prose. Le deuxième type de texte fluide, appelé « mode colonne », permet de remédier en partie à cette situation.
Column mode begins life as ordinary, non-flowed text. Just click on the canvas with the Text tool, and begin typing (or paste in some already written content). But, instead of beginning the tedious task of manually entering line breaks, look at the right-hand edge of the text box, where you’ll find a small diamond-shaped handle. Start dragging that handle and you’ll see a pair of vertical blue guides appear (representing the left and right edges of the “column”), and your text will be flowed to fit between them. What’s important about this mode is that it sets the width of the flowed text, but doesn’t constrain the height. This has the advantage that you’ll never accidentally clip the end of your text with the flow container, but it also means that your text can flow to be taller than you intend, possibly leading to it interfering with other parts of your design. Where this type of flowed text comes into its own, therefore, is in loose designs where you want to tweak the column width dynamically to see what works best for your particular layout (think posters and leaflets), rather than designs which already have well defined areas of a specific height in which the text has to fit (such as magazines or newsletters).
Le mode Colonne commence par un texte ordinaire, non coulant. Il suffit de cliquer sur le canevas avec l'outil Texte, et de commencer à taper (ou de coller du contenu déjà écrit). Mais, au lieu de vous lancer dans la tâche fastidieuse de la saisie manuelle des sauts de ligne, regardez le bord droit de la zone de texte où vous trouverez une petite poignée en forme de losange. Faites glisser cette poignée et vous verrez apparaître une paire de guides bleus verticaux (représentant les bords gauche et droit de la « colonne »), et votre texte s'écoulera pour s'insérer entre eux.
Ce qui est important dans ce mode, c'est qu'il définit la largeur du texte coulé, mais n'en limite pas la hauteur. Cela présente l'avantage de ne jamais couper accidentellement la fin de votre texte avec le conteneur de flux, mais cela signifie également que votre texte peut s'écouler plus longuement que prévu, ce qui peut le faire interférer avec d'autres parties de votre conception. Par conséquent, ce type de texte coulant est particulièrement utile dans les conceptions libres où vous souhaitez modifier la largeur des colonnes de manière dynamique pour déterminer ce qui convient le mieux à votre mise en page particulière (pensez aux affiches et aux dépliants), plutôt que dans les conceptions qui ont déjà des zones bien définies d'une hauteur spécifique dans lesquelles le texte doit s'insérer (comme les magazines ou les bulletins d'information).
Technical Details With two different ways to create flowed text, let’s take a look at the technical details behind these new features. Feel free to skip this section if you just want to use them as an artist, and aren’t interested in what happens in the XML code. The first thing to know about both of these approaches is that Inkscape adds an SVG 1.1 compatible fallback implementation when you save your file. This can potentially mean that Inkscape’s XML editor is a little misleading: look at it just after creating some flowed text, and you’ll see a different structure than if you’d saved it and re-loaded the file. Let’s start by looking at the structure that is used as soon as you create your content.
Détails techniques
Avec deux façons différentes de créer du texte fluide, examinons les détails techniques de ces nouvelles fonctionnalités. N'hésitez pas à sauter cette section si vous souhaitez simplement les utiliser en tant qu'artiste et que vous n'êtes pas intéressé par ce qui se passe dans le code XML.
La première chose à savoir sur ces deux approches est qu'Inkscape ajoute une implémentation de repli compatible SVG 1.1 lorsque vous enregistrez votre fichier. Cela peut potentiellement signifier que l'éditeur XML d'Inkscape est un peu trompeur : regardez-le juste après avoir créé du texte fluide, et vous verrez une structure différente de celle que vous auriez vue si vous aviez enregistré et rechargé le fichier. Commençons par examiner la structure qui est utilisée dès que vous créez votre contenu.
The click-drag type of flowed text consists of two parts: the text itself, and the rectangle that constrains it. The latter is created as a hidden object in the <defs> section of the XML, and is then referenced via the “shape-inside” CSS property, within the style attribute of the svg <text> element. In the image below, you can see the highlighted text on the right which references “rect98”, the ID of the rectangle near the top of the left-hand pane. As you can also see on the left, the <text> element just contains a single <tspan> as a child, which contains the entire text string. Column mode is fairly similar, but there’s no need to reference a hidden rectangle. Instead of the “shape-inside” CSS property, Inkscape inserts an “inline-size” property which defines the width of the column. Once again the text itself lives as a single line within a solitary <tspan> child element.
Le type de texte coulé par clic-glissement se compose de deux parties : le texte lui-même et le rectangle qui le contraint. Ce dernier est créé en tant qu'objet caché dans la section <defs> du XML, et est ensuite référencé via la propriété CSS « shape-inside », dans l'attribut style de l'élément svg <text>. Dans l'image ci-dessous, vous pouvez voir le texte en surbrillance à droite qui fait référence à « rect98 », l'ID du rectangle situé près du haut du volet de gauche.
Comme vous pouvez également le voir à gauche, l'élément <text> ne contient qu'un seul <tspan> comme enfant, qui contient la chaîne de texte entière.
Le mode colonne est assez similaire, mais il n'est pas nécessaire de faire référence à un rectangle caché. Au lieu de la propriété CSS « shape-inside », Inkscape insère une propriété « inline-size » qui définit la largeur de la colonne. Une fois de plus, le texte lui-même vit sur une seule ligne dans un élément enfant <tspan> solitaire.
Unfortunately, both of these approaches are broken in web browsers today. Whilst the “inline-size” method is well supported in modern browsers, in my testing it appears to have an effect only on HTML content, and does not work for SVG files. The “shape-inside” CSS property, on the other hand, is not currently supported by any browsers. It is part of the CSS Shapes specification, but was dropped from Level 1 of the spec (the one the browsers have implemented), and moved to Level 2 (the one they haven’t, yet). On the surface, therefore, it might seem that flowed text hasn’t really advanced much. We’ve gone from a non-standard, unsupported technique to a pair of nearly-standard, but still unsupported techniques. Yet, if you save a file with flowed text from Inkscape 1.0.x and load it into a browser, the text is visible – line breaks and all. So what’s going on?
Malheureusement, ces deux approches ne fonctionnent pas dans les navigateurs Web actuels. Alors que la méthode « inline-size » est bien supportée par les navigateurs modernes, dans mes tests elle semble avoir un effet uniquement sur le contenu HTML, et ne fonctionne pas pour les fichiers SVG. La propriété CSS « shape-inside », quant à elle, n'est actuellement prise en charge par aucun navigateur. Elle fait partie de la spécification CSS Shapes, mais a été retirée du niveau 1 de la spécification (celui que les navigateurs ont mis en œuvre) et déplacée au niveau 2 (celui qu'ils n'ont pas encore implémenté).
À première vue, on pourrait donc penser que le texte fluide n'a pas vraiment progressé. Nous sommes passés d'une technique non standard et non prise en charge à une paire de techniques presque standard, mais toujours non prises en charge. Pourtant, si vous enregistrez un fichier avec du texte fluide dans Inkscape 1.0.x et que vous le chargez dans un navigateur, le texte est visible, avec les sauts de ligne et tout le reste. Que se passe-t-il donc ?
You can see the reason for this apparent support if you examine the file via the browser’s developer tools, or if you load the same file back into Inkscape and look at the XML editor. At first all seems to be as expected: the <text> elements are present, with their corresponding “shape-inside” or “inline-size” properties, but when drilling further down to the text itself, we’re faced with a structure like this. The single <tspan> element, containing the entire text, has been replaced with a separate <tspan> for each line in the resultant output – the same sort of structure you would expect to see if you had manually entered the line breaks. These elements are used for positioning each line, but then a second level of <tspans> is used to style the text. We’ve gone from a single child, one-level deep, to a collection of two-level children. This is the SVG 1.1 fallback content that allows the current batch of browsers to display the content as it appears in Inkscape.
Vous pouvez voir la raison de cette prise en charge apparente si vous examinez le fichier via les outils de développement du navigateur ou si vous chargez le même fichier dans Inkscape et regardez l'éditeur XML. Au début, tout semble se dérouler comme prévu : les éléments <text> sont présents, avec leurs propriétés « shape-inside » ou « inline-size » correspondantes, mais lorsque l'on descend plus bas jusqu'au texte lui-même, on se retrouve face à une structure comme celle-ci.
L'unique élément <tspan>, contenant l'ensemble du texte, a été remplacé par un <tspan> distinct pour chaque ligne de la sortie résultante - le même type de structure que vous vous attendriez à voir si vous aviez saisi manuellement les sauts de ligne. Ces éléments sont utilisés pour positionner chaque ligne, mais ensuite un deuxième niveau de <tspan> est utilisé pour styliser le texte. Nous sommes passés d'un enfant unique, à un seul niveau de profondeur, à une collection d'enfants sur deux niveaux. Il s'agit du contenu de repli vers SVG 1.1 qui permet au lot actuel des navigateurs d'afficher le contenu tel qu'il apparaît dans Inkscape.
This change of structure has repercussions. Because it produces the expected visible result in a browser, it will probably serve the needs of 99% of users. But it also changes the nature of the text. What was previously a single string is now broken into separate blocks: this could potentially have an effect on screen readers and search engines, depending on how they treat <tspan> elements. It would definitely have an effect on JavaScript programmers who want to dynamically find or change the text on the page, or had hoped to use code to alter the column width or rectangle size with the content flowing automatically to suit. This does raise some questions about how these files will fare in the future. If browsers do start supporting “inline-size” on SVG text, or add support for CSS Shapes Level 2, how will they behave when faced with text that already has line-breaks? It’s possible that this could result in additional automatic line breaks being inserted which conflict with those that Inkscape has already provided, breaking the intended layout.
Ce changement de structure a des répercussions. Comme il produit le résultat visible attendu dans un navigateur, il répondra probablement aux besoins de 99 % des utilisateurs. Mais il modifie également la nature du texte. Ce qui était auparavant une seule chaîne de caractères est désormais divisé en blocs distincts : cela pourrait éventuellement avoir un effet sur les lecteurs à l'écran et les moteurs de recherche, selon la façon dont ils traitent les éléments <tspan>. Cela aurait certainement un effet sur les programmeurs JavaScript qui veulent trouver ou modifier dynamiquement le texte sur la page ou qui avaient espéré utiliser un code pour modifier la largeur de la colonne ou la taille du rectangle, le contenu s'y adaptant automatiquement.
Cela soulève quelques questions quant à l'avenir de ces fichiers. Si les navigateurs commencent à prendre en charge le format « inline-size » pour le texte SVG ou ajoutent la prise en charge des formes CSS de niveau 2, comment se comporteront-ils face à un texte ayant déjà des sauts de ligne ? Il est possible que cela se traduise par l'insertion de sauts de ligne automatiques supplémentaires qui entrent en conflit avec ceux qu'Inkscape a déjà fournis, brisant ainsi la mise en page prévue.
But these concerns are purely hypothetical at this point, whereas the problems with flowed text in v0.92 are very real. The changes in version 1.0 are a definite improvement, and make it an obvious choice if you wish to use flowed text in your designs. The details above really matter to only a minority of web developers, so shouldn’t prevent you making the switch. If you really don’t want the SVG 1.1 fallback text included in your file, it can be turned off in the Preferences dialog (Input/Output > SVG Export pane). Note, however, that this will affect only newly created flowed text – any previously saved file that already contains multiple <tspan> elements will still maintain that structure.
Mais ces préoccupations sont purement hypothétiques à ce stade, alors que les problèmes avec le texte fluide dans la v0.92 sont très réels. Les modifications apportées à la version 1.0 constituent une nette amélioration et en font un choix évident si vous souhaitez utiliser du texte coulant dans vos créations. Les détails ci-dessus ne concernent qu'une minorité de développeurs Web et ne devraient donc pas vous empêcher de faire la transition.
Si vous ne voulez vraiment pas que le texte de repli vers SVG 1.1 soit inclus dans votre fichier, vous pouvez le désactiver dans la boîte de dialogue Préférences (panneau Entrée/Sortie > Export SVG). Notez, cependant, que cela n'affectera que le texte fluide nouvellement créé, tout fichier précédemment enregistré qui contient déjà plusieurs éléments <tspan> conservera leur structure.
Other Changes There are a couple of other changes to mention regarding flowed text, though they’re relatively minor points. One feature of 0.92 was the ability to convert flowed text into ordinary text via the Text > Convert to Text. This would “apply” the line-breaks by converting the content to a SVG 1.1 compatible <text> element with multiple <tspan> children. This no longer works in version 1.0, and has no effect on the structure of the XML. Saving the file will insert an SVG 1.1 compatible version of the text however (as discussed in the previous section), but it also inserts some CSS which will cause Inkscape to still treat such content as flowed. Essentially if you actually want to convert from flowed text to fixed line breaks in a way that Inkscape will recognise, you have little choice but to manually insert the breaks, or to remove the new CSS from a saved file. As far as I can tell, this now makes the Convert to Text menu option completely redundant, as any attempt to use it simply puts a “No flowed text(s)” message in the status bar, and has no effect on the text or SVG structure.
Autres changements
Il y a quelques autres changements à mentionner concernant le texte fluide, bien qu'il s'agisse de points relativement mineurs.
Une caractéristique de la 0.92 était la possibilité de convertir du texte fluide en texte ordinaire via la commande Texte > Convertir en texte. Cela permettait d'« appliquer » les sauts de ligne en convertissant le contenu en un élément <text> compatible SVG 1.1 avec plusieurs enfants <tspan>. Cela ne fonctionne plus dans la version 1.0, et n'a aucun effet sur la structure du XML. Cependant, la sauvegarde du fichier insérera une version compatible SVG 1.1 du texte (comme expliqué dans la section précédente), mais il insèrera aussi un peu de CSS qui fera qu'Inkscape traitera toujours ce contenu comme un flux.
Essentiellement, si vous voulez réellement convertir du texte fluide en des sauts de ligne fixes d'une manière qu'Inkscape reconnaîtra, vous n'avez guère d'autre choix que d'insérer manuellement les sauts ou de supprimer le nouveau CSS d'un fichier enregistré. À ma connaissance, cela rend maintenant l'option de menu Convertir en texte complètement redondante, puisque toute tentative de l'utiliser affiche simplement un message « No flowed text(s) » (Pas de text fluide) dans la barre d'état, et n'a aucun effet sur le texte ou la structure SVG.
Rather than fix the line breaks, what if you want to un-flow your words, to revert them to a single line of ordinary SVG text? In this case, the program is oddly contradictory as to the method you use. Version 0.92 offered the Text > Unflow menu option, which still works for click-drag style flowed text in version 1.0. It’s always had a nasty habit of moving the un-flowed text quite a distance from the original flowed version for some reason, so if you do use this, and your text seems to disappear entirely, try zooming out and panning around. For reasons best known to the Inkscape developers, this approach doesn’t work for text that has been flowed via column mode. To revert this to a single line, you need to Ctrl-click on the diamond handle used for adjusting the column width. To further add to the confusion, this same technique does not work with the diamond handle at the bottom right of the rectangle used for click-drag style flowed text. Come on devs, how about a little consistency!?
Plutôt que de corriger les sauts de ligne, que faire si vous voulez dé-couler vos mots, pour les ramener à une seule ligne de texte SVG ordinaire ? Dans ce cas, le programme est étrangement contradictoire quant à la méthode à utiliser. La version 0.92 proposait l'option de menu Texte > Désencadrer, qui fonctionne toujours dans la version 1.0 pour le texte fluide par cliquer-glisser. Pour une raison quelconque, cette option a toujours eu la fâcheuse habitude de déplacer le texte non fluide à une certaine distance de la version fluide originale. Si vous utilisez cette option et que votre texte semble disparaître complètement, essayez de faire un zoom arrière et de faire un panoramique.
Pour des raisons bien connues des développeurs d'Inkscape, cette approche ne fonctionne pas pour le texte qui a été coulé en mode colonne. Pour revenir à une seule ligne, vous devez faire un Ctrl-clic sur la poignée en forme de diamant utilisée pour ajuster la largeur de la colonne. Pour ajouter à la confusion, cette même technique ne fonctionne pas avec la poignée en diamant située en bas à droite du rectangle utilisé pour le texte fluide en mode clic-glissement. Allez, les développeurs, un peu de cohérence !
The final change to mention is a small but important usability improvement. If you use the Text > Flow Into Frame option to flow text into multiple shapes on your canvas, the order in which the shapes are filled is now based on the order in which you select them. Previously it used the selection order in reverse, which is less than intuitive, so it’s good to see this change make its way into the program. It makes the behaviour more familiar to anyone who has ever used a desktop publishing program, such as Scribus – though I still maintain that Inkscape is a poor substitute for a real DTP application for anything but the most basic of page layouts. Next time, we’ll conclude this part of the series by looking at the support that has been added for new font types in Inkscape v1.0.
La dernière modification à mentionner est une petite, mais importante amélioration de la convivialité. Si vous utilisez l'option Texte > Encadrer pour insérer du texte dans plusieurs formes sur votre canevas, l'ordre dans lequel les formes sont remplies est désormais basé sur l'ordre dans lequel vous les sélectionnez. Auparavant, l'ordre de sélection était inversé, ce qui était loin d'être intuitif, et c'est donc une bonne chose que ce changement ait été intégré au programme. Il rend le comportement plus familier à quiconque a déjà utilisé un programme de publication assistée par ordinateur, tel que Scribus - même si je maintiens qu'Inkscape est un piètre substitut à une véritable application de publication assistée par ordinateur pour tout ce qui n'est pas la mise en page la plus basique.
La prochaine fois, nous conclurons cette partie de la série en examinant le support qui a été ajouté pour les nouveaux types de polices dans Inkscape v1.0.