Using CSS to format HTML and Enhanced Tabular Fields

The enable CSS support, edit the field options and press the … button next to the HTML option:

This opens a dialog with a set of options, one of which is CSS and provides the ability to edit the stylesheet.

This enables the use of CSS style markup. The attributes are not HTML attributes, but specific attributes provided by EasyCatalog. Take this example:

<p style = "character-color:red;">This is the first paragraph. It introduces the topic.</p>
<p style = "character-color:green;">This is the second paragraph. It provides more details and examples.</p>
<p style = "character-color:blue;">This is the third paragraph. It concludes the discussion and wraps up the ideas.</p>

<p style = "character-color:red;">This is the first paragraph. It introduces the topic.</p>

<p style = "character-color:green;">This is the second paragraph. It provides more details and examples.</p>

<p style = "character-color:blue;">This is the third paragraph. It concludes the discussion and wraps up the ideas.</p>

The style node specifies a character-color for the text in the paragraph. If the HTML contained no formatting:

<p>This is the first paragraph. It introduces the topic.</p>
<p>This is the second paragraph. It provides more details and examples.</p>
<p>This is the third paragraph. It concludes the discussion and wraps up the ideas.</p>

<p>This is the first paragraph. It introduces the topic.</p>

<p>This is the second paragraph. It provides more details and examples.</p>

<p>This is the third paragraph. It concludes the discussion and wraps up the ideas.</p>

Then we can define stylesheets to apply attributes using a basic CSS parser. For example:

  p:nth-of-type(1) {
    character-color: red;
  }
  p:nth-of-type(2) {
    character-color: green;
  }
  p:nth-of-type(3) {
    character-color: blue;
  }

p:nth-of-type(1) {

character-color: red;

}

p:nth-of-type(2) {

character-color: green;

}

p:nth-of-type(3) {

character-color: blue;

}

Working with tables

Taking this simple table:

<body>
<table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bob</td>
        <td>30</td>
        <td>London</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Charlie</td>
        <td>28</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Diana</td>
        <td>32</td>
        <td>Berlin</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Edward</td>
        <td>27</td>
        <td>Tokyo</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>Alice</td>

</tr>

<tr>

<td>London</td>

</tr>

<tr>

<td>Charlie</td>

<td>Paris</td>

</tr>

<tr>

<td>Diana</td>

<td>Berlin</td>

</tr>

<tr>

<td>Edward</td>

<td>Tokyo</td>

</tr>

</tbody>

</table>

</body>

</html>

To color the header and an alternating rows, the following stylesheets can be defined:

 table tr:nth-child(even) {
    cell-fill-color: #f2f2f2; /* light gray */
  }

 table tr:nth-child(odd) {
    cell-fill-color: #ff0000; /* red */
  }

 th {
    cell-fill-color: #000000; /* black */
    character-color: white;
  }

table tr:nth-child(even) {

cell-fill-color: #f2f2f2; /* light gray */

}

table tr:nth-child(odd) {

cell-fill-color: #ff0000; /* red */

}

th {

cell-fill-color: #000000; /* black */

character-color: white;

}

if the HTML contained a class attribute, eg:

 <td class = "age">30</td>

1	<td class = "age">30</td>

Then a stylesheet can pick this out:

 td.age {
  cell-fill-color: green; 
 }

td.age {

cell-fill-color: green;

}

The width of columns can be specified by using the cell-width property on the td or th tag:

 td {
  cell-width: 2cm;
 }

td {

cell-width: 2cm;

}

Using stylesheets with Tabular Fields

Stylsheets can be applied to tabular fields. For example, using the HTML above we can create an Enhanced tabular field with the following stylesheet:

 td.age {
  cell-fill-color: green; 
  cell-width: 2cm;
 }
 td {
  cell-width: 2cm;
}

td.age {

cell-fill-color: green;

cell-width: 2cm;

}

td {

cell-width: 2cm;

}

Stylesheets are applied uniformly to all enhanced tabular fields, regardless of their original source type. Each tabular field is treated as an implied HTML table for CSS processing purposes, with its structure represented through standard elements such as <table>, <tr>, <th>, and <td> nodes.

This design allows CSS rules to be applied consistently across all tabular data, enabling flexible styling and formatting. Stylesheets can also be added during post-processing, after the tabular field has been generated, to further refine its appearance.

