[Text tool] Outline from holes inside characters may overflow the character boundaries

[pedropaulosuzuki]

Description
If you, for example, put an outline in the character A while using the Ubuntu font, a big enough outline may overflow the top of the character.

To Reproduce

1. Open Pinta
2. Select the Text tool
3. Insert the character 'A'
4. Change font to Ubuntu font
5. Change Text Style to Outline or Fill and Outline
6. Increase the outline width

Additional Info

Screencast.from.05-02-2026.12.05.22.webm

Version
Latest git

Tasks

• Implement other Join methods (Round Join / Bevel Join), which don't have this problem
• Fix issue for Miter Joins (probably requires changes upstream, as otherwise we'd need to convert text to paths, and then detect inner paths and mask their outlines using the outer paths)

[pedropaulosuzuki]

Opened a similar ticket on Inkscape. Over there the problem is more complex, because paths can intersect, which (usually) doesn't happen with fonts.

[pedropaulosuzuki]

We could potentially fix this by changing from 'Miter Join' to 'Round Join', or, even better, allowing the user to select if he wants to use a 'Miter Join', a 'Bevel Join' or a 'Round Join', like Inkscape does.

For the record, Krita and GIMP use something similar to the 'round join' on their stroke/outline effects.

[cameronwhite]

Does switching to the round join cause any other issues or does it seem like a generally better default?

[pedropaulosuzuki]

Does switching to the round join cause any other issues or does it seem like a generally better default?

I wouldn't say it is a "better default", it just looks different (borders get rounded). In the end, it's probably better to let the user choose which join method he wants to use for the text (or curved paths overall), like in Inkscape. I am unaware of any inherent disadvantages of a round join.

Fixing the underlying issue with the miter join probably requires changes upstream.

[cameronwhite]

Thanks, I don't really have any objection to adding a control over the join mode then 👍

[pedropaulosuzuki]

@yioannides, I plan to use a ToolBarDropDownButton for the Join mode as well, so we probably will need icons for the three join modes too:

• Miter Join
• Round Join
• Bevel Join

These are the icons currently used on Inkscape. We probably could do something similar to them, while keeping Adwaita style.

[yioannides]

@pedropaulosuzuki Sounds good, I might be able to whip up something tomorrow or after tomorrow, as well as #1967 ~

[yioannides]

@pedropaulosuzuki How about these?

I wanted to use the Adwaita "line and circle" connection nodes for the vector point, but that wouldn't work well with the bevel and miter join in terms of proportions, so I made a custom design as a nod to Inkscape and Adwaita.

It could be fun rounding the bottom-right corner as well, but I wanted to keep it as faithful to Adwaita's existing symbolic icons, like:

[pedropaulosuzuki]

@pedropaulosuzuki How about these?

I think those look great when they're big! However, when we resize them to small widths, it seems the details get pretty hard to see:

So maybe if we increase the width and padding of those dotted circles and a bit of the bevel size itself (I know Inkscape's bevel icon is also small), then maybe it's a bit clearer? Maybe it's just because I downscalled them on a sloppy way, so if you could show the '16px', '32px' and '64px' versions, like in the example you showed from the icon library app, then maybe we can get a better understanding of the icon behavior at those sizes. But I really liked the design, overall!

I wanted to use the Adwaita "line and circle" connection nodes for the vector point, but that wouldn't work well with the bevel and miter join in terms of proportions, so I made a custom design as a nod to Inkscape and Adwaita.

They look pretty nice! Maybe the circle connection could work well too, but I trust your vision on that.

[yioannides]

Yeah, since PNG raster files are not resizable, you'll be getting some artifacts, but yeah having a 16px / 32px / 64px demo is a good idea for reference, let's do that from now on.

I think you're right, we could make the negative space a little bit wider, maybe turn the circles into fat rounded lines instead and add some padding between them. I'll revise tomorrow morning.

[yioannides]

v2 :: made the negative space wider and turned the dotted circles into thicker rounded squares:

I think it now looks much cleaner in smaller resolutions! Let me know what you think ~

[pedropaulosuzuki]

v2 :: made the negative space wider and turned the dotted circles into thicker rounded squares:
I think it now looks much cleaner in smaller resolutions! Let me know what you think ~

Looks great! Amazing work!

Quick question: are the round join and bevel join easy to differentiate at 16px size? I ask because they both cut the top left diagonal, and I imagine they might look a bit similar in small sizes (maybe not, but asking just to be sure).

If they look different, then we can merge this as-is! Otherwise, I'd suggest maybe "zooming in" in a bit in the top level corner, to make the join more visible.

For example, just this region:

Of course, this only if they look too similar in small sizes, otherwise we can keep v2, which already looks great!