A label style that interprets the label's text as markup and renders the label using rich text features.
Remarks
This style supports a certain subset of HTML, CSS styling, and additionally some color tags. The supported markup elements are:
- <span> – A stylable element.
- <p> – A paragraph element.
- <pre> – A container for pre-formatted text.
- <br> – Adds a line break
- <em> – Italic text
- <strong> – Bold text
- <del> – Strikethrough text
- <u> – Underline text
- <h1>–<h6> – Heading 1—6
- <code> – Monospace text
- <small> – Small font-size
- <large> – Large font-size
- <sub> – Subscript text
- <sup> – Superscript text
Please note that <sub> and <sup> may not be supported by all browsers.
To add line breaks, use the <br> tag. Newline characters in the label text are ignored.
Additionally, HTML color names are supported as tag names, e.g. <red> produces red text:
<red>Red text</red>Tags can be nested. For example, a span can contain an <em> tag.
<span>Text with <em>italic</em> part.</span>Tags can be styled with CSS. Please note that this style transforms all elements in the label text into styled SVG <tspan> elements. Therefore, your CSS style has to apply to SVG text. This example shows how to create semi-transparent text using CSS styling.
<span style="opacity: 0.5;">Semi-transparent text</span>Also, tags can be given CSS classes. All tags already expose classes that can be used to style all occurrences of these elements.
- <span> – yfiles-label-span
- <p> – yfiles-label-p
- <pre> – yfiles-label-pre
- <em> – yfiles-label-em
- <strong> – yfiles-label-strong
- <del> – yfiles-label-del
- <u> – yfiles-label-u
- <h1>-<h6> – yfiles-label-h[1-6]
- <code> – yfiles-label-code
- <small> – yfiles-label-small
- <large> – yfiles-label-large
- <sub> – yfiles-label-sub
- <sup> – yfiles-label-sup
- <[colorname]> – yfiles-label-[colorname]
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.MarkupLabelStyle
See Also
Constructors
Creates a new instance using MarkupLabelStyleRenderer as renderer.
Parameters
A map of options to pass to the method.
- backgroundFill - Fill
The brush to use for the background box of the label. This option sets the backgroundFill property on the created object.
- verticalTextAlignment - VerticalTextAlignment
The vertical text alignment to use if the label is assigned more space than needed. This option sets the verticalTextAlignment property on the created object.
- horizontalTextAlignment - HorizontalTextAlignment
The text alignment. This option sets the horizontalTextAlignment property on the created object.
- wrapping - TextWrapping
The text wrapping and trimming behavior. This option sets the wrapping property on the created object.
- clipText - boolean
A value that determines whether text should be clipped. This option sets the clipText property on the created object.
- backgroundStroke - Stroke
The pen to use for the background box of the label. This option sets the backgroundStroke property on the created object.
- shape - LabelShape
The shape of the label's background. This option sets the shape property on the created object.
- textWrappingShape - TextWrappingShape
The shape the label text shall be wrapped in when rendered. This option sets the textWrappingShape property on the created object.
- textWrappingPadding - number
The padding between the wrapped text and the textWrappingShape. This option sets the textWrappingPadding property on the created object.
- cssClass - string
A CSS class that will be applied to the visualization. This option sets the cssClass property on the created object.
- font - Font
The typeface to use for the label. This option sets the font property on the created object.
- autoFlip - boolean
A value indicating whether the label should be flipped 180 degrees automatically, if it would be oriented downwards, otherwise. This option sets the autoFlip property on the created object.
- textFill - Fill
The brush to use for the label's text. This option sets the textFill property on the created object.
- textSize - number
The size of the text. This option sets the textSize property on the created object.
- insets - Insets
The insets for the label. This option sets the insets property on the created object.
- minimumSize - Size
The minimum preferred size allowed for the label. This option sets the minimumSize property on the created object.
- maximumSize - Size
The maximum preferred size allowed for the label. This option sets the maximumSize property on the created object.
Creates a new instance using the provided renderer.
Parameters
A map of options to pass to the method.
- renderer - ILabelStyleRenderer
- The custom renderer for this style instance.
- backgroundFill - Fill
The brush to use for the background box of the label. This option sets the backgroundFill property on the created object.
- verticalTextAlignment - VerticalTextAlignment
The vertical text alignment to use if the label is assigned more space than needed. This option sets the verticalTextAlignment property on the created object.
- horizontalTextAlignment - HorizontalTextAlignment
The text alignment. This option sets the horizontalTextAlignment property on the created object.
- wrapping - TextWrapping
The text wrapping and trimming behavior. This option sets the wrapping property on the created object.
- clipText - boolean
A value that determines whether text should be clipped. This option sets the clipText property on the created object.
- backgroundStroke - Stroke
The pen to use for the background box of the label. This option sets the backgroundStroke property on the created object.
- shape - LabelShape
The shape of the label's background. This option sets the shape property on the created object.
- textWrappingShape - TextWrappingShape
The shape the label text shall be wrapped in when rendered. This option sets the textWrappingShape property on the created object.
- textWrappingPadding - number
The padding between the wrapped text and the textWrappingShape. This option sets the textWrappingPadding property on the created object.
- cssClass - string
A CSS class that will be applied to the visualization. This option sets the cssClass property on the created object.
- font - Font
The typeface to use for the label. This option sets the font property on the created object.
- autoFlip - boolean
A value indicating whether the label should be flipped 180 degrees automatically, if it would be oriented downwards, otherwise. This option sets the autoFlip property on the created object.
- textFill - Fill
The brush to use for the label's text. This option sets the textFill property on the created object.
- textSize - number
The size of the text. This option sets the textSize property on the created object.
- insets - Insets
The insets for the label. This option sets the insets property on the created object.
- minimumSize - Size
The minimum preferred size allowed for the label. This option sets the minimumSize property on the created object.
- maximumSize - Size
The maximum preferred size allowed for the label. This option sets the maximumSize property on the created object.
Properties
Gets or sets a value indicating whether the label should be flipped 180 degrees automatically, if it would be oriented downwards, otherwise.
Gets or sets the brush to use for the background box of the label.
Gets or sets the pen to use for the background box of the label.
Gets or sets a value that determines whether text should be clipped.
Remarks
If set to true, the label text will be clipped at the label's bounds.
Clipping is be done after trimming and wrapping the text. Disabling this feature will not prevent trimming or wrapping from removing text.
The default value is true.
See Also
Defined in
Gets or sets a CSS class that will be applied to the visualization.
Remarks
The default value is an empty string, in which case no class is set for the visualization.
Multiple classes can be set by separating them with spaces, just like with the SVG class attribute.
Note that adjusting the visualization of graph items with CSS works purely on a DOM level. Therefore, CSS properties that affect the text size of labels should be avoided, since they are not considered for text measuring and therefore might result in wrong text placement. Only CSS properties that affect `visual` aspects of the label's style should be used.
See Also
Defined in
Gets or sets the text alignment.
Gets or sets the insets for the label.
Remarks
The insets define the distance between the label border and the label content.
The default value is EMPTY.
See Also
Defined in
Gets or sets the maximum preferred size allowed for the label.
Remarks
If wrapping is enabled and the text exceeds the maximum width allowed, then the text is wrapped.
This property only changes the preferred size calculated by getPreferredSize and thus has no effect for ILabelModels that ignore the preferred size, such as InteriorStretchLabelModel.
The default value is INFINITE.
See Also
Defined in
Gets or sets the minimum preferred size allowed for the label.
Remarks
This property only changes the preferred size calculated by getPreferredSize and thus has no effect for ILabelModels that ignore the preferred size, such as InteriorStretchLabelModel.
The default value is ZERO.
See Also
Defined in
Gets the renderer implementation that can be queried for implementations that provide details about the visual appearance and visual behavior for a given label and this style instance.
Remarks
const creator = style.renderer.getVisualCreator(label, style)
const visual = creator.createVisual(context)Implements
Gets or sets the shape of the label's background.
Remarks
Since ROUND_RECTANGLE uses a fixed corner radius, setting a constant value for insets works well for different label text sizes. Because the size of the end caps of PILL and HEXAGON depend on the height of the text, the preferred size of a label that uses these shapes is automatically increased to produce labels that can contain the complete text and where the text does not intersect with the shape of the label when a backgroundStroke is used to render the background. Using non-zero insets for the longer side of the label allows the style to place the text rendering inside the end caps, so increasing the top and bottom insets or textWrappingPadding can result in less wide labels.
The default value is RECTANGLE.
See Also
Defined in
Gets or sets the size of the text.
Remarks
This property delegates to the size of the font property.
The default value is 12.0d.
See Also
Defined in
Gets or sets the padding between the wrapped text and the textWrappingShape.
Remarks
Examples
// Wrap text in an elliptic shape with a small padding
const labelStyle = new DefaultLabelStyle({
textWrappingShape: 'ellipse',
textWrappingPadding: 5
})See Also
Defined in
Gets or sets the shape the label text shall be wrapped in when rendered.
Remarks
The shape is fitted inside the label layout and text is wrapped to stay inside the shape. If a padding is set, this padding is kept between the shape and the text.
Also insets determine areas that should not be rendered into. The padding has an influence on the size and positioning of the shape, whereas the insets are overlaid.
Note: For wrapping shapes other than RECTANGLE it is recommended to adjust the style's insets and textWrappingPadding, too. Also, the preferredSize needs to be set to a suitable value to get the desired effect or a respective ILabelModel needs to be used that provides a suitable label layout.
If the value is set to RECTANGLE or wrapping is set to NONE, the preferred size calculation will take into account the extra space that is required by a label shape of PILL or HEXAGON to completely render the text contents within the outline of the shape. In the case of ROUND_RECTANGLE suitable constant insets value can be configure to prevent the text from intersecting with the rounded corners.
For the cases where the value is set to other values, the calculation of the preferred size will be unaffected by the shape. This will typically lead to preferred sizes that cannot ensure that the text content is rendered within the outline. Since these values are typically used for rendering larger amounts of text that needs to wrap within a shape, a preferred size is either not required or not feasible to determine unambiguously. So developers need to either come up with and manually set an adjusted preferred size that suits the users or let the users determine the size of the label rendering, interactively. The latter can be done by letting the user interactively change the preferred size or by using a label model that does not even consider the preferred size, like the InteriorStretchLabelModel with CENTER parameter which derives the size of the label from the size of the owning node.
For the majority of use-cases where label texts are only a few lines or likely a single line of text or even word, you probably want to be using the RECTANGLE which has good support for accurate preferred size calculations that lead to compact labels even with the non-rectangular label background shapes. More sophisticated label wrapping shapes are mostly meant to be used without a label background and shape but are rendered on top of another node or graph element that has its own corresponding shape and where the label is stretched across the element.
Note that values other than RECTANGLE are only considered if wrapping is not NONE.
The default value is RECTANGLE.
Examples
// Wrap text in an elliptic shape with a small padding
const labelStyle = new DefaultLabelStyle({
textWrappingShape: 'ellipse',
textWrappingPadding: 5
})See Also
Defined in
Gets or sets the vertical text alignment to use if the label is assigned more space than needed.
Gets or sets the text wrapping and trimming behavior.
Methods
Create a clone of this object.