Supported HTML Attribute Reference

Table of contents

Overview
Attribute Reference

Overview

An attribute supports the element in which it is enclosed by adding further information in a formal and discreet manner. The library supports the use of the many standard element attributes on various Html Elements. Where possible the library tries to match expected behaviour to the final output based on existing meaning.

The library also extended the behaviour of the element with a number of custom elements

    <body id='bId' class='main-content other-class' >

      <!--  custom binding repeater on a list -->
        
      <ol class='model-list'>
        <template id='listing' data-bind='{{model.items}}' data-bind-max='200' >
          <li id='{{"item" + index()}}' class='model-item' >{{.name}}</li>
        </template>
      </ol>

      <!-- more content -->

    </body>

More information on actual document creation can be found in Getting Started. And all elements have a list of the specific attributes they individually support.

Unsupported attributes

When re-using existing content, there are a lot of attributes that can be on an html file that are not supported, or relevant to the library. By default these attributes will be skipped over and ignored. However if running in Strict conformance mode the library will raise an error each time it encounters an unknown attribute or attribute value.

Case sensitivity

By default All Visual Elements attributes are case sensitive and are all lower case.

Binding values to attributes

The library is strongly typed and expects specific types to be set on a value of an attribute. These can be explicity set within a template content, or created dynamically at generation time. Some attributes however are explicitly static only, or explicitly binding only - as the required type is not convertable. These are marked in tables below, with one of Any or Binding Only or Static Only.

Attribute Reference

The library supports the following attributes.

Global Attributes

The following attributes are supported on all visual elements - the elements that are within the body element, including the body element itself.

Attribute	Use	Bindable	Description
id	All Visual Elements	Any	Defines an identifier for the element it is contained in, that can be used to refer to elsewhere in the template.
title	All Visual Elements	Any	By default adds an entry into the document outline structure with the attribute text value to support navigation to the element. NOTE: See the data extension attributes below as some elements override this default behaviour.
style	All Visual Elements	Any	Allows a full definition of the visual appearance of the element. Styles and classes are discussed in their own sections as part of Styling Content and a full reference section on CSS properties
class	All Visual Elements	Any	Specifies a set of style class names as CSS selectors to apply to the element.
hidden	All Visual Elements	Any	Indicates if this content should be displayed or not. As an xhtml template the value of the attribute should also be ‘hidden’ e.g. hidden=’hidden’.
name	All Visual Elements	Any	Defines an explicit name for the element it is contained in, that can be used to refer to elsewhere in the template.
data-content	All Visual Elements, except `if` and `template`	Binding Only	Allows the dynamic binding of more visual content into the template at generation time from the documents data. More infomation on data binding can be found in the Learning section
data-content-action	All Visual Elements	Any	Defines an identifier for the element it is contained in, that can be used to refer to elsewhere in the template.
data-content-type	All Visual Elements	Any	Defines an identifier for the element it is contained in, that can be used to refer to elsewhere in the template.
data-style-identifier	All Visual Elements	Static Only	Defines an identifier for the element it is contained in, that can be used to refer to elsewhere in the template, to significantly improve performance of many repeating items in multiple structures.

Global Event Attributes

The following event attributes are supported on all visual elements. For more information on document controllers and event handling see the code behind learning article.

Attribute	Use	Bindable	Description
on-init	All Visual Elements	Static Only	An event that is raised to a declared method on the defined controller when the element is initialized.
on-loaded	All Visual Elements	Static Only	An event that is raised to a declared method on the defined controller when the element is loaded.
on-databinding	All Visual Elements	Static Only	An event that is raised to a declared method on the defined controller before the element is data bound.
on-databound	All Visual Elements	Static Only	An event that is raised to a declared method on the defined controller after the element is databound.
on-prelayout	All Visual Elements	Static Only	An event that is raised to a declared method on the defined controller before the element is laid out.
on-postlayout	All Visual Elements	Static Only	An event that is raised to a declared method on the defined controller after the element is laid out.
on-prerender	All Visual Elements	Static Only	An event that is raised to a declared method on the defined controller before the element is rendered.
on-postrender	All Visual Elements	Static Only	An event that is raised to a declared method on the defined controller after the element is rendered.

