Description

Markup Labels

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

Since the MarkupLabelStyle supports basic HTML markup, it can be easily hooked up with a WYSIWYG text editor that completely hides the markup from the user, as demonstrated in the Rich Text Label demo.

Creating and Editing Labels

  • Press the F2 key while an element or connection is selected.
  • Insert HTML-style markup text into the editor, i.e. <strong>Hello World</strong>

Supported Markup

The tags supported by rich text labels are

  • <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.

For example, the default <h2> is styled as dark gray with small-caps in this demo.

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.

See the sources for details.

Legal Disclosure | Privacy Policy | View on GitHub