Converting TableData to HTML

This article describes the functionality and configuration options of the TableDataFunctions plugin.

The TableDataFunctions plugin is part of the DataProcessing.jar. DataProcessing.jar itself is part of the standard delivery of publishing server.

1 Purpose

Converting a table data object into a HTML representation to be shown in a web page.

This is typically used for generating rough previews of final PDF version of tables. Generating the final version is often more expensive in processing costs and time. The final version is typically created by the TableDataToTaggedText method on the pubserver side and rendering it with InDesign (or PdfRenderer).

2 How to call TableDataToHtml from Java

The plug-in has the name:

com.priint.pubserver.plugins.dataprocessing.TableDataFunctions

The plugin contains one method to transform tables into xhtml

tableDataToHtml(tableList, options)

Arguments

tableList: List<TableData>
options: String - details see below

Return Value

List<String>

3 Options

Options can be set in two ways:

Added via the "options" string: The options string is a comma-separated string like "styleNamePrefix=tst,dimensionFormat=#.##pt". Comma in value parts must be esacped as "%2C". Whitespace will not be trimmed during parsing.
Added through metadata within the TableData object itself.

Option Name	Metadata Key Name	Description
contentType	ext:contentType	Markup type of the cell values. Typically given as MIME type, either "text/html", "text/plain", "text/adobe-tagged-text". This drives the way the content is rendered. See section "Markup Type" below. Default is "text/html".
classNamePrefix	css:classNamePrefix	Prefix applied to CSS class names generated for core CSS classes defining the table skeleton. Default is an empty string.
lengthUnitFormat	css:lengthUnitFormat	Format for float numbers used in dimension measures like width and heights. Default is in millimeter with 3 decimal numbers precision specified as "#.###mm".
stylesheet	css:stylesheet	CSS stylesheet added to the out. a) the boolean value "true" for adding the built-in stylesheet to the output or b) a whole CSS stylesheet as string. Default is an empty string (no stylesheet added).
styleNamePrefix	css:styleNamePrefix	Prefix applied to CSS class names generated from style properties in TableData or TableDataCell objects. Default is an empty string.
styleClassType	css:styleClassType	Determines which kind of processing of style, "html" for HTML compatible or "taggedtext" for InDesign compatible, should be applied. If styleClassType=taggedtext then all non-alphanumeric chars except "-" and "" are replaced by "". In case when styleClassType=html, nothing is replaced, when rendering a tableData as html. Default is taggedtext. The implicit default if the field is not set.

3.1 Markup Types

Cell values can contain different types of content.

html (text/html) (default)

HTML markup is expected. Can be a HTML 4.01, a XHTML, or a HTML 5 fragment. When used with tableDataToTaggedText content is expected to be valid XHTML or must be converted using the TidyFirst option before final conversion. Markup can contain IDTT processing instructions which will be placed unchanged into the final tagged text.

text (text/plain)

Plain text. NewLine characters will be replaced into   line breaks in HTML. IDTT is not supported for plain text.

taggedtext (text/adobe-tagged-text)

Externally created InDesign tagged text is expected. Will be shown as a <code/> block in the HTML page.

Per default publishing server expects cell values to contain HTML markup (text/html). The default can be overridden via the option string using the "contentType" option. Values are "text", "html", or "taggedtext" or the mime types as given above. Metadata on the TableData, TableDataRow or TableDataCell allow to override these defaults. On a cell the markup type to use is determined in the following order by (1) cell metadata, (2) row metadata, (3) table metadata, (4) method call option string, (5) the general default.

4 Styling the HTML Table

4.1 Where to locate the CSS

You have four options where to store CSS data:

add appropriate styles to the stylesheet of your webpage (espec. priint-suite.css)
let tableDataToHtml add its build-in default stylesheet to the HTML output
add a stylesheet via "stylesheet" option in the method call
add a stylesheet via metadata of the tableData object

priint-suite.css

In ison you can create a custom version of /pubserver/pluginconfig/globals/css/priint-suite.css by adding styles for TableData objects.

Build-in Stylesheet

To add the build-in stylesheet you must add the option "stylesheet=true".

Custom Stylesheet

To add a custom stylesheet you must add the option stylesheet=... and add the stylesheet as value. Remember to escape commas "," as "%2C".

Alternatively you can add the stylesheet via a metadata item with key "css:stylesheet".

Example:

stylesheet=table.entitydata.thead {font-weight: 200%;}

Use build-in stylesheet together with custom stylesheet

To add a custom stylesheet along with the build-in one you can use a special @import rule. You must import a stylesheet from the virtual location "#default".

Example:

stylesheet=@import '#default'; table.entitydata.thead {font-weight: 200%;}

4.2 CSS class names (core)