Supported Standard Attributes

The library supports the use of the following standard attributes that match existing attributes on html elements.

Attribute	Use	Bindable	Description
align	`img`	Any	Defines the alignment on a line for an image when it is laid out.
alt	`img`, `object`	Any	An alternative description for the element. Not currently used, but defined
charset	`<meta>`	Any	The character set for the meta data information. Not currently used, but defined
cite	`<ins>`, `<del>`	Any	The citation information for the inserter or deleter of the section. Not currently used, but defined
colspan	`<td>`	Any	Defines the number of columns across, a cell occupies including the current column.
content	`<meta>`	Any	Set the actual content value of a named meta-data element so that it can be used in document processing.
data	`<object>`	Any	Sets the source file path to a specific location (using any document base path) so the attachment can be loaded and included.
datetime	`<ins>`, `<del>`, `<time>`	Any	In the case of ins and del, specifies the timestamp for the modification. For a time element, specifies the date and/or time that should be displayed by the element.
for	`<label>`, `<output>`, `<page>`	Any	Identifies the id of the referenced element this element is referring to. For a page element, this with then be the page number of that referenced element.
height	`<img>`	Any	A legacy support attribute for the image element to explicitly set the pixel height for rendering. Use the CSS properties instead
high	`<meter>`	Any	Defines the recommended high value for a graphical meter bar.
href	`<a>`, `<link>`	Any	Sets the source file path to a specific location (using any document base path) so an image or external resource can be loaded and included.
http-equiv	`<meta>`	Any	Defines a pragme directive for the template. Not currently used, but defined
lang	`<html>`	Any	Specifies the default output culture (e.g. en-US or fr-FR) for the resultant document. This impacts features such as number conversion and date conversion to rendered strings.
low	`<meter>`	Any	Defines the recommended low value for a graphical meter bar.
max	`<meter>`, `<progress>`	Any	Defines the maximum value for a graphical meter or progress bar - based on this value the offset of the bar will be calculated.
media	`<source>`, `<style>`	Any	Specifies the mime type of the picture source or a media query the style is appropriate to be used for.
min	`<meter>`	Any	Defines the minimum value for a graphical meter - based on this value the offset of the bar will be calculated.
open	`<details>`	Any	Used to define if a details section will show all content, or just the summary.
min	`<meter>`	Any	Defines the optimum value for a graphical meter.
property	`<page>`	Any	Specifies the type of page number that should be looked up and used, e.g. ‘total’, or ‘section’ page number or ‘sectiontotal’ number.
rel	`<link>`	Any	Specifies the relationship of the linked source to the current source. NOTE anything other than ‘stylesheet’ will currently be ignored.
rowspan	`<td>`	Any	Defines the number of rows down, a cell occupies including the current row.
scope	`<th>`	Any	Defines whether a header cell is a header for a column, row, or group of columns or rows. Has no effect on output.
src	`<embed>`, `<frame>`,`<source>`, `<img>`	Any	Defines the external location of a resource (taking into account the document base path) that the element will use.
srcset	`<source>`	Any	Defines the external location of a range of resource (taking into account the document base path) that the element can use.
target	`<a>`	Any	Sets the location within the consuming application where the linked content should be shown. Support is based on the reader applications implementation
type	`<frame>`, `<source>`, `<style>` `<object>`	Any	Identifies the content mime type of a resource at an external location (taking into account the document base path).
value	`<progress>`	Any	Defines the actual value for a graphical progress bar - based on this value the offset of the bar will be calculated using max
width	`<img>`	Any	A legacy support attribute for the image element to explicitly set the pixel width for rendering. Use the CSS properties instead

Extension Attributes

The library uses the data-* attributes to extend the use of existing elements to preserve validity of a html template and provide support for the library features.

