HTML considerations

 

Caps and joins

Line properties Start cap, End cap and Line join are ignored in the output.

Colors

CMYK and grayscale is not supported in HTML, colors are converted to RGB.

Corner effects

Corner effects, e.g. rounded corners are:

– Ignored in tables, i.e. normal square corners are rendered in the output.

– Rasterized in shapes, e.g. rectangles.

Gradient fill

Shapes with gradient fill are by default rasterized, because not all web browsers support gradient fill.

You can override this behavior and allow gradient fill to be generated by specifying either

•	The html.natve-gradient-fill custom property in StoryTeller.

•	The Use native gradient fill setting for the HTML unpaginated driver.

Horizontal scaling

Horizontal scaling of text is not supported in HTML.

Hyphenation

Hyphenation of text is not supported in HTML.

Inline objects

If possible, avoid using multiple text objects or tables in the same text line. Instead use a single table.

This is because the HTML driver generates one cell tables for text objects to support vertical alignment of these objects. However, e.g. MS Outlook displays these tables as a paragraph table, i.e. the table is the only object that can be on that same text line.

Linespacing

You should avoid situations where exact line spacing is necessary since HTML and StoryTeller handle line spacing differently. In HTML, the space is distributed equally above and below the text, while in StoryTeller the specified line spacing is rendered below the text.

Rotation

Rotation of objects is not supported by HTML and thus ignored. Objects rotated in StoryTeller are rendered in the HTML output without rotation.

Symbol fonts

You should avoid symbol fonts since HTML does not support characters addressed by codepoints.

However, the StoryTeller bullets, which uses Symbol font, are mapped from the Symbol font by the HTML driver to Unicode U+2022. This renders a bullet of the current font in the same point size as the original bullet, just slightly smaller.

Tabs

HTML does not support tabs. Each tab is replaced with two space characters in the output. In StoryTeller, tabs are used in the default numbering types.

However, for bullets and numbering, it is ensured that the bullet or number is placed at the first line indent and a relative width span is rendered before the bullet/numbering content. This space is the shortest of the defined tab and the indent position.

Vector graphics

The following examples of vector graphics are rasterized:

•	Dotted or dashed rectangles

•

Ellipses

•

Lines

•

Barcodes

•

Charts

Rectangles with solid lines are maintained as vector objects also in the HTML output.

Vertical grow

It is recommended that you let content grow with text areas and table rows, instead of using fixed heights. Depending on the mail client, the content may require more space than the HTML driver expects.

As described above, many design elements that you add in StoryTeller are rasterized by the HTML driver. Be aware of that this rasterization may cause the following: • Slower processing. • Large image attachments to the email. • Screen resolution and zooming constraints.

Additional font information

To enable better suggestions to browsers that do not have the exact font name available, additional font information is generated in addition to the font family name, as in the examples below:

 

Font family	Additional font information
Arial	’Arial’, sans-serif
Arial Narrow	’Arial Narrow’, sans-serif
Times New Roman	’Times New Roman’, serif
Imprint MT Shadow	’Imprint MT Shadow’, fantasy
Courier New	’Courier New’, monospace
Bradley Hand ITC	’Bradley Hand ITC’, cursive
Wizardry	’Wizardry’

XML transformation

The HTML output can be transformed into XML by loading it in an XML parser.