Help File Formatting

Each help file is a plain HTML snippet wrapped in a single <container> tag. The container carries three optional attributes that drive automatic word-styling throughout the entire page. Below, each attribute and each inline tag is explained with examples.

The <container> tag

Every help file must open with <container> and close with </container>. The container is never rendered directly - it is the root node that holds both the page content and the three auto-formatting attributes.

html

<container data-rounded="..."
           data-menus="..."
           data-click="...">
    ... your help content here ...
</container>

The data-rounded attribute

Supply a comma-separated list of domain words that represent named objects in your application - things like object types, categories, or entity names. Every time one of these words appears in the body text it is automatically wrapped in a <rounded> pill so it stands out visually.

Example declaration:

data-rounded="area,fixture"

With that declaration in place, writing "Select an area or a fixture" will automatically render the same as "Select an <rounded>area</rounded> or a <rounded>fixture</rounded>") - no extra markup needed in the body text. Words are matched case-insensitively and whole-word only, so "area" will not match "areas" unless you also list "areas" in the attribute.

The data-menus attribute

Supply a comma-separated list of menu or toolbar names that exist in your application. Each occurrence in body text is automatically wrapped in a <menuoption> tag so menu names are visually distinct from surrounding prose.

Example declaration:

data-menus="Lorem ipsum,delor"

Writing "Open the file menu and choose Save" will render as: "Open the file menu and choose Save." Menu phrases can contain spaces - the whole phrase is matched as a unit, so "add menu" matches but "add" alone does not.

The data-click attribute

Supply a comma-separated list of keyboard shortcuts or mouse-action phrases specific to your application. These are rendered in a monospace keyboard-key style using the <clickbutton> tag.

Example declaration:

data-click="cntrl+z,cntrl+s,escape"

A number of common shortcuts are built in and styled automatically without any declaration needed: cntrl+c, cntrl+v, cntrl+b, shift+d, alt, shift, f1, left mouse button, right mouse button, mouse wheel.

Any phrases you add via data-click are appended to the built-in list.

Inline Tags

The <but> tag

Use <but> to render inline text styled to look like a physical UI button - useful for referring to on-screen buttons by their label.

The <ddlb> tag

Use <ddlb> to render inline text styled to resemble a drop-down list box - useful when referring to a select control by its current value or label.

The <icon> tag

Use <icon> to embed a Google Material Icon inline using only its icon name. No image files are needed - the icon is rendered via the Material Icons font.

• Click <icon>edit</icon> to open the editor.
• Click <icon>delete</icon> to remove the item.
• Click <icon>add_circle</icon> to add a new entry.

Renders as:

• Click edit to open the editor.
• Click delete to remove the item.
• Click add_circle to add a new entry.

(Icon names come from the Material Icons library).

Backtick inline code

Wrap any text in backtick "`" characters to render it as styled inline code. Angle brackets inside backticks are automatically HTML-escaped, so tag names display as literal text rather than being interpreted by the browser. For example:

Writing _mfScreenHelp.showHelp(pageName) in your source renders the <pageName> part as a literal tag name, not an HTML element.

Block code with <pre>

For multi-line code examples use a standalone <pre> block placed directly inside the container, not inside a <p> tag. Escape any angle brackets inside with < and > so they display literally.

html

<pre>
_mfScreenHelp.setCurrentHelpPage('topic1');
_mfScreenHelp.showHelp();
</pre>