[cairo] Drawing text halos?

[Travis Griggs]

On Feb 24, 2009, at 8:12 AM, Ian Britten wrote:

> Hi all,
> I'm wondering if anyone has any experience drawing 'halos' (for lack  
> of
> a better term) around text, similar to how Google Maps draws their  
> text?
> It's a second (background) colour, used to provide contrast so the  
> text
> is visible/legible when drawn over cluttered data.
> And if so, does anyone have any techniques/approaches they could  
> share?
>
> <Background>
> We have an existing rendering framework that draws to multiple types
> of backends, only one of which is Cairo.  All our text rendering is
> done via FreeType (We have our own rasterization code, which I'm  
> mostly
> bypassing when rendering to Cairo).
> This halo effect applies both to stock TT fonts, as well as our
> internal 'stick' fonts.
> </Background>
>
> Our current approach involves first drawing the boundary of the glyph
> with an arbitrary lineweight (via FT_Outline_Decompose) before then
> rendering the glyph as usual.
>
> One problem with this approach trying to come up with an appropriate
> thickness, for which our current approach is sub-optimal, and leads
> to illegible text, especially when it is small.
>
> There's also the problem that we're currently applying the halos one
> glyph at a time (just before each glyph is rendered), with the result
> that subsequent halos overwrite part of the previous glyph, if the
> chosen lineweight is too thick.
>
> Another (upcoming) problem is when I render this type of text to a
> Cairo [PDF/SVG/etc] surface: I don't think I want each piece of text
> to actually be emitted to the backend twice, do I?.  I'm predicting
> that if I did, users would end up selecting twice as much text in
> their PDF output (for example).  Admittedly, I'm not sure what
> actually should be in the PDF for this type of text, so I'm open to
> possibilities...  :P
>
> Anyways, if anyone has any suggestions/techniques they'd like to
> share, I'd appreciate it!
> Ian

If you're using Pango... you can use:

pango_cairo_layout_path() to get a path of the outline of the text.  
Which you can then stroke with arbitrary width, color, and alpha  
values to create a shaped "glow" around the text. You follow with a  
pango_cairo_show_layout() call to then render the text atop.

--
Travis Griggs
Objologist
"Is success the potential of what could be, or the reality of what is?"