Attribute	Use	Bindable	Description
data-bind	`<template>`	Binding Only	Allows the dynamic binding of more visual content, multiple times, from within the template into the documents’ layout, based on the data received from the data-bind value. More infomation on data binding can be found in the Learning section
data-bind-max	`<template>`	Any	Limits the dynamic binding of visual content, to a maximum number of items. More infomation on data binding can be found in the Learning section
data-bind-start	`<template>`	Any	Sets the start of the dynamic binding of more visual content, from within the template into the documents’ layout, with zero being the first itteration. More infomation on data binding can be found in the Learning section
data-bind-step	`<template>`	Any	Sets the loop over count of the dynamic binding data before any entry is added to the document’s layout. More infomation on data binding can be found in the Learning section
data-file	`<object>`	Binding Only	Sets the attachment file dynamically to a PDFEmbeddedFileData instance, that will be attached in the document.
data-file-data	`<object>`	Bindable Only	Sets the attachment file dynamically to a byte[] of a files binary contents, that will be attached in the document.
data-fit-to	`<a>`	Any	Specifies the view location that should occur when the link is clicked - FullPage, PageWidth, PageHeight or BoundingBox (of the referenced element to link to).
data-img	`<img>`	Any	Sets the image file dynamically to a ImageData instance, that will be attached in the document.
data-img-data	`<img>`	Binding Only	Sets the image file dynamically to a binary array (byte[]), that will be used, along with the mime-type, to load and use an image within the document.
data-img-type	`<img>`	Any	Sets the data image mime-type, that is used, along with the image binary data, to load and use an image within the document.
data-li-align	`<li>`, `<menu>`, `<ol>`, `<ul>`	Any	Specifies the alignment of the content of the list items identifier (number, bullet etc.). This can also be specified via custom style and css.
data-li-concat	`<menu>`, `<ol>`, `<ul>`	Any	Specifies whether to concatentate the ist items identifier (number, bullet etc.) with any parent or related group list, forming a heirarchy. This can also be specified via custom style and css.
data-li-group	`<menu>`, `<ol>`, `<ul>`	Any	Specifies the name of the group that the ist items identifier (number, bullet etc.) continues, from any other part in the document. This can also be specified via custom style and css.
data-li-inset/a>	`<li>`, `<menu>`, `<ol>`, `<ul>`	Any	Specifies the width of the list-item identifier part, allowing space for more content. This can also be specified via custom style and css.
data-li-postfix/a>	`<menu>`, `<ol>`, `<ul>`	Any	Specifies a character string that will be added at the end of the list-item identifier part. This can also be specified via custom style and css.
data-li-prefix/a>	`<menu>`, `<ol>`, `<ul>`	Any	Specifies a character string that will be added at the start of a list-item identifier part. This can also be specified via custom style and css.
data-min-scale	`<img>`	Any	Explicitly modifies the minimum scaling allowed on an image at layout, that has no explicit sizing set.
data-outline-title	`<abbr>`, `<cite>`, `<defn>`	Any	This is supported on the elements that alter the function of title within the template, and reproduces the behavour of `title` of the other elements.
data-page-count	`<frame>`	Any	Specifies the maximum number of pages from the frames source document, will be output into the final document.
data-page-start	`<frame>`	Any	Specifies the starting page index from the frames source document, where output into the final document will begin. Where 1 is the first page in the document.
data-passthrough	`<iframe>`	Any	Flag, false by default, that can allow data from the parent document to flow through into a child template - allowing dynamic content within the child.
data-test	`<if>`	Binding Only	A binding expression that should return a non-null or non-false value and will then show the content within the inner elements of the if elements
data-id	`<var>`	Static Only	A name of an existing or new document variable. THis variable will be set to the result of the `data-value` expression (each time the var is bound). This can then be used elsewhere in the document to show or calculate further values.
data-value	`<num>`, `<var>`, `<data>`	Binding Only	A binding expression that will be used by parent element. Either outputting it as a value in a specific format of the document, or storing it in a document variable for use later on.