shamansir / elm-canvas / Canvas.Settings.Text

Styling text

To draw text we use the function text:

text
    [ font { size = 48, family = "serif" }
    , align Center
    ]
    ( 50, 50 )
    "Hello world"

You can apply the following styling settings to text specifically. They will do nothing if you apply them to other renderables, like shapes.

font : { size : Basics.Int, family : String } -> Canvas.Settings.Setting

Specify the font size and family to use when rendering text.

align : TextAlign -> Canvas.Settings.Setting

Specifies the text alignment to use when drawing text. Beware that the alignment is based on the x value of position passed to text. So if textAlign is Center, then the text would be drawn at x - (width / 2).

The default value is Start. MDN docs


type TextAlign
    = Left
    | Right
    | Center
    | Start
    | End

Type of text alignment

baseLine : TextBaseLine -> Canvas.Settings.Setting

Specifies the current text baseline being used when drawing text.

The default value is Alphabetic.

See MDN docs for examples and rendering of the different modes.


type TextBaseLine
    = Top
    | Hanging
    | Middle
    | Alphabetic
    | Ideographic
    | Bottom

Type of text baseline.

maxWidth : Basics.Float -> Canvas.Settings.Setting

Specify a maximum width. The text is scaled to fit that width.

Note: max-width must be directly applied to the text renderable, if applied to a group it will have no effect.