Writing a modern text tool for artists by Wolthera van Hövell tot Westerflier

hello everyone my name is voltera I'm currently rewriting uh Crest texto and in this presentation I'm going to talk to you about how I approach this projects first I'm going to explain why this was necessary and for that I'm going to go through a very brief history of uh cr's various text tools uh then I'm going to explain how I split up the projects and uh finally I'm going to show off some of the UI features and explain how we designed them and how we came up with their precise usage so first a bit of History uh Once Upon a Time C had two Texs and that was because within the cigra suite uh programs could share code with one another so CR which was part of the suite uh shared its first text tool with kiga words the word processor and it second text tool with Gabon the vector application both of these text tools had their own text layout and could do different things but neither of them integrates very well with CR and that was mainly because they were really part of these other programs when CR split off from The ligra Suite uh we also had to duplicate all of this codes so when we started on the uh Vector overhaul for 4.0 we mainly wanted to switch from odg to SVG as our internal file format but we also wanted to get rid of these two text tools and replacing with uh a single text tool this new text Tool uh was going to be a lot simpler it was just going to be used based on uh qex layouts and was going to have a little window where people could to type text in and then in the future people could extend it right so this didn't really work out like we managed to create this text tool and we managed to release it but we never really managed to extend it the largest problem here was that uh qex layouts the the code wasn't very accessible to us and it also did not support all the features we need so it was every time a programmer came in and said well I'm going to fix the text Tool they' uh go in to the code and a week later they'd show back up and say yeah this is impossible there's too much that needs to be changed so this effectively uh prevented all work uh being done on the text tool and artists had to deal with with a very clunky UI for the next 5 years okay fast forward to 2022 we had a road map discussion and uh in the year before that road map discussion I'd been working uh I'd been studying uh how other people had been doing the text tool I've been studying how other programs had been doing uh their text layouts so at the 22 road map discussion I represent my findings and people were like okay wter you're going to do the text tool the year after that uh I spend it on rewriting the text layout shifting away from uh Q text layout and using a base of hakam half buus free type and the uni break I managed to uh yeah I managed to support most of the SVG features I managed to get WRA around text working and in the meanwhile I also started the CR uh yui design process which starts with asking artists how they plan to use the thing um and so in my case I specifically asked them hey what exactly do you expect from this texto I started this thre on cre artist and I got a lot of useful Fe feedback and of this feedback as well as the lessons I learned from the uh uh from the one year of working on a text layout was uh collected into a huge document of 5,000 words uh which also contained uh problems uh future developments things we had to keep in mind and a lot of UI mockups I then discussed uh this plan with uh my fellow contributors secr and from this a three-phase project uh was developed to uh yeah in which the text tool would be created uh each of these faces uh would be doing a uh deep refactor type of thing to keep the code nice and usable while also having a fa part of it that had user facing changes and this was because um I felt that people had been very patiently waiting for a new text tool and I wanted to make sure that uh each time I went in to change uh the underlying code there would be also user facing changes so they still they had the feeling that uh some progress was being made so phase one is um on cus plain text editing uh the Deep uh rework that this required was actually uh teaching the text layout what cursor positions are as well as uh yeah as well as actually getting the editing to work getting undo uh states to work uh phase two of this uh had uh is the rich editing which is what I'm working on right now and the uh yeah the the refactoring part of this is is that the data structure had to be Rewritten because uh the original data structure was a tree of pointers which is very annoying for for to to memory manage so we've uh switched it way to a tree of uh structs that um so that we don't have to do with memory management so much it was still pretty intense refactor uh but now we don't have to uh worry about memory leaks and uh I'm currently working on actually getting the UI to work properly the Final Phase uh will involve uh a so-called type setting mode and uh this is just a fairly Advanced feature after the first two phases the text tool will uh be already very usable so this third phase is uh just extra niceness to uh finish it all off and uh after two years of working on it it's works so now that the Jig Is up let's take a look at the UI the first phase was uh oncanvas text editing this was uh the feedback on this was quite interesting in that there was no feedback at all so um I had to spend a lot of time studying other programs like how do they handle cursor movements uh specifically um how do they handle selections how do they handle uh going to the uh start of a sentence to the end of a sentence of these shortcuts uh I had to study how um different uh writing modes when a program supported this uh how the cursor movement was handled on those I spent a significant amount of time trying to get the uh cors so the the the text cursor to work right uh for example in ligatures it's uh sits between uh the different parts of the lature and when the text is italic it will slant along uh by directional text uh gets a little text flag to show where the next character is going to be placed um and finally uh one of the things that was uh really uh important to us was trying to get input methods to work uh because we have quite a few uh East Asian users which is also why we really wanted to make sure that we uh could allow for vertical text uh layout and uh with an input method so I'm using ibus here um a East Asian language user can just use a quop keyboard to type uh their the the fonetic the Latin fonetic equivalent of uh their words and not just have the fanatic characters show up for for their specific U uh culture but also being able to choose between Alternatives that they that they meant instead so support for this was is part of hug sort of uh but because I had to uh type uh or because um of the the whole editor is uh completely on canvas and it's kind of separated from cute I had to manually take all the parts uh that cute offers for uh input method Sports and uh tied in manually um this is also going to be uh important on Androids later because uh this is how the virtual keyboards on mobile phones is is implemented uh another thing some things that were kind of um unexpected but that I ended up implementing anyway uh was uh I improved the speed of text oh yeah because this is still on the uh text because um the vectors were a little slow so I spent a few weeks on uh trying to speed it up so uh the feedback was instantaneous uh I also spent sometime on uh getting all these little lines you see here like these Dash lines and of course the cursor itself to be um 4K compatible because uh one of the feedbacks we got when I was testing this with users was that one user couldn't see uh the the uh decorations as we call them so I went through all of Crest decorations and made them um High DPI compatible uh finally I also Al implemented uh paint order the thing is is that when you're um working with fonts the um um sometimes a cliff might be made up of multiple Parts this is very common with variable fonts but also very common with uh joint and if you then make an outline and draw it on top of everything this is bug uh then it's uh it looks really strange because it shows that this little outline uh or that this this Cliff is made up of multiple outlines so if you put it if you put the outline behind the uh text or behind the fill of the text um it just looks much more much better and it's much more readable in general so all of this took about half year in total uh there was a lot of fiddlin a lot of trying to get the undo STS to work just right and um yeah I I hope I didn't miss anything off this so then going to the next part so for the second phase reach text editing this is the phase I'm currently in I got a lot of feedback uh artists were very split about where they wanted to have the text properties some of them want to have it in a context menu While others wanted to have it uh in a Docker and this is very much a split between people who work with big workstations where the Dockers are very far from the center of the screen and people who work uh with uh laptops where the Dockers are very much uh in the within the field of vision in the end it had to be a Docker because if I'm using the text tool to select something I can only select one um object at a time and this was a problem because what all the artists did agree on was that they want to be able to edit multiple text objects at the same time which is now possible because text properties are in a Docker so we can select multiple text properties and with uh the shape selection tool and uh change their font features the second bit of feedback that we got that I thought was pretty interesting was not too many properties please and when I asked this person is that because it's annoying that you can't find the properties that you need or is it because it's intimidating they responded with it's intimidating and having seen many different uh text property duckers in different programs I can't help but agree so before I explain how we're solving this I first need to explain a um UI habit we have within CR is is that uh within CR we try to keep uh the UI unblocking and to show that I'm going to try to transform this layer and I'm going to see skew it and then even though the transation is still ongoing when I switch back to a different tool the transform applies and the reason behind this is that um we don't need to show a confirmation dialogue asking do you really want to apply this transform because the user can just undo it so going back to the text properties the way we solve the problem of too many properties is that we only really show the Cur ones that are currently being applied and as well when we select the text the ones that are currently being inherited as we with uh CSS inheritance people can then add properties and set them and just remove them and uh so this is a non-blocking shift people can just set a property that they can see and remove them when it turns out it doesn't make them happy so this is important because it's about 50 properties and we cannot expect artists to remember what each property does and most importantly they we cannot expect them to remember what the default setting was of each property so if people can just take an option toggle it and then decide that no this is scary I want to go away then it the tax properties Docker should be uh a lot more safe to explore and that way uh it will also be a lot more fun to explore the different options instead of it uh being intimidating and also getting in your way so other than that um there's still one major usability feature missing namely this is uh style presets and that's because uh with about 50 properties to change you don't you want to allow people to store their favorite property combinations uh as I'm still working on this phase uh I can't show any of that but it's definitely in the cards so then we go to so for the last phase the advanced features um I haven't started this phase yet uh but one of the things that um I want to work on was typ setting mode and uh the idea for typ setting modes also came from artists feedback some of the artists were saying um like oh it would be very good if we had like on canvas uh ways to set the line height and uh the letter spacing while other artists were saying no please don't do this because uh it will interfere with writing and as I kept listening to what they these artists were saying it started down on me that there's basically uh two types of text tool and each of them has a uh kind of a separate use case so the primary uh type is text editing uh you just add a text and maybe you want set things bold while the other uh type of text tool is uh more of a type setting mode where you don't really want to type anything you just copy it in from a brief and you uh change the font and try to fine-tune the spacing and try to work on the curing and everything and uh in most programs the both of these just kind of get squished into one uh single tool but they are obviously uh kind of conflicting uh especially because uh toggles on screen might interfere with text editing while maybe something that would be useful to useful to text editing namely um autocorrect uh decorations would probably interfere with type setting so um for that reason I want to work on type setting modes uh the type setting modes will also uh help us uh conceive of what to do exactly with some of the advanced SVG 1.1 features because SVG 1.1 allows you to move every character individually and uh that is incredibly powerful but there hasn't been any uh tool that has really uh given artists control the ability to actually choose those things uh other things that I'm slightly worries about is the um Baseline alignment feature which can be very abstract but uh is very useful when trying to uh decide uh what you're going to do with uh texts of different uh sizes because uh let's see no let's demonstrate that for a bit Yeah align based line because you can technically so the default Bas line is the alphabetic one for for especially for uh Al alphabetic text but maybe you want centered instead or maybe you wanted hanging which is uh useful for um uh the north bramic scripts like div nagari um yeah so but this is very abstract feature right you don't really understand uh what you're looking at so for that for these kind of abstract features I wanted to um introduce uh some on canvas decoration so that uh people should be able to see what exactly they're selecting and then it should be a lot less uh abstracts but this all need to go into a type setting mode because all these uh extra visuals uh will be um will be very uh overwhelming for someone who just wants to type some text in into their comic um other than that uh after I've got all of this done uh I want to go back into the text layout and uh figure out text orientation which is uh a control to allow uh for uh the mixing of vertical and horizontal text which happens a lot in um vertical text layouts um and I want to work on some other East Asian features as well as having better Color Fun support but I think I don't think that um those will be Inca 5.3 for 5.3 I just mostly want to get the whole text tool to work and it's still going to be a lot of work um but um I hope that despite of all of its complexity uh I will be able to make it a fun to use tool for people that uh allows them to access every single feature that they need um so yeah this was my presentation I hope you learned something from it and uh I'll be looking forward uh to hearing your questions