Rich Text Label Demo

This demo shows how to create labels with rich text features using MarkupLabelStyle.

The demo also utilizes Quill, an open source WYSIWYG text editor that lets you easily edit labels in the graph.

Label Editor

Creating and Editing Labels

Press F2 or double-click a label to open the text editor. Ctrl + Enter commits the changes while Esc cancels the edit.

Note how the editor is hooked up with yFiles such that users don't need to write HTML markup themselves, but can rely on commonly known editor functions to format the text.

The MarkupLabelStyle

Internally, the HTML markup that is created from the Quill editor is added as an ILabel with the MarkupLabelStyle to the graph.

In general, the MarkupLabelStyle could also be used without a WYSIWYG editor. It supports the following tags:

• <span>: A stylable element.
• <br>: Adds a line break
• <em>: Italic text
• <strong>: Bold text
• <del>: Strikethrough text
• <u>: Underline text
• <h1>-<h6>: Heading 1-6
• <p>: A paragraph element.
• <pre>: A preformatted element which preserves newlines.
• <code>: A code element.
• <small>: Small font-size
• <large>: Large font-size
• <[html color name]>: Colored text, e.g. <blue>

Styling Labels with CSS

Tags can be styled with inline CSS. Also tags can be given CSS classes to use external CSS.

The stylesheet for labels markup-label.css shows how the label texts are styled with external CSS.

Text Wrapping

Markup labels can use line wrapping. In this demo application, the labels use word wrapping with ellipsis. Select and resize a node to observe the interactive text wrapping. Rich text labels can also be wrapped at character boundaries.