HTML5 OUTPUT

 Top  Previous  Next

HTML5 output, generated by use of the -p html5 option, is designed to create page-oriented output, similar when viewed to PDF output.  In addition to general document features, such as text, images, and box drawing, the HTML5 driver provides hooks to allow a developer to insert custom HTML and Javascript code into specific sections of the output.

 

HTML5 output is designed to be stand-alone, not requiring access to any particular web server. For example, if your rule set specifies an image file such logo.jpg, that file is converted into a data URL structure that can be embedded in the output.  In more typical HTML, such an image would be referenced and retrieved from a web server at view time.  With UnForm, you can specify an external image this way, but need to reference it with an "http://" or "https://" prefix so UnForm knows not to look for a local image and embed it.

 

The output generated by the html5 driver is generally compatible with modern web browsers on most platforms.  For Internet Explorer specifically, it is supported by IE9 and above.

 

Command Differences

 

The image, attach, and overlay commands normally reference a local file, and that fill will be embedded into the output as a data URL.  However, these commands also recognize a standard URL structure starting with http:// or https://, and will use the URL supplied instead of a file-based data URL.

 

The image and text commands support two new options to support hyperlinks.  These are created using an HTML <a href="url" options>text or image</a> structure.

 

•link "url" | {urlexpr} to specify a target URL as a literal or expression, which becomes the href= value of the <a> tag.

•linkopt "options" | {optionexpr} to specify additional <a> tag options as a literal or expression.

 

For example, the following will turn My Company into a hyperlink to mycompany.com, opening it in a new, blank window.

 

 text 10,1.5,"My Company",16,bold,helvetica, link "http://mycompany.com", linkopt "target=_blank"

 

Note that URL values must be url-encoded.  This is particularly important if the URL includes a query string, where values can contain spaces and other non-alphanumeric characters.  Use the urlencode() function to assist in creating url-encoded strings.

 

The image and attach commands will insert their content differently depending on the type of file being inserted.  If the file appears to be an image (its MIME type matches image/*, like a jpeg or png file would), then it is referenced with an <img> tag.  Otherwise, it is referenced with an <iframe> tag.  Note that some types of iframe content, in combination with some plugins, such as Adobe Acrobat Reader, render on top of all content, so PDF files might not be suitable attachments and should be converted to images.

 

The outline command is supported, and causes automatic insertion of a toolbar feature to navigate the outline structure.

 

TrueType fonts are supported, though the viewing browser must also support them via the @font-face CSS rule, and that excludes Internet Explorer 9 and earlier.

 

 

Inserting Custom HTML Output

 

Each HTML5 job has, at runtime, an html5 object variable that can be used to insert HTML and Javascript into the output from code block code, such as prepage or precopy.

 

•html5'putpage(html$) inserts page content in prepage or postpage code blocks
 

•html5'puthdr(head$) add content to the <head> </head> section
 

•html5'putscript(javascript$) add lines of script code following body, inside the <script> and </script> tags
 

•html5'puttoolbar(html$) add lines to toolbar <div> section.The output can include a toolbar that resides at the top of each page.  If any code injects toolbar content, the toolbar will be visible.
 

•html5'putfooter(footer$) add lines to footer following the </body> and </html> tags

 

The "html5" subdirectory under the UnForm server path includes several files that are automatically inserted into the output.  All files names starting with "uf" are included with UnForm and are overwritten by updates, but this directory is also a convenient place to add your own code fragments that can be used by the html5 object methods, using the getfile() function.

 

Here is an example from the simple.rul file in the samples directory.  This is a postjob code block that inserts two toolbar features from files found in the html5 directory.  Note the condition on the html5 object being present.

 

postjob{

if html5 then

        html5'puttoolbar(getfile("ufsmp_zoom.html"))

        html5'puttoolbar(getfile("ufsmp_paging.html"))

end if

}