HTML Article Component

Displays a block of HTML formatted text which has different styles, hyperlinks and images.

Save time and effort. The HTML article component makes it easy to re-use content and to link to other web resources.

Note: Javascript within the HTML is not supported.

Supported HTML

This components supports common HTML tags.

  • Breaks and paragraphs <br> <p>
  • Basic formatting: italic, bold, emphasised, strong. <i> <b> <em> <strong>
  • Headings <h1> <h2> <h3>
  • Preformatted text <pre>
  • Images <img>
    • Images can come either from the web, using an HTTP link, or locally in your project images folder, using just a filename .
  • Links <a>
  • Tables  including col and row spans. <table>…
  • Lists <ol> <ul>

Unsupported HTML

This component does not support the following tag.

  • Relative URL <base>
  • <script>

Supported CSS properties

  • Font names, size, color and styling: font-family, font-size, color, background-color, font-weight, font-style.
  • Borders, margins and padding.
  • Text alignment

We recommend you don’t use CSS for layout beyond these properties. This component is designed for displaying content, rather than controlling the layout, for which you use the facilities of Umajin itself.

Please refer “HTML – CSS selector and properties support” page for more detail.

Properties for HTML Article

Name When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height on order to create an article that will be well positioned across devices.
Appearance Set the look of the text on the page.
HTML Use the text panel popup to write or copy HTML code into the Text Editor.
HTML file Use the folder to locate your .html file
HTML Scale Slider ranging from 0.5 to 5 alters size
Resize Type Dropdown to select ‘Scale with screen’,’Pixels’, or ‘Scale with point’ as the resizing mode.
‘Millimeters’ is fixed size in pixels.
‘Scale with screen’ maintains relative to app proportions. (Default)
‘Scale with point’ same as ‘Scale with screen’, but then scaled for correct point size.
Resize to Content When the box is checked the text will reflow vertically to fit in all the original content.

The HTML Article Component has 2 specific events associated with it:

  1. On URL Clicked – could add  an Action such as ‘Show Web Page’ which would activate any web page links in the HTML content. Can add multiple actions for different links.
  2. On Complete – when the HTML content has finished loading you may need to add an action to resize content. This is for more advanced users and requires a javascript file that will sit in the script folder and in turn be used to create a Custom action. We will look to provide a link to such a file in the near future.