Text in Shape / Text on Path got merged, rounding out phase 3! The technical blogpost thus covers all of Phase 3. But let’s get down to business:
Text in Shape / Text on Path
So, there’s two ways you can create either of these.
The simple one is by using the text tool and hovering over an existing shape. Hovering over the border and clicking will allow you to create a text on path, hovering over the fill and clicking will create a text in shape.
Once you have your text on path and the text tool active, you can drag the handle at the start to move the start offset. Dragging to the opposite side will allow flipping the side the text path is on.
For text in shape, if the text tool is active, you can drag the sides of the text area to set padding (if the cursor is closer to a subtract shape, it’ll set the margin of that subtract area). The padding/margin is also available under “Text Area” in the text properties docker.
The complex way of creating text in shape is to select shapes with the shape selection tool, and use the new options in the context menu. This allows you to set up a complex multi-shape flow. Arrows will be drawn between text shapes to indicate the order of the flow shapes.
In both cases, a new button will show up at the top right, which can be clicked. This brings you into contour mode. This is because we decided to make shapes and paths children of the text for easier interaction. When in contour mode, the shape selection tool can be used to reorder these flow areas through the context menu. Both the shape selection tool and the shape editing tool can be used to modify the shapes themselves.
Out of contour mode, when you scale a text that flows into shapes, it will scale the underlying shapes. This required us to overhaul how updates were propagated, to avoid a massive slowdown here. Unfortunately, we were unable to handle text-on-path here, so scaling for that is disabled.
Type Setting Mode
Then, the type setting mode. This is a new mode that is toggled in the text tool. When toggled, the selection decoration will change from filled blocks into metric lines that are drawn over the text. These metric lines can be dragged to adjust the font size, line height and baseline shift. When the text is not auto-wrapping, you will also be able to adjust the relative positioning of each character (There’s also configurable shortcuts to move the offset and remove all transforms, though I was unsure what else was needed).
When pressing shift, the metrics shift to the baseline metrics. You can select the alignment and dominant baseline by clicking it. This should make the baseline metrics a little less abstract.
This mode was something that became clear from our earliest discussions, where some people expressed the need to be able to sculpt text on-canvas, while others really wanted to have on-canvas widgets avoided. Similarly, I wanted to make sure that there was a way to do SVG character transforms as CSS by itself only has limited options for spacing adjustments. With this new mode you’ll be able to create something like this:
This brings us to the end of the text tool feature work. I will now first take a break, and then shift into documentation / bugfix / polish mode.