HTML in Ignition

Using HTML in Components

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.

On this page ...

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>

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.

<u>...</u>

Underline

Underlines the text contained within the elements.

<s>...</s>

Strikethrough

Draws a line through the text contained within the elements.

<br>

Break

Applies a line break at this specific location.

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

<li>...</li>

List Item

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

<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. These examples aren't unique to their specific components, but can be used on any component that has a Text or Mouseover Text property.

Adding HTML into a Label

Instead of having a long label, you can have it auto wrap text by simply adding <html> to the beginning of its text property.

  1. Select the label that needs the automatic line wrapping.

  2. Select the component's Text property.

  3. Insert <html> before the start of the text and press enter.

Or, 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>This is a <b>bold</b> word

And if you wanted to have a line break in a specific spot in the text.

  1. Create the label and select the Text property.

  2. Insert <html> before the start of the text. Select the part of the text that you want to see the break occur and type <br> in this location and press enter.

    <html>I would like to have a new line <br> so that the rest of my text will be below it.

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 mouseover text, do the following:

  1. Create or choose a component on your window.

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

  3. Enter the following text:

    HTML in mouseover property
    <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 across multiple lines. Line breaks 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 tags into the raw 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 tags 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.

Similar Topics ...