Welcome to yEd Q&A!
Here you can ask questions and receive answers from other members of the community and yEd developers. And you can tell us your most wanted feature requests.

Categories

How can I achieve different text stylings within one label?

+5 votes
Can I use HTML markup in labels?
in Help by (3.4k points)

1 Answer

+6 votes
 
Best answer

The yEd graph editor application supports HTML markup in labels of graph elements. Using HTML markup is the only way to achieve different kinds of text styling within one label.

The following figure shows a node label that uses the HTML formatting support extensively:


When a label starts with "<html>", yEd automatically switches to HTML rendering for the label's content. Note, however, that HTML rendering and support for HTML markup is limited to what the underlying Java Runtime Environment (JRE) supports.
The following text styling mechanisms are covered:

  • Text decoration:
    <html>
    <u>underlined</u><br>
    <span style="text-decoration:underline">CSS underlined</span><br>
    <span style="text-decoration:line-through">CSS line-through</span>
    </html>
  • Font weight:
    <html>
    <b>bold</b><br>
    <span style="font-weight:bold">CSS bold</span><br>
    </html>
  • Font style:
    <html>
    <i>italic</i><br>
    <span style="font-style:italic">CSS italic</span>
    </html>
  • Font size:
    <html>
    <span style="font-size:200%">CSS font-size 200%</span>
    </html>
  • Color:
    <html>
    <span style="color:blue">CSS color <strong>blue</strong></span>
    </html>

Superscript and subscript text in labels is supported via HTML markup also:

<html>
Normal text<sup>superscript text</sup><br>
Normal text<sub>subscript text</sub>
</html>

You can also create multi-line labels by means of the HTML <br> element. For maximum compatibility with older JREs (yEd runs on JRE 1.5 and JRE 1.6), be sure to not use this syntax: <br/>. (See also the answer to: How can I get multi-line labels?)

HTML tables can be used within a label as well. The following HTML markup defines a table with border:

<html>
<h1>Table with Border</h1>
<table border="1">
  <tr>
    <th>Car</th>
    <th>PS</th>
    <th>Price (&euro;)</th>
  </tr>
  <tr>
    <td>Rolls-Royce Ghost</td>
    <td>570</td>
    <td>>253,000</td>
  </tr>
  <tr>
    <td>Porsche 911 Turbo</td>
    <td>500</td>
    <td>>148,000</td>
  </tr>
</table>
</html>

The width of an HTML table can be specified using the width attribute:

<table border="0" width="50%">
by [yWorks] (23.7k points)
edited by
Is there a possibility to format text within a label, by option, button, or command?
Writing HTML by hand is somewhat tedious
yEd does offer options font family, font style (plain, bold, italic), font size, and underlining for formatting plain text in the label properties.

If you require more complex formatting/styling but do not want to code HTML by hand, get a dedicated HTML editor and copy/paste the HTML code generated by said editor into yEd.
Why is no style="text-decoration:overline" supported?
How do you achieve the align center and right?
A corresponding GraphML file has been linked to the above sample. Please download and open the file in yEd then inspect the label's HTML code.
Great, thanks Thomas
Great to know that adding markup is possible.
However, using mark-down synthax would be highly appreciated!
Is there any markdown support planned?
Currently, there are no plans for supporting markdown.
To make HTML work in labels it is mandatory to *switch off "cropping"* in the label properties. Took me hours to find out...
I use this for thermodynamics flow balance diagrams -- nearly every character I enter has a subscript.   Markdown support would be a very useful addition.  Oop: just found this request: http://yed.yworks.com/support/qa/9410/support-for-markdown-in-labels-text-formatting
Multiple CSS Classes in HTML elements
Can't use <math> tags to show math formulae
HTML markup supported (as per JRE support)
Legal Disclosure | Privacy Policy
...