For example, a stylesheet can be defined to apply a background color to the cells corresponding to a specific city:

td.america {
  cell-fill-color: blue; 
}

td.america {

cell-fill-color: blue;

}

The Additional Processing Lua code can then specify the cells class:

table:cell(2,4):setclass("america");

1	table:cell(2,4):setclass("america");

Without using a stylesheet, css style information can be set explicitly:

table:cell(2,4):setstyle("cell-fill-color: blue");

1	table:cell(2,4):setstyle("cell-fill-color: blue");

Another feature is the define CSS styles based on the content of the tabular fields. The contents of row cells are added as attributes to the CSS processor (The names of fields called id, class or style are prefixed with field-). So entire row can be styled of the contents of the City field by. For example:

td[city="New York"] {
  cell-fill-color: red; 
}

td[city="New York"] {

cell-fill-color: red;

}

Targeting tables by their id

The following HTML contains 2 tables with ids:

<body>
<table id="people">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bob</td>
        <td>30</td>
        <td>London</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Charlie</td>
        <td>28</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Diana</td>
        <td>32</td>
        <td>Berlin</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Edward</td>
        <td>27</td>
        <td>Tokyo</td>
      </tr>
    </tbody>
  </table>
<table id="prices">
    <thead>
      <tr>
        <th>Order ID</th>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price ($)</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1001</td>
        <td>Laptop</td>
        <td>2</td>
        <td>1200</td>
        <td>Shipped</td>
      </tr>
      <tr>
        <td>1002</td>
        <td>Smartphone</td>
        <td>5</td>
        <td>800</td>
        <td>Processing</td>
      </tr>
      <tr>
        <td>1003</td>
        <td>Headphones</td>
        <td>10</td>
        <td>150</td>
        <td>Delivered</td>
      </tr>
      <tr>
        <td>1004</td>
        <td>Monitor</td>
        <td>3</td>
        <td>300</td>
        <td>Pending</td>
      </tr>
      <tr>
        <td>1005</td>
        <td>Keyboard</td>
        <td>7</td>
        <td>75</td>
        <td>Shipped</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>Alice</td>

</tr>

<tr>

<td>London</td>

</tr>

<tr>

<td>Charlie</td>

<td>Paris</td>

</tr>

<tr>

<td>Diana</td>

<td>Berlin</td>

</tr>

<tr>

<td>Edward</td>

<td>Tokyo</td>

</tr>

</tbody>

</table>

<thead>

<tr>

<th>Order ID</th>

<th>Product</th>

<th>Quantity</th>

<th>Price ($)</th>

<th>Status</th>

</tr>

</thead>

<tbody>

<tr>

<td>Laptop</td>

<td>Shipped</td>

</tr>

<tr>

<td>Smartphone</td>

<td>Processing</td>

</tr>

<tr>

<td>Headphones</td>

<td>Delivered</td>

</tr>

<tr>

<td>Monitor</td>

<td>Pending</td>

</tr>

<tr>

<td>Keyboard</td>

<td>Shipped</td>

</tr>

</tbody>

</table>

</body>

</html>

The following stylesheets targets specific tables be their ID:

#people {
  table-width: 8cm;
}

#people td {
  cell-fill-color: blue;
  cell-fill-tint: 10%;
}

#people th {
  cell-fill-color: blue;
  cell-fill-tint: 40%;
}

#prices {
  table-width: 10cm;
}

#prices td {
  cell-fill-color: red;
  cell-fill-tint: 10%;
}

#prices th {
  cell-fill-color: red;
  cell-fill-tint: 40%;
}

#people {

table-width: 8cm;

}

#people td {

cell-fill-color: blue;

cell-fill-tint: 10%;

}

#people th {

cell-fill-color: blue;

cell-fill-tint: 40%;

}

#prices {

table-width: 10cm;

}

#prices td {

cell-fill-color: red;

cell-fill-tint: 10%;

}

#prices th {

cell-fill-color: red;

cell-fill-tint: 40%;

}

This produces the following output:

Sharing CSS between fields

If the CSS just contains the name of a file in the data sources scripts folder, this is loaded and used.

Other Considerations

Stylesheet information is stored at a cell level, so when a field is populated which has cell based attributes, these are applied irrespective of where a field is in a table.

Supported Selectors

