YUcxovo / elm-canvas / Canvas.Settings.Text

Styling text

To draw text we use the function text:

text
    [ font { style = "", 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 : { style : String, 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.

autoSwapbyLetter : { label : String, lineWidth : Basics.Float, lineSpace : Basics.Float } -> Canvas.Settings.Setting

Specify the autoswap settings as swap by letters mode to use when rendering text. You can also use \n to swap line manually. spaces at the beginning of sentences will be omitted. Use \t if you want to add spaces in this state.

autoSwapbyWord : { label : String, lineWidth : Basics.Float, lineSpace : Basics.Float } -> Canvas.Settings.Setting

Specify the autoswap settings as swap by words mode to use when rendering text. You can also use \n to swap line manually. spaces at the beginning of sentences will be omitted. Use \t if you want to add spaces in this state. If the linewidth shouldn't be less than the width of any word.

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

You can add \n in sentence to swap line when rendering text. Spaces at the beginning of sentences will be omitted. Use \t if you want to add spaces in this state.