How to stroke text?

[memononen]

How to stroke text?

[memononen]

Currently there is no way to stroke text as the text rendering is done using texture atlas for best quality. I've been thinking about adding a function to allow to turn text to paths, which would be great for large text, and it would allow stroking too. It might take a little while until I get there, though.

[starwing]

@memononen Thank you for reply! but I think we'd better not implement text stroke in this way (though this way is also useful). I noticed that we can set font blur, so Why not just implement text stroke just as blur? i.e. this can be done in fontstash, not in NanoVG.

[memononen]

That is another option. Can you tell more about how you're planning to use the text outline?

There are number of ways to implement it. For example, should the stroke be outside, center or inside in relation to the outline. Also, another common way to render outlined text is to first render the stroke as a dilated (expanded) version of the glyphs using fill, and then render the fonts again without dilation. This makes sure that the stroke outlines do not overlap the actual fonts and the text is more readable.

[starwing]

We only want a outlined text, e.g. "empty" text, and sometimes we need use colors in text. so a "fillAndStrokeText" is needed. So outside is better. I prefer your ways to implement it. but in this way, it's better to give a API to both fill and stroke text -- it implemented more easy. and only one pass to render the text. I have looked into the way to blur font, I think to use the same way to stroke is prefer. but that need a new routine.

we can use nvgStrokeWidth, nvgFillColor and nvgStrokeColor to control the style of outline. and a new nvgStrokeText is needed, but use transparent for fill color, we can rename current nvgText to nvgFillText, and make nvgText to do both fill and stroke.

[boblehest]

Have you considered using "signed distance fields" [PDF]?

If perfect quality is of utmost importance, I guess it won't be an option, since you don't get hinting, and the text appears slightly rounder.