YUcxovo/elm-canvas/1.0.0

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.

{ style : String
, size : Int
, family : String
}
-> Setting

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

  • style: What is the style of the text. Similar to the font-style property in CSS. For example, you can use italic bold to specify both italic and bold.
  • 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

= 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.

= 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.

{ label : String
, lineWidth : Float
, lineSpace : Float
}
-> 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.

  • label
    • Clare a label for the usage of swap text. Note that don't use the same label as another element. Do not use "" as a label.
  • lineWidth
    • The width of a line in pixel.
  • lineSpace
    • The space between two baselines in pixel.
{ label : String
, lineWidth : Float
, lineSpace : Float
}
-> 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.

  • label
    • Clare a label for the usage of swap text. Note that don't use the same label as another element. Do not use "" as a label.
  • lineWidth
    • The width of a line in pixel.
  • lineSpace
    • The space between two baselines in pixel.
swapManually : Float -> 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.

  • lineWidth
    • The width of a line in pixel.