Alignment value as two string values, first for vertical and second for horizontal. Eg. "top left" or "center middle". Setting the property can be done with either a single direction or both (separated by space or comma) in either order.
Horizontal alignment value as string. One of: 'left', 'center', 'right'
Vertical alignment value as string. One of: 'top', 'middle', 'bottom'
Returns true if there is nothing to draw: text is empty, colors are blank or transparent, or there is no fill and stroke width is zero
The text to draw. May contain \n control characters for multi-line text (unless the wrap property is disabled).
Font is specified as a single CSS/CanvasRenderingContext2D style string expression which may contain size, family, and other options. See https://developer.mozilla.org/en-US/docs/Web/CSS/font for reference.
Note that only the following generic font family names are supported: serif, sans-serif, monospace, and system-ui.
The font variant(s) can be specified separately from what is allowed in font because this way supports more variant types than just "small-caps". The full range of CSS font-variant values can be used. Multiple values should be separated by spaces.
The default variants, specified in the StyledText.defaultFontVariant static property, add support for ligatures. To preserve this support while adding other variant(s), use the static property and add the desired variant(s) to that after a space. Eg.
styledText.fontVariant = StyledText.defaultFontVariant + " titling-caps slashed-zero";
Note: If "small-caps" was specified in the font property, then it will automatically be added to the current fontVariant
inside the render() method (there's no need to specify it separately as a value for this property).
Text drawing direction: 'ltr', 'rtl', or 'inherit' (default).
Letter spacing property expressed as a CSS length value, eg: "2px" or "1em". Default is 0px.
Word spacing property expressed as a CSS length value, eg: "2px" or "1em". Default is 0px.
The fontStretch property specifies how the font may be expanded or condensed when drawing text.
Value is one of: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (default),
semi-expanded, expanded, extra-expanded, ultra-expanded
The textDecoration property can be assigned a string using the same syntax as the CSS
text-decoration property.
Set it to none or an empty value to draw undecorated text (default).
Specifies whether drawn text should be wrapped.
Currently only has any effect when text contains \n controls characters (there is no auto-wrapping).
It can be set to false to prevent wrapping (in which case any \n in the text will be ignored).
Enables or disables font hinting when drawing text and calculating metrics (for alignment). Default is enabled.
Optionalinit: PartialDeep<StyledText> & PartialDeep<SizedElement> & {Sets element width and height property values with optional unit type specifier to use for both dimensions.
If unit is undefined then the current unit types for each dimension remain unchanged.
Optionalunit: stringOptionalunitY: stringReturns actual pixel width of this element, either scaled to viewWidth if width unit is %
or actual width value if it is in pixels already. If this element's width value is zero then return viewWidth.
Returns actual pixel height of this element, either scaled to viewHeight if height unit is %
or actual height value if it is in pixels already. If this element's height value is zero then return viewHeight.
Returns actual pixel width and height of this element, potentially scaled to viewSize.
See actualWidth and actualHeight for details on returned values.
Sets the current StyledText#text property from an evaluated input string (embedded JS is resolved).
Clears any cached text metrics. Typically the cache management is handled automatically when relevant properties are modified.
Returns the current text outline as a Path2D object, taking into account all current typography settings (e.g., font, alignment, wrapping, etc.).
The path is not scaled and has a 0,0 origin point, so typically it would need to be scaled and aligned separately within a container (eg. by FreeformPath).
If a positive maxWidth is given and wrap property is true then the text will be word-wrapped to the given width if needed.
OptionalmaxWidth: numberDraws the current text value with all styling and positioning options applied onto ctx using rect dimensions for scaling and alignment.
The width property can set the maximum width of the text for automatic wrapping.
If width value is greater than zero and wrap is true then text will be automatically wrapped if it doesn't already fit into the specified width.
The default width is 0 and no automatic wrapping will occur.
The height property is not used in the StyledText element.
Extra position offset to apply after alignment. Expressed as a percentage of overall drawing area size.
ReadonlystyleAll visual styling options to apply when drawing the text.
Horizontal text alignment, if different from overall block halign.
If value is Alignment.NONE (default) then block alignment is used. Otherwise can be one of the horizontal alignment types.
Note that this is really only relevant for multi-line text blocks since it will determine how the lines align in
relation to each other. With a single line of text the horizontal alignment will always appear to follow the overall
block alignment anyway (eg. if halign is 'left' and textAlign is 'right' the text will still be aligned with the left
side of the image).
Static ReadonlydefaultThe default font variant ensures ligature support, especially useful for named symbol fonts.
Draws text on a canvas context with various options. The text can be fully styled with the embedded style DrawingStyle property.