HTML Article

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

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

Unsupported HTML

This component does not support the following tag.

Relative URL
<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 whose size will be maintained across devices.

Appearance

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:

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