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