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.
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 -> 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 of text alignment
Left
Right
Center
Start
End
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 of text baseline.
Top
Hanging
Middle
Alphabetic
Ideographic
Bottom
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.
label
""
as a label.lineWidth
lineSpace
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.
label
""
as a label.lineWidth
lineSpace
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.
lineWidth