A utility class that provides text size measurement and text placement functionality, for instance, for label rendering and measurement.
Inheritance Hierarchy
TextRenderSupport
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.TextRenderSupport
Static Methods
addText
(targetElement: SVGGElement | SVGTextElement, text: string, font: Font, maximumSize?: Size, wrapping?: TextWrapping, measurePolicy?: TextMeasurePolicy, rightToLeft?: boolean, shape?: GeneralPath) : stringAdd the text content to the provided SVG text element.
Remarks
The
rightToLeft does not render an ellipsis in Internet Explorer 11 and lower for CHARACTER_ELLIPSIS and WORD_ELLIPSIS because of a browser issue that renders the ellipsis at the wrong location.Parameters
options - Object
A map of options to pass to the method.
A map of options to pass to the method.
- targetElement - SVGGElement | SVGTextElement
- An SVG element to add the provided text to. When using
rightToLeft, it is expected asSVGGElementotherwise asSVGTextElement. - text - string
- The text content to add to the provided text element (may contain newline characters).
- font - Font
- The Font that defines the font properties to apply to the added text.
- maximumSize - Size
- The bounds that shouldn't be exceeded when placing the text. This only has an effect when a
measurePolicyother than NONE is provided. Note that if the height is too small for a single line, no text will be drawn at all. When omitted, the default is an unlimited size. - wrapping - TextWrapping
- The TextWrapping policy to apply when the text exceeds the provided
maximumSize. When omitted, the default is NONE. - measurePolicy - TextMeasurePolicy
- The measure policy to use for measuring the size of the text. When omitted, the default is AUTOMATIC.
- rightToLeft - boolean
- Whether to use right-to-left text direction.
- shape - GeneralPath
- A convex shape where the text lines shall be placed in. The shape is translated to (0/0) and may be cut if its bounds exceed the
maximumSize.
Returns
- ↪string
- The text that was actually placed in the
targetElement.
Examples
// wraps the given text at the maximum width, between words if possible and takes as much vertical space as needed
TextRenderSupport.addText({
targetElement: textElement,
text: text,
font: font,
wrapping: TextWrapping.WORD,
maximumSize: new Size(30, Infinity)
})const lineHeight = TextRenderSupport.measureText({
text: text,
font: font
}).height
TextRenderSupport.addText({
targetElement: textElement,
text: text,
font: font,
wrapping: TextWrapping.CHARACTER_ELLIPSIS,
maximumSize: new Size(40, lineHeight)
})// wraps the given text at the maximum width, between words if possible and cuts it off at a maximum size
TextRenderSupport.addText({
targetElement: textElement,
text: text,
font: font,
wrapping: TextWrapping.WORD,
maximumSize: new Size(30, 60)
})Resets the cache that stores for a Font which actual TextMeasurePolicy is used if AUTOMATIC is set.
Remarks
The AUTOMATIC policy is used in particular by DefaultLabelStyle.
Explicitly resetting the cache is usually not necessary. However, it may be necessary if custom CSS rules that affect text measurement are added to the web page after the text measurement policy is already selected.
Parameters
options - Object
A map of options to pass to the method.
A map of options to pass to the method.
- specificTypeface - Font
See Also
measureText
(text: string, font: Font, maximumSize?: Size, wrapping?: TextWrapping, measurePolicy?: TextMeasurePolicy) : SizeCalculates the width and height required to render the provided text using the provided Font, taking text-wrapping into account.
Remarks
The resulting height is calculated using the maximum height for the largest glyph in the provided font, irrespective of the actual text. I.e. '_' and 'I' are assumed to be of the same height.
Parameters
options - Object
A map of options to pass to the method.
A map of options to pass to the method.
- text - string
- The text that should be measured.
- font - Font
- The Font to apply to the text before measuring.
- maximumSize - Size
- The bounds that shouldn't be exceeded when placing the text. When omitted, the default is an unlimited size.
- wrapping - TextWrapping
- The TextWrapping policy to apply when the text exceeds the provided
maximumSize. When omitted, the default is NONE. - measurePolicy - TextMeasurePolicy
- The measure policy to use for measuring the size of the text; AUTOMATIC per default.
Returns
- ↪Size
- The size of the measured text.
Examples
// Measures the size a text element with this text and font would require.
const size = TextRenderSupport.measureText({
text: 'some text',
font: font
})// Measures the size a text element with this text and font would require if it were word wrapped at the given width.
TextRenderSupport.addText({
targetElement: textElement,
text: 'some text',
font: font,
wrapping: TextWrapping.WORD,
maximumSize: new Size(60, Infinity)
})// Measures the size a text element with this text and font would require if it were word wrapped at the given width and cut off at the maximum height.
// This takes the size of the text ellipsis into account (if any)
TextRenderSupport.addText({
targetElement: textElement,
text: 'a very long text, longer than what would fit into 30*50',
font: font,
wrapping: TextWrapping.CHARACTER_ELLIPSIS,
maximumSize: new Size(30, 50)
})