HTML in Ignition

Many Ignition components display a text string. By default, a component's text is displayed in a single font and color and will not wrap when its content exceed the space the component has made available to the text.

HTML stands for HyperText Markup Language. It is commonly used to style text within webpages. The features that HTML brings to style web pages can be applied to many components within Ignition to style the text within components.

You can use HTML if you want to mix fonts or colors within the text or if you want formatting such as multiple lines. HTML formatting can be used in Ignition components such as buttons, labels, and tables. It can be used in common properties such as the mouse over text property.

To specify that a component's text has HTML formatting, just put the <html> element at the beginning of the text, then use any valid HTML element in the remainder.

Closing the HTML element is optional. In other words there is no need to place a </html> at the end of your stylized text.

Also, the HTML elements are not case sensitive.

Common HTML Elements

HTML tags are the special characters that instruct text to become stylized differently than other text within the same text. The following table describes the most common HTML elements that you can use within Ignition.

HTML Element
Name
Description

<html>...</html>

 

Initiates an html formatting. In most cases closing the html with </html> is optional.

<b>...</b>

Bold

Applies a bold style to the contents of these elements.

<br>

Break

Applies a line break at this specific location.

<li>...</li>

List Item

Used to represent a list item. Should be contained in an order list (<ol>) or unordered list (<ul>).

<ol>...</ol>

Ordered List

Places the text into an ordered list. Text inside list items are ordered by number.

<ul>...</ul>

Unordered List

Places the text into an unordered list. Text inside list items are ordered buy bullets.

<u>...</u>

Underline

Underlines the text contained within the elements.

<center>

Center

Centers the contents of the text. Used directly after the HTML tag (that is, <html><center>...)

<font color="red">...</font>

Font

Colors the contents red. Works with standard color names, hex numbers, or RGB numbers.

Applying HTML to Components

In Ignition, you can add HTML to the text property of any component such as, a label, button, or table.

Adding HTML into a Label

Suppose you want to make a label appear like this: This is a bold word

  1. Create a label on your window.

  2. Select the label's text property and enter the following text: <html><b>This is a <b>bold</b> word

Adding HTML into a Button

Suppose you want to make a button appear with the following words: S top the Process .

The word "Process" starts on a new line. Also, the words must be centered on the button.

  1. Create a button on your window.

  2. Select the buttons text property and enter the following text: <html><center>Stop the <br><font color="red">Process</font>

Adding HTML into a Component's Mouseover Text Property

The mouse over text property creates a popup when the user places their mouse over the component for an extended period of time. The mouse over text is an excellent way of giving the user additional information. The mouse over text property also handles HTML formatting.

Suppose you want a list of instructions to appear in the mouse over text of a component as the following:

These are the instructions:

  1. Stop this process.

  2. Check on this.

  3. Remove that.

To create this type of mouse over text, do the following:

  1. Create or choose a component on your window.

  2. Select the components mouse over text property and select the property's text editor icon ( images/download/thumbnails/1704234/TextEditor.png ) to edit the text.

  3. Enter the following text:

    <html>
    These are the instructions:
    <ol>
    <li>Stop the process.</li>
    <li>Check on this.</li>
    <li>Remove that.</li>
    </ol>

    Note that this technique allows you to format the text accross multiple lines. Line break do not occur unless they are explicitly declared with the <br> element or the component wraps the contents because of the lack of space for its contents.

Adding HTML into a table

The contents of a table will render HTML formatting. The HTML formatting has to be part of the specific cell. If you want to have HTML formatting affect all rows of the data then it will be necessary to concatenate the HTML markup into the source of the data that is populating the table.

Suppose that you wanted to edit a cell of a table in order to render its contents with HTML formatting. Simply access the table's underlying data and enter the HTML formatting into the cell that you would like to format. The same techniques used for HTML formatting throughout Ignition apply to the cells of a table as well.