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 : Int

, family : String

}

-> Setting

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

size: What is the size of the text in pixels. Similar to the font-size property in CSS.
family: Font family name to use when drawing the text. For example, you can use "monospace", "serif" or "sans-serif" to use the user configured default fonts in the browser. You can also specify other font names like "Consolas".

align : TextAlign -> 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

Left
- The text is left-aligned.
Right
- The text is right-aligned.
Center
- The text is centered.
Start
- The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales).
End
- The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales).

baseLine : TextBaseLine -> 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.

Top
- The text baseline is the top of the em square.
Hanging
- The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)
Middle
- The text baseline is the middle of the em square.
Alphabetic
- The text baseline is the normal alphabetic baseline.
Ideographic
- The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese and Korean scripts.)
Bottom
- The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.

maxWidth : Float -> 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.

linsyking/elm-canvas/1.0.0

Canvas.Settings.Text

Styling text

Modules

Main module

Settings

Textures