The CSS parser is basic and evaluates whether a single HTML-like node matches a given CSS selector. The following selector types are supported:

1. Tag Selector

Matches elements by their tag name.
Examples:
- div — matches all <div> elements
- * — wildcard, matches any element

2. ID Selector

Matches elements by their id attribute.
Syntax: #idName
Example: #main — matches element with id="main"

3. Class Selector

Matches elements by their class attribute.
Syntax: .className
Multiple classes can be chained: .foo.bar
Matches elements containing all specified classes.

4. Attribute Selectors

Match elements based on attribute values.
Supported operators:
- [attr=value] — exact match
- [attr~=value] — whitespace-separated list contains value
- [attr|=value] — equals value or starts with value-
- [attr^=value] — starts with value
- [attr$=value] — ends with value
- [attr*=value] — contains value

5. Structural Pseudo-Classes

Target elements based on their position or type among siblings:

Pseudo-Class	Description
`:first-child`	Matches the first child of its parent
`:last-child`	Matches the last child of its parent
`:nth-child(n)`	Matches the nth child (1-based) of its parent
`:nth-last-child(n)`	Matches the nth child from the end
`:first-of-type`	Matches the first element of its type among siblings
`:last-of-type`	Matches the last element of its type among siblings
`:nth-of-type(n)`	Matches the nth element of its type among siblings
`:nth-last-of-type(n)`	Matches the nth element of its type from the end
`:only-child`	Matches the only child of its parent
`:only-of-type`	Matches the only element of its type among siblings
`:empty`	Matches elements with no children (no elements, text, or comments)

Note: nth-child and similar formulas support CSS-style numeric formulas (e.g., 2, 3n+1, odd, even)

Supported Attributes

The following list is complete at the time of writing, an up-to-date list can be generated at any time by pressing the info icon when editing a CSS stylesheet.

