Question

Is there some way to define a text sprite with some more style options then just size and font as shown in the example?

{
    type: "text",
    text: "Hello, Sprite!",
    fill: "green",
    font: "18px monospace"
}

Specifically, I want to make it bold or underlined.

I tried a style config like this:

style: {
    'text-decoration': 'underline'
}

I also tried setting it in the font config like this:

font: "underline 18px monospace"

Neither worked.

This sentence from the Ext.draw.Sprite#font config in the docs sounded promising but it is pretty cryptic:

Uses the same syntax as the CSS font parameter

I’ve been googling around for the CSS font parameter and haven’t found much of use. Maybe if someone knows what that means they can shed some light on this.

Answer 1

The font css attribute will let you specify bold and italics, but underline is set using the text-decoration attribute. You’ll need to use a style config:

{
    type: "text",
    text: "Hello, Sprite!",
    fill: "green",
    font: "bold 18px monospace",
    style: {
        textDecoration: "underline"
    }
}

Working demo: http://jsfiddle.net/gilly3/WSQv9/.
Tested in Chrome and IE9. Firefox doesn’t yet support underline in SVG.

For reference, here is the font parameter definition:
MSDN
MDN