Some classes are always added to the HTML output regardless of the tableData itself. These class names may get a prefix if option classNamePrefix is defined.

Tables containing entity data always have the class "entitydata".
Inner tables have the additional class "inner".
Columns in the left section have the "tleft" class. <th/> elements are not generated. Use the class="tleft" on the <col/> within the <colgroup/> element for styling.
Columns in the right section have the "tright" class. <th/> elements are not generated. Use the class="tright" on the <col/> within the <colgroup/> element for styling.
The central column group has class "tcenter".
Rows in the head section have the "thead" class. <thead/> elements are not generated. Use the class="thead" on the <tr/> for styling.
Rows in the footer section have the "tfoot" class. <tfoot/> elements are not generated. Use the class="tfoot" on the <tr/> for styling.
The body section creates <tr/> with class="tbody".
Each cell contains the Markup type name as CSS class, e.g. <td class="text"/> if it contains plaintext. Names are html, text, and taggedtext.

4.3 CSS class names (optional)

If the TableData or TableDataCell objects contain style names - intended for use in InDesign - these names are added as CSS class names to the output These class names may get a prefix if option styleClassPrefix is defined. This holds true for the fields

tableData.tableStyle
tableDataCell. cellStyle
tableDataCell.paragraphStyle
tableDataCell.characterStyle

The build-in style sheet (as of time of writing this document)

/* default stylesheet for entity-data tables */
/* general table style */
table.entitydata {
    font: 10pt/1.1 Arial;
    border: 1px solid #b0b0b0;
    border-collapse: collapse;
    background-color: #fefefe;
    color: #010101;
}
/* general cell style */
table.entitydata td {
    border: 1px solid #b0b0b0;
    padding: 2px 3px 2px 3px;
}
/* column groups */
table.entitydata col.tleft {
    background-color: #f0fefe;
}
table.entitydata col.tcenter {
}
table.entitydata col.tright {
    background-color: #f0f0fe;
}
/* row groups */
table.entitydata .thead {
    background-color: #f0f0e0;
}
table.entitydata .tbody {
}
table.entitydata .tfoot {
    background-color: #f0e0f0;
}
/* cell style by content type */
table.entitydata td.html {
}
table.entitydata td.text {
}
table.entitydata td.taggedtext {
    font-family: monospace;
    color: #800000;
    border: 1px dotted blue;
    cursor: cell;
}
/* IDTT tagged-text */
table.entitydata code.taggedtext {
    color: #800000;
    border: 1px dotted #b00000;
    cursor: cell;
}
/* error */
table.entitydata code.error {
    color: white;
    background-color: red;
}
/* tagged text */
.idtt {
    display: inline-block;
    border: 1px solid darkblue;
    background-color: Moccasin;
    color: darkblue;
    font-weight: bold;
    cursor: help;
    height: 1.2em;
    font-size: 90%;
    padding: 0px 2px;
    text-align: center;
    vertical-align: middle;
}
.idtt-open {
    border-right-width: 0px;
    border-radius: 3px 0px 0px 3px;
}
.idtt-close {
    border-left-width: 0px;
    border-radius: 0px 3px 3px 0px;
}
.idtt-w2 {
    background-color: Pink;
}

4.4 Support of IDTT parts (InDesign Tagged Text)

Cell contents can contain InDesign TaggedText (IDTT) snippets in form of processing instructions (PI). Instructions start with <?IDTT and end with ?>. Between this opener and closer can be arbitrary tagged text, as long as it does not contain a ?> itself. Such processing instructions will be ignored by the browser normally. That is why tableDataToHtml will convert the PIs into visible HTML markup showing the opening and closing TaggedText tags as graphical symbols with overlay text showing the whole tagged text content.

Example

HTML Input (Value Property in Table Data Cell)

Von Goethe: Wer reitet so <?IDTT <CharStyle:fett>?>spät<?IDTT <CharStyle:>?> durch Nacht und Wind. <?IDTT <w2inline:11.1, 22.2 "http://example.com/img.png">?>placehalter text<?IDTT <w2inline:>?>. Who is it? Is it <?IDTT <cType:foo>?> ctype:foo?

4.5 Support of embedded inner tables

An inner table is an embedded table defined in the tableData property of a table cell. If such an inner table is defined this inner table is used as cell content - ignoring the cell value if existing. The identifier of an inner table must be different form the parent table identifer. Otherwise the inner table is igored. Inner tables get additional class name "inner" to make them selectable via CSS.

1 Purpose​

2 How to call TableDataToHtml from Java​

3 Options​

3.1 Markup Types​

4 Styling the HTML Table​

4.1 Where to locate the CSS​

4.2 CSS class names (core)​

4.3 CSS class names (optional)​

4.4 Support of IDTT parts (InDesign Tagged Text)​

4.5 Support of embedded inner tables​