Introduction

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:


  • HTML Code (https://en.wikipedia.org/wiki/HTML)


(While the format supported by HTML files may look similar to Structured_Text, these two are not interchangeable!)

Syntax

The whole file has to be enclosed in <html><body>...</body></html> tags.

Formatting

Paragraphs

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.

Line breaks

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.

Spaces

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

Indentations

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:

HTML code,
using indented paragraphs.
OutputHTML code,
using indented text.
Output
<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


Links

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.

Special Characters

Some characters need to be entered in encoded format, in order to be displayed:

Non-English characters can be displayed, but keep the limitations and requirements described in the Character sets article in mind.

Images

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>

Tables

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:

<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


Comments

Just like in HTML, comments can be defined by using the <!-- ... --> tags (they can span several lines).

Sections

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:

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

Example

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