Text Tool Phase 3
When I started work on the text tool, I had planned it in three phases.
The first phase was going to be the on canvas editor. And I handled inserting and removing text, moving the cursor around, and creating simple wrapping areas. IME support and simple copy-paste was also handled during this phase.
The second phase was about rich text editing. I created a text properties docker, implemented a font database, style presets, a glyph palette and went over each property individually to make 100% sure it worked. I wrote a bunch of blogposts about this in the past (text layout, fonts, OpenType, metrics, and more).
Which brings us to phase three…
## Removing the old Rich Text editor and shortcuts.
Previously, Krita used a dialog to allow rich text editing. The dialog happened because after several years of working on Calligra (which Krita was part of for a good while), none of the core devs were confident in their ability to conjure a full-featured on canvas rich text editor in a short amount of time. Then, the plan became to have a SVG source editor as the main way to interact with text… But then we realized that SVG text is very verbose, even compared to the pretty verbose HTML. Furthermore, we only had a few weeks left, so we had to quickly put something together that could produce SVG output without being too alienating.
The old rich text editor window, next to the preview on-canvas. In a dark mode, the theming issues become especially prevalent, here the text is black both in the editor as in the preview, but the background is dark grey. This was one of the core headaches with this editor.
It’s interesting to reflect back on this, we had assumed at the time that the artists using our program would be quite technically competent. Over the past few years however Krita has picked up so much steam that it frequently ends up being the program to teach people that there’s such a thing as “working memory” and that one can run out of said memory when they, for example, try to make a 60 fps animation at 4K resolution.
The rich text editor also didn’t help matters here because the conversion to and from SVG text wasn’t optimal: SVG 1.1 doesn’t have a concept of lines or line wrapping, being more a graphical description format like PDF than say, a rich text document. Furthermore, there were endless issues with theming, font size handling, differences between Qt’s rich text implementation and HTML overall, fonts, you name it.
So, given that the first two phases left us with a functional on-canvas text editor that can style text, it felt good to remove the rich text editor. The source editor remains, because it can still do some advanced tricks if you know SVG very well, but for the vast majority of text tasks it is unnecessary.
That left the shortcuts. Because the rich text editor was implemented with KXmlGui, each of the entries in the toolbars was a QAction that could be configured. I went and implemented the majority of those as shortcuts in the text tool. Because the majority of these shortcuts just changed a single property value, I took inspiration here from how the old artistic text tool was implemented, which is to say, using the setData() function on QAction. The setData takes a struct that contains simple instructions on which property to edit, and how to edit it (increase it, or set a specific value, for example), and this is then used to test the toggledness on the action or generate the appropriate property setting command.
The shortcuts are a little interesting in that the text tool needs to do its own shortcut matching, instead of using the global system. This is because the text tool needs to be able to discern text input from shortcuts, as well, all QKeySequence::StandardShortcuts for text navigation and selection have been implemented directly into the text tool. The latter needed to be handled directly because if you are working with vertical text you will want to have the up/down keys be for navigating forward/backwards in the text. In practice, this means that the tool first tests non-modifier arrow keys and basic input. Then it checks the direction and writing mode of the text, and ensures that any directional keys get replaced by their expected variants for said direction and writing mode. It then checks the shortcuts and finally the standard sequences. This latter order is because some standard sequences use the same shortcuts that are typically reserved for property changes (for example, deleting a line and setting underline can both have the `Ctrl + U` shortcut).
Only a few pre-existing shortcuts are supported right now, because I was feeling the end of the project looming. It is also a very good starting point for people who are interested in hacking on the text tool, as it makes you think about how the text properties function, so I have left it alone for now.
## Replacing the tool options.
Next up was replacing the tool options. Tool options within Krita are specifically for changing the behaviour of the current tool, as well as accessing extra functionality, and Krita’s text tool had one that allowed you to set some properties for _new_ text creation, as well as accessing the separate editing dialog.
The old tool options with a “create new text with” group of widgets and an “Edit Text” button.
This was a QWidgets based UI element, and one of the things I’ve been doing with the text tool is that every UI element would be written in primarily QML, using QWidgets only as a fallback. Beyond that, we’ve been trying to use Lager to keep track of data-editing, and tool configuration is a good candidate for a lager model.
The new options are both longer, because there’s more toggles, but at the same time also simpler to use…
As for the options themselves. Like the old options, they allow selecting the default text that new texts are being created with. However, instead of replicating the text properties docker in its entirety, it now provides a drop down to select a style preset. Beyond that, there’s a toggle to use the current presets in the text properties docker.
The text properties docker itself also has a button to open it inside the tool options. This is because I observed multiple people trying to use the “new texts are created with” options (that _were_ labelled as such) in the old widget to manipulate the selected text. Hopefully this’ll guide people to the text properties docker.
Then, there’s the two options for the text tool itself: “Paste Rich Text By Default” and “Use Visual Cursor”. The former is about whether `Ctrl + V` should paste the rich text or the plain text, while there’s separate actions for pasting plain or rich text explicitly. For some reason the majority of word processors always paste rich text by default and never allow you to configure this, even though this is not how anyone wants to use a word processor. It therefore made sense to make this a toggle.
The other is for bidirectional text. The default is the “logical” order of the bidirectional text, that is, the order in which you read it. This has always been a little bit of a headache to programmers, because you end up with a cursor that skips positions and will in some cases go into the opposite direction of the key you’re pressing. This is why a lot of programs offer a “visual” cursor, which will try to follow the direction the keys are pressed in. This too is configurable, as it depends per person which of the two is more intuitive.
Finally, there’s several buttons, some for opening the dialogs like the Glyph Palette or the Source Editor, others for toggling Type Setting Mode and finally a set of buttons for the converter actions. More on these latter two in a bit.
Annoyingly, QML cannot handle popups properly while used together with a QQuickWidget: the popup is clipped by the QQuickWidget bounds (specifically, it’s internal QML scene). In Qt6 there’s a toggle to not have Pop ups clipped to the scene, but that crashes in QApplication when used inside a QQuickWidget. This is a problem because it makes it hard to provide the style preset dropdown (or the font dropdown for that matter). I am trying to find a solution, but in the meantime I’ve made the delegates much smaller.
The CSS style presets now have much more compact delegates to handle being inside a dropdown. I hope I’ll be able to fix the pop-up problem in the coming weeks though, as this is kinda annoying.
## PSD text and vector support.
This was a somewhat tangential project, and I had written most of it even before I had written the on canvas text editor.
PSD vectors are stored as a vector mask on a fill. Because I had previously already written support for the fills, supporting vector masks meant supporting vector shapes. Then, figuring out which layer data describes the stroke, and which describes ‘meta shapes’ like rectangles, ellipses and stars was the rest. The vector masks, in particular PSD’s path format, are interesting in that they have a particular floating point format. Luckily, Scribus already supported loading those paths, so I was able to reference their parsing code and concoct writing code based on it. Most of the work by far was making sure the transforms were 100% correct. I was helped here by Deif Lou, who provided me with a ton of test files to check against.
Text was not as simple. Text in PSD is stored as a PDF structure, which, if you are unfamiliar with PDF, is format not dissimilar to JSON. You can see the way text is stored by opening up a PSD with text as a text file in a given simple text editor. Unlike most PSD data, which is stored in binary (and is best inspected with a hex-editor), the text data is largely stored as ascii text (with actual strings being stored in 16bit BE). Some inspection reveals that the text itself is stored in a range based manner. The whole plain text is written at the start, and then a list of character “sheets” is presented. After all those, a list of numbers of equal size, each presenting what range is occupied by the sheet with the same index. Idem for paragraph properties (PS, unlike SVG 2, can have multiple paragraphs. SVG 1.2 did have multiple paragraphs, but there’s only one real implementation of SVG 1.2 (Inkscape) due its complexity). PSD text is also, notably, stored and sized in pixels, regardless whether the format is saying points (this is because within the Apple ecosystem the two units are the same, while outside it, a digital point is always 1/72th of an inch).
But there were still a number of mysteries. Like, where were the text paths stored? And how about the advanced OpenType features? After I asked on Krita-Artists for sample files, I found the answer: There’s another chunk of advanced text data at the end of the document. This second chunk is far more complex, and, worryingly, it uses numbers for the keys for more recent versions of the Adobe products.
Thankfully, it turns out that this second chunk is in fact shared between the Adobe suite, and the Inkscape project had already done a lot of reverse engineering. While I am now able to read this data and load text from it, there’s still some missing information. It seems there’s like, Line and Cluster-specific positioning and glyph info present in this extra data, and if you write it without said data, Photoshop will complain it is missing. I haven’t had the time to look into this properly, so we can’t write advanced text objects as of now.
Another wrinkle is that text and vectors are per-layer in PSD, while in Krita each vector layer is its own SVG document. So I also had to write some code to explode the Krita vector layers so each shape is written as a separate PSD layer. Similarly, despite being able to load a lot, Krita’s SVG+CSS based text layout is fundamentally different from Adobe’s, so text loading isn’t perfect. None the less, it should provide valuable for people’s archive. Because of these differences, Krita will ask whether you want to load the text layers as text shapes or whether you want to load them as raster data.
I do want to eventually return as figure out that final missing data. As well, because PSD doesn’t do inheritance, I need to fiddle a bit with selecting which properties to set on the paragraph, as the paragraph metrics are important for Krita’s baseline aligment.
## Text on Path/Text in Shape.
Text on path and text in shape were actually going to be tackled in the first phase. But then when Alvin, who was helping me, tried to take a stab at it, he was blocked because Dmitry was extremely unsure about the design. This was a bit frustrating, because I had already made sure that the layout algorithms for both worked fine. I myself decided to focus on getting rich text editing to work, and it wasn’t until I was nearly done with rich text editing that we returned to the discussion about text on path and text in shape.
I never talked about text in shape previously, as it was implemented after I wrote the big text-layout blog post back in 2022. So lets do that now:
The current look and feel for a complex text-in-shape while editing the text. Yellow ellipse, pink triangle and blue polygon are “Inside” shapes. The green rotated rectangle is a “subtract” shape. Both shape padding and margin are applied. The arrows indicate the order of the flow shapes. Icon on the top right is a button for contour mode.
SVG 2 allows wrapping text in shapes, and has some sophisticated toggles to configure how the text is flown into shapes. The simplest is a single text in a single shape with a single subpath.
However, those single shapes can handle multiple subpaths (in which case the line is broken up), and there can be multiple shapes that text can flow into, one-by-one (much like CSS columns).
These flow areas can in turn have other shapes subtracted from them. Finally, shape padding and margin can be used to modify the distance of the text to the related shapes.
Most text-in-shape layout algorithms will do so by taking the shape, drawing line boxes from top to bottom, and fitting the text in the first reasonable line box. This is what SVG 1.2 specified for it’s text in shape. For SVG 2 however, the first line needs to sit snugly against the border of the text wrapping area. For this I implemented an algorithm described by Hans Muller, originally devised for CSS shapes.
Once we have the first position, we want to create a line box. One problem here is the question “how tall is the line box?”, especially in rich text: Text can have different font sizes, and different font sizes can lead to different line widths, depending on whether those differently sized sections get onto the line or are wrapped to the next.
The solution here is to estimate the line height: We check all glyphs that might fit in the next shape-bounding-box width (or height for vertical), and get the max line height from this. Then, the line box is determined, with a single line being able to hold multiple line fragments if the shape boundaries cut through the line. Text is then laid out onto these lines (logically if we take bidirectional algorithm into account), breaking where it is allowed. Finally, text is reordered so it lays out visually, text alignment and justification takes place, and the final line height is calculated. The whole text is then shifted (block wise) upwards by the difference between the estimated line height and the actual line height. I was able to figure out this solution because I kept trying to figure out what Inkscape was doing here, and was able to induce a bug that suggested it does something similar. Said bug got reported.
Some oddities are present in the SVG 2 spec here. For one, it doesn’t ever say whether to include the local transform of the shapes that is being flowed into. Text on path _does_ require this, and usage would become incredibly annoying without it (if you want to flow text into two rectangles, you will need to apply a transform to one of them), which means it _is_ expected, but its absence is very odd. Inkscape _does_ do this, so I implemented this as well. Another thing that can be odd is that because the shapes get _linked_ to the text shape, it is possible for the text to be rotated and be out-of-sync with the linked shape. The only way to have both rotate together is when they are in the same group.
In the context of SVG this linking behaviour makes sense. You can easily imagine a magazine layout where a few rectangles provide columns, and a pull-out quote is laid out into a circle. Said circle then overlaps these rectangles, without overlapping the text.
However, while that makes sense in a magazine context, there was a worry that it might be too complex to interact with. Especially because Krita doesn’t have an object outliner like Inkscape or other specialized vector applications have, so going in and out of groups can be frustrating. Eventually we decided to make it so that Shapes that text flows into is always a child of said text. The text is then stored as a group with shapes and text inside SVG, making it 100% compatible with Inkscape, while within Krita we could simplify the interaction, while keeping all the powerful transformation features.
There’s a downside to this method though: When we resize text in shape, we resize the child shapes. However, the child shapes affect the slow text layout (in particular, the shape-offset operations, which are quite slow), but because the child shapes are children of the text, it becomes next to impossible to update this text independently from the resized shapes. Very frustrating because I did pay a lot of mind to keeping the text layout thread-safe, so had we stayed with a linking model, the text shapes could’ve just been sent to another thread to sort themselves. Thankfully Dmitry decided to take responsibility for taking care of this slowdown. We now block text layout during resizing and update it after the fact. Because of the way bounding rects are calculated however, this does mean we cannot afford to have any text drawn outside the text shapes, which means we’re forced to have our overflow to be always clipped (and truthfully, there’s no clear answer to what overflowed text should look like with SVG 2 anyway, so maybe it’s for the best…).
UI wise, the simplest way to set text in shape is by clicking a shape. Clicking on a border will instead set the text on path, and set the click location as the starting point. This is necessary because right-to-left text needs to be aligned with the end of the path due the way text on path interacts with text anchor in SVG.
The less simple but advanced manner is to use the context menu in the Shape Selection tool to flow texts in Shape. This method allows for setting up a complex flow structure. Similarly, the default tool allows changing the flow shape order, and setting subtract shapes. Both this and the previous method are ways in which such shapes are set up in other programs, so people should be able to find either without consulting the manual.
When a text-in-shape or text-on-path is created, a new button appears that can be clicked to go into contour mode. There, each contour shape can be manipulated as needed. Within the text tool, text on path gains a handle to move the start offset, while text in shape allows dragging the text area to set the shape padding and margin.
Text-on-path doesn’t have an advanced mode like text-in-shape, right now artists will only be able to create texts with a single text path. However, Krita’s text layout _can_ handle multiple text paths in a single text, and even a mix of text and positioned paths. That kind of thing is currently limited to the SVG source editor, as I ran out of time to ensure that the interaction would be nice. Something for the future.
## Type Setting Mode
Type setting mode is a separate mode in the text tool that allows for on-canvas fine tuning and interaction with font metrics. It differs from regular editing mode in that it will show editable font metrics when activated. When the text doesn’t auto wrap, it even shows handles so that the SVG character transforms can be modified over the selection.
Type Setting Mode is kinda interesting in that at first glance it seems like an unnecessary toy mode. After all, if you want to edit the font size, the text properties docker is much more suited, right?
Yet, when gathering input about what artists needed from the text tool, some expressed that they wanted to be able to edit things like font size and line height by on canvas widgets. Others protested: it would interfere with text editing, which seemed a reasonable concern. So it was clear that if such a thing would be introduced, it needed to be optional.
Then there was the issue of the Baseline features. Krita is currently one of the rare text layout implementations that implements alternate baseline alignment. But the baselines are kind of abstract, especially as font makers rarely fill out the OpenType BASE table from which these baselines are derived, meaning they frequently have to be synthesized. So there was also a need to allow people to see the available baselines on canvas.
But there was one final issue. Let’s talk about kerning.
If we conceive of text as being comprised of glyphs, and each glyph can fit onto a little rectangle, like in (movable type) print, and we imagine printing with this.
Then it’s very likely that there will be huge gaps between the glyphs while printed. Therefore, font makers would make the base rectangle smaller and let parts of the letter overhang, a so-called “kern”, so the glyphs would interlock a bit more elegantly.
Movable type was never the only text printing technology. For posters for example, lithography was widely used, and the text printed with lithography was typically hand drawn by the artists. This meant that artists would be able to manually decide the best spacing for a given piece of text. Then, there’s a number of in-between technologies. There was a particular one where designers would work with letter sheets than could be transferred onto a given piece of paper, and I seem to recall there’s a similar technique that relied on clever use of photocopiers.
The precise technologies aren’t very important here, but rather I want to impress that there’s a western practice of spacing glyphs in a text just right, and that the underlying technology greatly affects what is possible. As such, this practice is taught to students of design, and seen as one of the important details that distinguishes a well done piece of typography from a rush job. For the western typographer, to get the kerning just right is to say _you care_.
Now, in the digital era, font makers are able to very quickly define kerns for any pair of glyphs, and while doing text layout the shaper will apply these kerns. This is generally good enough for the majority of use cases… However there’s a technological limitation.
See, if you do rich text layout, you first need to itemize the text into ranges where the font, direction, and script is the same before you hand it over to the shaper to shape. In the above example, you can see that the first letter is much larger than the rest, and there’s no kerning. This is because the font size is different, and thus, during itemization, it’s a different font, and a different glyph run. The shaper cannot apply kerning between these two different runs.
Typically, this is worked around by adjusting the tracking or kerning. CSS however, only has letter-spacing, which is meant to be applied to ranges of text. Meant. In practice, the majority of implementations make it so that letter-spacing modifies the spacing to the right of clusters of glyphs. But not all: some implementations do it to the left when text is right-to-left! If that weren’t enough of a headache, right now, the CSS working group is changing the way letter-spacing works all together.
Using letter-spacing for this is not much of an option then. The CSS-WG suggests that if you really want to do manual kerning, you need to create a special span with reduced margins, as this will give the most control. SVG doesn’t have margins though, as SVG doesn’t have the CSS box-model. But we _do_ have character transforms in SVG.
Character transforms in SVG have been there since the beginning. There’s 5 parts to character transforms: absolute x and y, relative dx and dy, and rotate. Absolute X and Y set the current text position in absolute coordinates to the text origin, and, these break shaping, much in the way line fragments do with auto wrapped text. When the SVG text specifications talk about text chunks, it means ranges of text that have been positioned this way (and since SVG 2.0, also other forms of line fragments). Dx and dy conversely, accumulate, starting from each text chunk start. They don’t break shaping, nor does rotate, which means these three are very suited for this need for manual adjustment. They just needed to be editable.
So when I was looking at these three issues (on canvas adjustments, baseline selection and character transforms) and was deciding on my design, it became clear we needed this separate mode to handle these three things, and also that it wasn’t all that optional: spacing and kerning are a pretty important practice after all.
I then spend 10~ days to get the character transforms right. This was because I decide it would be more useful to calculate the relative positioning from absolute positions rather than to set the relative positions directly. This way, I would only need to calculate where I want the glyph to be, and let the function itself sort what kind of delta positioning that requires. This required me to kind of backtrack from the final position to calculate the point at which the delta x and y are added. This was quite tricky as there’s a lot of modifiers on where a particular transform ends (ligatures, utf32 vs utf16 codepoints, and of course, white space collapse), as well as going backwards, as that involves removing the text-path adjustment, text anchor calculation, absolute offset and finally the textLength offset.
The actual editing of this is provided by two handles at either side of the active selection. Dragging the square handle offsets the whole selection, while dragging the round handle scales and rotates the selection, using the square one as the hinge/origin. I am not fully sold on how this is handled, especially in RTL, and I want to see if I can handle the offsetting better.
With type setting mode, you can transform each glyph individually, allowing for some pretty advanced looking typography. The lines are the metric lines. Hovered line is the Descender, hence it saying “Font Size”.
Next up was changing on canvas properties. This is right now, limited to Font Size, Baseline Shift and Line Height. The baseline shift is modified by dragging the baseline, the font size is modified by dragging either the ascender or descender, and the line height by moving the line height markers, which are ascender and descender + the line-height on either side. Artists will be able to tell which they’re modifying by the hovering name.
Krita slogan in Hindi. Here, we use type setting mode to adjust the size of the second word, and then select the “hanging” baseline to align the text to the head stroke.
Setting the dominant/adjustment baseline can be done by pressing `Shift`, which switches the visible lines to the baselines. Clicking them will set that as the dominant baseline. There’s still an issue here with overlapping lines, and I need to sit down and think about which lines should have priority.
This is pretty useful already, but there’s still a number of unanswered questions:
* Right now, I add a counter transform at the end, this is because when using it, the counter transform felt more intuitive. However, it can also make sense to not have that. Maybe it needs a toggle?
* Similarly, the scaling/rotating code can easily only do scaling OR rotating, and it makes sense to use either. But I am unsure how to provide that in the UI.
* Thirdly, there’s right now no way to set the Absolute transform. I got some functioning unittests for it, but some edge cases look weird and it needs more work before I can expose it to the UI.
* Right now, the Font Size, Baseline Shift and Line Height are all adjusted in Points. I was unsure whether to have them in relative font size, and we’ll need to see if that’s something people prefer.
* I can imagine that some people would like to see a line over the x-height, but the thing is that there’s no real related metric for that. There’s font-size adjust, of course, but newer versions of font-size-adjust are also possible against the capital height, or even the ideographic height. So I just left it out for now.
* The metrics that can be adjusted are all of a certain type, what western Typographers call “vertical metrics”. There’s no controls yet for Tab size, text indent, word spacing and letter spacing, though they could be easily imagined.
* In a similar vein, one could imagine handles for italic/slant, weight or width. These I have been avoiding because of these, only slant can be predicted, the other two are unique to the type face.
* Finally, there’s of course associated shortcuts. I’ve implemented four for moving the offset in any of the four directions, but none for scaling/rotating. This is because I assumed people would definitely want to offset with the keyboard, but was unsure about the others.
Part of these are because Type Setting Mode came in very late. It was always going to be added as last, because, from a surface level it sounds like a frivolous toy mode. When I expressed my intent to create it, some artists even told me they were never going to use it. Not strange: There has been over 30~ years of digital type setting that didn’t need a separate type setting mode. But once you see the whole picture, and more specifically, realize that not all text layout systems are the same, the purpose starts to make a little bit more sense. Whats more, because SVG character transforms have been there since the beginning of the SVG spec, they’re pretty widely supported, so it’ll be very interesting to see what people will come up with.
There’s still a snag though: SVG relative character transforms don’t apply on auto-wrapped text. There’s a little note in the SVG 2.0 spec that these were considered, but ultimately seen as unnecessary. Little bit annoying, but not the end of the world, as someone who aims to wrap in shape, but then fine tune, can do just that. Wrap in shape, convert to pre-positioned text, and fine tune the spacing…
Let’s now finally talk about the converters.
## Conversion actions for text types.
Because previous versions of Krita only supported SVG 1.1 text, it was important that there would be a way for people to convert away from that format. Similarly, if someone had put text-in-shape, or created an Inline wrapping area without intending to, there needed to be a quick way to convert.
Converting away from “Pre-Positioned Text” (SVG 1.1 text with white space collapse), required first removing all collapsed white spaces. Then, inserting new lines for each SVG text chunk with absolute positioning. All of this needed to be done in reverse because insertion and deletion changes the indices. By going in reverse the indices that still needed to be modified were kept the same until modification. For inline size, the inline-width of the text is tested before conversion, and set after conversion.
Converting towards Pre-Positioned text on the other hand was much easier, as it was a case of figuring out the current position and making sure it was being set as an absolute transform. Because we are just working with the layout results, we can convert from text-in-shape to pre-positioned and keep the lines positioned the same.
The leftmost polygon here is a text in shape, while at the right, the text has been converted to pre positioned SVG 1.1 text. The difference is only visible because of the different selection rectangles.
These actions were implemented in the text tool for single shapes and in the shape select tool for multiple ones.
## Wrap up
And that was all of Phase 3, which means I am done for Krita 5.3. As of writing, we’re in feature freeze. This means I will be focusing on fixing bugs in the coming few months. But also writing documentation, and release notes. I am slightly worried, as I didn’t get a lot of feedback near the end, and am left wondering what kind of bugs I will see in the coming months.
Some things didn’t get in from the original plan. Most notably: color and stroke setting. Krita _can_ set these things, the controls for it need to be ported to QML, and I was told to avoid it, as it would be too big. Due these missing controls, stroke can only be set for the whole text, while the fill can only be a color for a selection, or gradient set on the full text. Beyond that, a visibility mode for formatting marks (that show where the spaces are and what type of spaces they are) didn’t get in either. It’s by itself not complex to implement, but it needs good design of the marks, and I just didn’t feel like I could give it the attention it deserves because of the amount of work that went into text in shape. It is also not yet a full implementation of SVG 2. Text-orientation is the biggest missing element here, but I told myself I wasn’t going to work on that until there was a decent enough text editor. There’s also things like better justification, hyphenation and color font support, but those were never going to be in 5.3.
It’s going to be interesting to see how the usability is going to be tweaked over the coming years. A good number of properties can be found directly on the canvas and the main dockers, so I do feel everything is pretty discoverable. However, I did have to put the advanced text-in-shape actions into a right click menu, and generally people don’t find those. It will also be interesting to see what people will do with the type setting mode and how that’ll evolve. I know people want an on canvas property editor, but I had been holding off on that because the design would be tricky to get right, as well, in Qt5 Android platform integration doesn’t yet obey the enum value that asks for the copy-paste menu to be hidden. So that menu would probably float over any on-canvas property menu. Qt6 fixes this, but I don’t know if it does for Apple products as well.
Overall, this was a pretty ambitious project. One thing that probably didn’t bleed through in all these blog posts is that probably at a least a third of the work was communication. I myself understood that when I started it, but I think it has a tendency to get lost when you read tech blogs, so I’ll expand a little about it. Basically, every step I took, I spend some time talking with the other Krita developers (primarily Dmitry, who reviewed all my work) what I wanted to do, and how I was going to approach it. This isn’t just to get the design sorted, but also to avoid blind-siding people.
I also wrote these blog posts, and wrote little feature introductions for the people on Krita artists. The purpose of the latter was to get people to understand with what I am trying to do, I am unsure how successful I was there. The technical blogposts did appear to be pretty helpful, and I got a lot of feedback from other FOSS people that these blog posts were useful. While text layout is not a rare programming topic, advanced text layout is only really done by a handful of people, and I imagine a lot of them are too exhausted after they got the thing to work to write a blog post about it.
Anyway, when I first started, my colleague Agatha had described text layout like a “Hydra” and that every update I made felt like I was chopping those heads off one-by-one.
I declare the Hydra dead: Krita has a decent text tool now.
## Appendix
### SVG Character Transforms.
Just checking how widely supported the SVG character transforms are… Inkscape and Chromium do pretty well. Firefox does a little bit odd. SVG Tiny 1.2 _does_ include the character transforms, but QtSvg doesn’t support them (or Gwenview isn’t using QtSVG). Then there’s a lot of epub readers that have varying degrees of support. The sample SVG-based epub3 files do _use_ multiple character transforms, but that by itself doesn’t mean much. KoReader for example only supports the first transform, even with text-on-path, which is interesting given that LunaSVG, which it uses, _does seem_ to have support for it if you look at the code. KoReader _does_ apply textLength, which is useful, but then other epub readers I’ve tried don’t apply textLength, but only transforms. It’s a bit of a mixed bag, but the wide browser support is heartening (good enough if you just want to tweak spacing while maintaining an accessible SVG text element).
Our “The Two Towers” sample in Firefox 145. Firefox doesn’t support baseline shift (but does support white-space, so we can preserve the line break… but then doesn’t support SVG units, so all units need to be suffixed with px)
Chromium 142, it supports SVG 1.1 fully, but no white space, so I had to convert to pre-positioned text for this to work. Neither browser supports optical size in SVG, so the large capitals are less delicate than in Krita.
The sample in Inkscape 1.2, I had to convert the font from Amstelvar to DejaVu Serif, as it didn’t seem to like Amstelvar (probably because it is a variable font).
It’s by far more widely supported than SVG 2 text wrapping though, of which the only known (to me) implementations are Inkscape and Krita. Ideally, Krita, like Inkscape, would ensure there’s fallback positioning written. The absolute transforms are 100% intended to provide a fallback when the auto wrapping is not yet supported. The reason Krita isn’t doing this is because it needs a separate code path so it only saves this to exported SVG layers, and as well, I am not 100% confident in my conversion code. When that time comes it might also prove useful to save the textLength, but I’m still mulling over this.
A final note is that Krita, like Inkscape, has a “convert text to paths” function. When converted to paths, text can be modified as desired, but then it loses the accessibility of being text that can be selected, which you’d want to avoid in an interactive environment.
