HTML files are used by Dialogs HTML, of which the in-game Briefing is a default implementation.
It supports a subset of standard HTML code, and uses the same type of syntax.
For more information, see:
(While the format supported by HTML files may look similar to Structured_Text, these two are not interchangeable!)
The whole file has to be enclosed in <html><body>...</body></html> tags.
Every text to be displayed has to be enclosed in paragraph tags.
There are 6 different tags available, each of which can display a unique font type and size: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> & <p>, e.g.
<h1>Headline text</h1> <p>Normal text</p>
Which font and size is used for each particular tag is defined in the Dialogs HTML itself. (For the in-game Briefing this is done in the engine's RscHTML class.)
The different styles, as defined in the example Controls base definitions, look as follows:
When using these font styles in Briefing, be aware that most of them will look identical (due to the definition in RscHTML).
Each paragraph style also has an alternative font defined, to use for bold text, but due to the limited fonts available in VBS this is normally the same font, just in a different color. To use the "bold" font style, enclose the respective section in <b>...</b> tags.
While it is technically possible, to nest different font styles (<p>normal and <h6>monospaced</h6> text</p>), the inner tags in this case are ignored, and everything will be output in the style defined by the outermost ones.
Just like in HTML, line-breaks are only shown where <br> is inserted in the text.
In addition, a line break is automatically executed after each closing paragraph tag (e.g. </p>).
Line breaks do not need to be inside paragraph tags - they work anywhere within the file, using the line height defined for the <p> font class.
Unlike regular HTML, every space within a paragraph tag will be displayed, e.g. <p>one two</p> will look different from <p>one two</p>.
While it is possible to indent lines, be aware that, since all spaces are output, any indented text will also show up indented!
Indenting paragraphs though, has no effect on the output:
using indented paragraphs.
using indented text.
<p>Some List</p> <p>* Item 1</p> <p>* Item 2</p>
Some List * Item 1 * Item 2
<p> Some List<br> * Item 1<br> * Item 2<br> </p>
Some List * Item 1 * Item 2
An HTML page can contain several Sections, which can link to each other.
To create a link, use an anchor tag, with the name of the target section preceded by a pound sign: <a href="#Section2">jump to section 2</a>
To activate a link, either click on it or press the spacebar. If there are multiple links on a page, then the currently active one (which would be used when pressing the spacebar) is normally shown in a different color. To change the active link, use the arrow keys.
In-game briefings have several default sections, which correlate to the notepad tabs. They can also link to map markers, where the editor map will center on the linked location when clicked. For more information, see Edit the Mission Briefing in the VBS Editor Manual.
Some characters need to be entered in encoded format, in order to be displayed:
- Ampersand (&): &
- Less-than (<): <
- Greater-than (>): >
Non-English characters can be displayed, but keep the limitations and requirements described in the Character sets article in mind.
Images can be added to briefings, by using the <img> tag.
The image format can be JPG or PAA, and its dimensions have to be a power of 2 (e.g. 128, 256, 512, etc.).
The size of the displayed image can be controlled via the width and height arguments (any resizing does not have to be proportional). Be aware though, that these are not absolute pixel values, but rather some relative measure (as a rough guideline, the maximum width that can be displayed in the Notepad is about 580).
In the example below "pic1.jpg" is the name of the picture, and it resides in the \images subfolder beneath the mission directory. It's width is 100, and its height is 50.
<p align="center"><img src="images\pic1.jpg" width="100" height="50"></p>
Since V2.15 VBS also supports tables inside HTML files.
They do not have to be inside paragraph tags, and can contain the following tags and attributes:
- <table></table>: Start and end of table (no border option). A line break is automatically inserted after the table.
- <tr></tr>: Start and end of row.
- <td></td>: Start and end of cell (can also be <th></th>, but they behave the same).
The number of cells per row can vary, without requiring colspan attributes (unlike standard HTML tables).
A cell tag can have the following attributes, whose values must be passed in double quotes:
- width: Cell width, either in pixels or as percent of control width. By default, all cells within a row have equal widths, to fill up the whole control. (e.g. <td width="50%">use half</td>)
- align: Text alignment in cell. Can be "left" (default), "center" or "right". (e.g. <td align="center">centered</td>)
- size: Font style for cell text. Can be 0 (default), or 1 to 6, corresponding with the font and size definitions for p, h1, h2, h3, h4, h5 & h6. (e.g. <td size="1">big text</td>)
<html><body> <table> <tr><td size="1" align="center">Table Demo<br></td></tr> <tr> <td size="0" align="left">row 1, cell 1</td> <td size="0" align="left">row 1, cell 2</td> </tr> <tr> <td size="2" align="center">row 2, cell 1</td> <td size="2" align="center">row 2, cell 2</td> </tr> <tr> <th size="6" align="right">row 3, cell 1</th> <th size="6" align="right">row 3, cell 2</th> </tr> </table> </body></html>
An HTML page can contain several
Just like in HTML, comments can be defined by using the <!-- ... --> tags (they can span several lines).
The file can contain one or more individual sections (or none at all).
If multiple sections are defined, then only the first one is displayed by default. The other ones are only shown when a link to them is clicked.
(Be aware that HScrollbar or VScrollbar don't work when using sections.)
Each section has to fulfill the following requirements:
- Must start with an anchor tag, containing the section's name, and enclosed in paragraph tags, e.g. <p><a name="section1"></a></p>
The anchor tag can contain text, e.g. <h1><a name="section1">Section One</a></h1>,
but the shortcut version is not allowed: <p><a name="dontdoit" /></p>
- If followed by another section, then there must be an <hr> tag at the end.
<p><a name="mySection"></a></p> <!-- name of section --> <p>my content</p> <!-- section content --> <hr> <!-- section terminator -->
<html> <body> <!-- list of links (first section shown) --> <h1><a name="List">Available Links</a></h1> <!-- section name is "List" --> <p> * <a href="#step1">Step 1</a><br> <!-- link to section "step1" --> * <a href="#step2">Step 2</a><br> <!-- link to section "step2" --> </p> <hr> <!-- section "step1" --> <h1><a name="step1">Step 1</a></h1> <!-- section name is "step1" --> <p> Description of step 1<br> <!-- content of section 1 --> [...]<br> <br> <a href="#List">Back to main page</a><br> <!-- link back to 1st section ("List") --> </p> <hr> <!-- section "step2" --> <h1><a name="step2">Step 2</a></h1> <!-- section name is "step2" --> <p> Description of step 2<br> <!-- content of section 2 --> [...]<br> <br> <a href="#List">Back to main page</a><br> <!-- link back to 1st section ("List") --> </p> <hr> </body> </html>