Modifies	Name	Expects
tables	cell-clip-contents	boolean
tables	cell-fill-color	string
tables	cell-fill-overprint	boolean
tables	cell-fill-tint	percentage
tables	cell-first-baseline-min	measure
tables	cell-first-baseline-offset	string
tables	cell-height	measure
tables	cell-inset-bottom	measure
tables	cell-inset-left	measure
tables	cell-inset-right	measure
tables	cell-inset-top	measure
tables	cell-stroke-color-bottom	string
tables	cell-stroke-color-left	string
tables	cell-stroke-color-right	string
tables	cell-stroke-color-top	string
tables	cell-stroke-overprint-bottom	percentage
tables	cell-stroke-overprint-left	percentage
tables	cell-stroke-overprint-right	percentage
tables	cell-stroke-overprint-top	percentage
tables	cell-stroke-tint-bottom	percentage
tables	cell-stroke-tint-left	percentage
tables	cell-stroke-tint-right	percentage
tables	cell-stroke-tint-top	percentage
tables	cell-stroke-weight-bottom	measure
tables	cell-stroke-weight-left	measure
tables	cell-stroke-weight-right	measure
tables	cell-stroke-weight-top	measure
tables	cell-style	string
tables	cell-text-rotation	degrees
tables	cell-vertical-justification	bottom, center, justify, top
tables	cell-vertical-justification-paragraph-spacing-limit	measure
tables	cell-width	measure
tables	row-keep-start-row	anywhere, next-column, next-even-page, next-frame, next-odd-page, next-page
tables	row-keep-with-next	boolean
tables	row-maximum-height	measure
tables	row-minimum-height	measure
tables	table-border-stroke-color	string
tables	table-border-stroke-tint	percentage
tables	table-border-stroke-type	dash3x2, dash4x4, dashed, dotted, japanese-dots, left-slant-hash, right-slant-hash, solid, straight-hash, thick-thick, thick-thin, thick-thin-thick, thin-thick, thin-thick-thin, thin-thin, triple, wavy, white-diamond
tables	table-border-stroke-weight	measure
tables	table-space-after	measure
tables	table-space-before	measure
tables	table-style	string
tables	table-width	measure
text	character-case	lowercase, none, small-everything, small-lowercase, uppercase
text	character-color	string
text	character-font-family	string
text	character-font-style	string
text	character-leading	measure
text	character-position	normal, subscript, superscript
text	character-size	string
text	character-strikethrough	boolean
text	character-strikethrough-color	string
text	character-strikethrough-gap-color	string
text	character-strikethrough-gap-tint	percentage
text	character-strikethrough-offset	measure
text	character-strikethrough-overprint-gap	boolean
text	character-strikethrough-overprint-stroke	boolean
text	character-strikethrough-tint	percentage
text	character-strikethrough-type	dash3x2, dash4x4, dashed, dotted, japanese-dots, left-slant-hash, right-slant-hash, solid, straight-hash, thick-thick, thick-thin, thick-thin-thick, thin-thick, thin-thick-thin, thin-thin, triple, wavy, white-diamond
text	character-strikethrough-weight	measure
text	character-style	string
text	character-underline	boolean
text	character-underline-color	string
text	character-underline-gap-color	string
text	character-underline-gap-tint	percentage
text	character-underline-offset	measure
text	character-underline-overprint-gap	boolean
text	character-underline-overprint-stroke	boolean
text	character-underline-tint	percentage
text	character-underline-type	dash3x2, dash4x4, dashed, dotted, japanese-dots, left-slant-hash, right-slant-hash, solid, straight-hash, thick-thick, thick-thin, thick-thin-thick, thin-thick, thin-thick-thin, thin-thin, triple, wavy, white-diamond
text	character-underline-weight	measure
text	paragraph-align	away-from-spine, center, justify, justify-center, justify-full, justify-left, justify-right, left, right, to-spine
text	paragraph-border	boolean
text	paragraph-border-bottom-edge	baseline, descent
text	paragraph-border-cap	but-cap, projecting-cap, round-cap
text	paragraph-border-corner-radius-bottom-left	measure
text	paragraph-border-corner-radius-bottom-right	measure
text	paragraph-border-corner-radius-top-left	measure
text	paragraph-border-corner-radius-top-right	measure
text	paragraph-border-corner-type-bottom-left	bevel, fancy, inset, inverse-rounded, rounded
text	paragraph-border-corner-type-bottom-right	bevel, fancy, inset, inverse-rounded, rounded
text	paragraph-border-corner-type-top-left	bevel, fancy, inset, inverse-rounded, rounded
text	paragraph-border-corner-type-top-right	bevel, fancy, inset, inverse-rounded, rounded
text	paragraph-border-display-if-splits	boolean
text	paragraph-border-gap-tint	percentage
text	paragraph-border-gap-tint-overprint	boolean
text	paragraph-border-join	bevel-join, miter-join, round-join
text	paragraph-border-merge-consecutive	boolean
text	paragraph-border-offset-bottom	measure
text	paragraph-border-offset-left	measure
text	paragraph-border-offset-right	measure
text	paragraph-border-offset-top	measure
text	paragraph-border-stroke-bottom	measure
text	paragraph-border-stroke-color	string
text	paragraph-border-stroke-gap-color	string
text	paragraph-border-stroke-left	measure
text	paragraph-border-stroke-right	measure
text	paragraph-border-stroke-top	measure
text	paragraph-border-stroke-type	dash3x2, dash4x4, dashed, dotted, japanese-dots, left-slant-hash, right-slant-hash, solid, straight-hash, thick-thick, thick-thin, thick-thin-thick, thin-thick, thin-thick-thin, thin-thin, triple, wavy, white-diamond
text	paragraph-border-top-edge	ascent, baseline, leading
text	paragraph-border-width	column, text
text	paragraph-bullets-alignment	string
text	paragraph-bullets-numbering-type	bullet, none, number
text	paragraph-bullets-text-after	string
text	paragraph-hyphenation-hyphenate-across-column	boolean
text	paragraph-hyphenation-hyphenate-capitalised-words	boolean
text	paragraph-hyphenation-hyphenate-last-word	boolean
text	paragraph-hyphenation-method	algorithm, dictionary, manual, off
text	paragraph-hyphenation-settings-after-first-letters	integer
text	paragraph-hyphenation-settings-before-last-letters	integer
text	paragraph-hyphenation-settings-better-spacing-fewer-hyphens	integer
text	paragraph-hyphenation-settings-hyphen-limit-hyphens	integer
text	paragraph-hyphenation-settings-hyphenate	boolean
text	paragraph-hyphenation-settings-hyphenate-zone	measure
text	paragraph-hyphenation-settings-words-with-at-least-letters	integer
text	paragraph-indent-first-line-left	measure
text	paragraph-indent-last-line-right	measure
text	paragraph-indent-left	measure
text	paragraph-indent-right	measure
text	paragraph-keep-options-all-lines-in-paragraph	boolean
text	paragraph-keep-options-at-start-end-of-paragraph	boolean
text	paragraph-keep-options-end-lines	integer
text	paragraph-keep-options-keep-lines-together	boolean
text	paragraph-keep-options-keep-with-next-lines	integer
text	paragraph-keep-options-keep-with-previous	boolean
text	paragraph-keep-options-start-lines	integer
text	paragraph-keep-options-start-paragraph	string
text	paragraph-rule-above	boolean
text	paragraph-rule-above-color	string
text	paragraph-rule-above-gap-color	string
text	paragraph-rule-above-gap-overprint	boolean
text	paragraph-rule-above-gap-tint	percentage
text	paragraph-rule-above-keep-in-frame	boolean
text	paragraph-rule-above-left-indent	measure
text	paragraph-rule-above-offset	measure
text	paragraph-rule-above-overprint-stroke	boolean
text	paragraph-rule-above-right-indent	measure
text	paragraph-rule-above-tint	percentage
text	paragraph-rule-above-type	string
text	paragraph-rule-above-weight	measure
text	paragraph-rule-above-width	string
text	paragraph-rule-below	boolean
text	paragraph-rule-below-color	string
text	paragraph-rule-below-gap-color	string
text	paragraph-rule-below-gap-overprint	boolean
text	paragraph-rule-below-gap-tint	percentage
text	paragraph-rule-below-keep-in-frame	boolean
text	paragraph-rule-below-left-indent	measure
text	paragraph-rule-below-offset	measure
text	paragraph-rule-below-overprint-stroke	boolean
text	paragraph-rule-below-right-indent	measure
text	paragraph-rule-below-tint	percentage
text	paragraph-rule-below-type	string
text	paragraph-rule-below-weight	measure
text	paragraph-rule-below-width	string
text	paragraph-shading	boolean
text	paragraph-shading-bottom-edge	baseline, descent
text	paragraph-shading-clip-to-frame	boolean
text	paragraph-shading-color	string
text	paragraph-shading-corner-radius-bottom-left	measure
text	paragraph-shading-corner-radius-bottom-right	measure
text	paragraph-shading-corner-radius-top-left	measure
text	paragraph-shading-corner-radius-top-right	measure
text	paragraph-shading-corner-type-bottom-left	bevel, fancy, inset, inverse-rounded, rounded
text	paragraph-shading-corner-type-bottom-right	bevel, fancy, inset, inverse-rounded, rounded
text	paragraph-shading-corner-type-top-left	bevel, fancy, inset, inverse-rounded, rounded
text	paragraph-shading-corner-type-top-right	bevel, fancy, inset, inverse-rounded, rounded
text	paragraph-shading-do-not-print	boolean
text	paragraph-shading-offset-bottom	measure
text	paragraph-shading-offset-left	measure
text	paragraph-shading-offset-right	measure
text	paragraph-shading-offset-top	measure
text	paragraph-shading-overprint	boolean
text	paragraph-shading-tint	percentage
text	paragraph-shading-top-edge	ascent, baseline, leading
text	paragraph-shading-width	text, column
text	paragraph-space-after	measure
text	paragraph-space-before	measure
text	paragraph-span-columns-count	integer
text	paragraph-span-columns-inside-gutter	measure
text	paragraph-span-columns-layout	single, span, split
text	paragraph-span-columns-outside-gutter	measure
text	paragraph-span-columns-space-after	measure
text	paragraph-span-columns-space-after-split	measure
text	paragraph-span-columns-space-before	measure
text	paragraph-span-columns-space-before-split	measure
text	paragraph-style	string

Frame Options What are Formatting Rules and Rule Sets?

Using CSS to format HTML and Enhanced Tabular Fields

Working with tables

Using stylesheets with Tabular Fields

Targeting tables by their id

Sharing CSS between fields

Other Considerations

Supported Selectors

1. Tag Selector

2. ID Selector

3. Class Selector

4. Attribute Selectors

5. Structural Pseudo-Classes

Supported Attributes

What’s new in 2025

Empower your catalogs at a free Nousmedis and SalesLayer webinar, June 4, 2024.

What’s New In 2024

EasyCatalog Training

Start your free trial today