Tags and CSS

Functionality can be used with the HTML object.

Format #

Directly as attribute: <span color="#008ec2"></span>
Via style attribute: <span style="color: #008ec2;"></span>
Via CSS section. It can accept just single-level CSS construction to apply the style: tag or class.

tag { font-size: 10px; font-weight: bold; } .class { font-size: 10px; font-weight: bold; }

Since HTML Worker 2.0 it's possible to use complex CSS selectors.

.class1.class2 { font-size: 10px; font-weight: bold; } div.class { font-size: 10px; font-weight: bold; }

Default CSS #

display - Specifies the element display option. Currently supports "none" to hide elements, "block" and "inline-block" for images. Since HTML Worker 2.0 support.
- Style attribute: <span style="display: none;">Text</span>
- CSS section: span { display: none; }
font-family - specifies the text font.
- Style attribute: <span style="font-family: Calibri;">Text</span>
- CSS section: span { font-family: Calibri; }
Font must be uploaded at E2Pdf -> Settings -> Fonts. Read More ››

It must be used the bold font name as value from E2Pdf -> Settings -> Fonts.
font-size - specifies the text font size.
- Style attribute: <span style="font-size: 5px;">Text</span>
- CSS section: span { font-size: 5px; }
font-weight - specifies the text font weight.
- Style attribute: <span style="font-weight: bold;">Text</span>
- CSS section: span { font-weight: bold; }
color - specifies the text font color.
- Attribute: <span color="#008ec2">Text</span>
- Style attribute: <span style="color: #008ec2;">Text</span>
- CSS section: span { color: #008ec2; }
font-style - specifies the text style.
- Style attribute: <span style="font-style: italic;">Text</span>
- CSS section: span { font-style: italic; }
line-height - specifies the text line height.
- Style attribute: <span style="line-height: 10px;">Text</span>
- CSS section: span { line-height: 10px; }
text-decoration - specifies the text decoration.
- Style attribute: <span style="text-decoration: underline;">Text</span>
- CSS section: span { text-decoration: underline; }
page-break-before - specifies moving the content to the next page.
- Style attribute: <span style="page-break-before: always;">Text</span>
- CSS section: span { page-break-before: always; }
Can be used in context with Parent / Child Blocks or Multipage option.

Supported HTML Tags and specified CSS #

<table> - is a table HTML element. <table><tr><td>Text</td></tr></table>
- width - specifies the width of the table. Can be set only in percentages. By default 100%. Since HTML Worker 2.0 width can be set in px.
  - Attribute: <table width="50%"><tr><td>Text1</td></tr></table>
  - Style attribute: <table style="width: 50%;"><tr><td>Text1</td></tr></table>
  - CSS section: table { width: 50%; }
- align, float - places table on the left, center, or right side of the parent HTML container in case it's used not 100% width.
  - Attribute: <table float="right" width="50%"><tr><td>Text1</td></tr></table>
  - Style attribute: <table style="float: right; width: 50%;"><tr><td>Text1</td></tr></table>
  - CSS section: table { float: right; width: 50%; }
- cellpadding - specifies the space between the cell content and its borders.
  - Attribute: <table cellpadding="5"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="cellpadding: 5;"><tr><td>Text</td></tr></table>
  - CSS section: table { cellpadding: 5; }
- padding, padding-left, padding-right, padding-top, padding-bottom - specifies the padding of cell content.
  - Attribute: <table padding="5"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="padding: 5;"><tr><td>Text</td></tr></table>
  - CSS section: table { padding: 5; }
- border - specifies the border width of the cell.
  
  border-left, border-right, border-top, border-bottom - specifies the border of the cell. Since HTML Worker 2.0.
  - Attribute: <table border="1"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="border: 1;"><tr><td>Text</td></tr></table>
  - CSS section: table { border: 1; }
  - CSS section since HTML Worker 2.0: table { border: 1px solid #eeeeee; }
- border-width, border-left-width, border-right-width, border-top-width, border-bottom-width, - specifies the border width of the cell. Since HTML Worker 2.0.
  - Attribute: <table border-width="1"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="border-width: 1;"><tr><td>Text</td></tr></table>
  - CSS section: table { border-width: 1; }
- bordercolor - specifies the border color of the cell.
  
  border-left-color, border-right-color, border-top-color, border-bottom-color, - specifies the border color of the cell. Since HTML Worker 2.0.
  - Attribute: <table bordercolor="#008ec2"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="bordercolor: #008ec2;"><tr><td>Text</td></tr></table>
  - CSS section: table { bordercolor: #008ec2; }
- bgcolor - specifies the table background color.
  - Attribute: <table bgcolor="#008ec2"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="bgcolor: #008ec2;"><tr><td>Text</td></tr></table>
  - CSS section: table { bgcolor: #008ec2; }
- text-align - specifies the global horizontal content alignment of the table cell's content.
  - Style attribute: <table style="text-align: center;"><tr><td>Text</td></tr></table>
  - CSS section: table { text-align: center; }
- vertical-align - specifies the global vertical content alignment of the table cell's content.
  - Style attribute: <table style="vertical-align: middle;"><tr><td>Text</td></tr></table>
  - CSS section: table { vertical-align: middle; }
- split-rows - specifies to split the rows in case of the content inside the row is overflowed and will not fit on the page.
  - Attribute: <table split-rows="1"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="split-rows: 1;"><tr><td>Text</td></tr></table>
  - CSS section: table { split-rows: 1; }
  Can be used in context with Parent / Child Blocks or Multipage option.
- keep-together - specifies to keep the whole table unbreakable between pages in case true.
  - Attribute: <table keep-together="1"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="keep-together: 1;"><tr><td>Text</td></tr></table>
  - CSS section: table { keep-together: 1; }
  Can be used in context with Parent / Child Blocks or Multipage option.
- header-rows - define the rows to be duplicated in the new block in case the table splitting.
  - Attribute: <table header-rows="1"><tr><td>Text</td></tr></table>
  - Style attribute: <table style="header-rows: 1;"><tr><td>Text</td></tr></table>
  - CSS section: table { header-rows: 1; }
  Can be used in context with Parent / Child Blocks or Multipage option.
<tr>
<td>
- width - specifies the width of the cell. Can be set only in percentages. By default, the width of the width of the cells will equal each other. Since HTML Worker 2.0 width can be set in px.
  - Attribute: <table><tr><td width="30%">Text1</td><td>Text2</td></tr></table>
  - Style attribute: <table><tr><td style="width: 30%;">Text1</td><td>Text2</td></tr></table>
  - CSS section: td { width: 30%; }
- height - specifies the height of the cell. Can be set only in px.
  - Attribute: <table><tr><td height="100px">Text1</td></tr></table>
  - Style attribute: <table><tr><td style="height: 100px;">Text1</td></tr></table>
  - CSS section: td { height: 100px; }
- colspan - defines the number of columns a cell should span.
  - Attribute: <table><tr><td colspan="2">Text1</td></tr><tr><td>Text2</td><td>Text3</td></tr></table>
    
    Text1
    Text2 Text3
- rowspan - specifies the number of rows a cell should span.
  - Attribute: <table><tr><td>Text1</td><td rowspan="2">Text3</td></tr><tr><td>Text2</td></tr></table>
    
    Text1 Text3
    Text2
- text-align - specifies the text alignment.
  - Style attribute: <table><tr><td style="text-align: center;">Text1</td></tr></table>
  - CSS section: td { text-align: center; }
- background - specifies the background of the cell.
  - Style attribute: <table><tr><td style="background: #008ec2;">Text1</td></tr></table>
  - CSS section: td { background: #008ec2; }
- border, border-left, border-right, border-top, border-bottom - specifies the border of the cell. Since HTML Worker 2.0.
  - Attribute: <table><tr><td border="1px solid #eeeeee"Text</td></tr></table>
  - Style attribute: <table style="border: 1px solid #eeeeee;"><tr><td>Text</td></tr></table>
  - CSS section: td { border: 1px solid #eeeeee; }
  - CSS section since HTML Worker 2.0: table { border: 1px solid #eeeeee; }
- padding, padding-left, padding-right, padding-top, padding-bottom - specifies the padding of cell content.
  - Attribute: <table><tr><td padding="5px">Text</td></tr></table>
  - Style attribute: <table><tr><td style="padding: 5px;">Text</td></tr></table>
  - CSS section: td { padding: 5px; }
<ul>, <ol>
- padding-left - specifies the list left padding.
  - Style attribute: <ul style="padding-left: 10px;"><li>Text</li></ul>
  - CSS section: ul { padding-left: 10px; }
- list-style-type - specifies the list style type. Only "none" is supported.
  - Style attribute: <ul style="list-style-type: none;"><li>Text</li></ul>
  - CSS section: ul { list-style-type: none; }
- list-style-image - specifies the list style type image.
  - CSS section: ul { list-style-image: url("https://www.w3schools.com/cssref/sqpurple.gif"); }
    - list-style-image-size - specifies the list style type image size. ul { list-style-image-size: 10; }
    - list-style-image-size-width - specifies the list style type image width. ul { list-style-image-width: 10; }
    - list-style-image-height - specifies the list style type image height. ul { list-style-image-height: 10; }
<li>
- padding-left - specifies the list item left padding.
  - Style attribute: <ul><li style="padding-left: 10px;">Text</li></ul>
  - CSS section: li { padding-left: 10px; }
<img>
- width - specifies the width of the image. Can be set to "auto" to keep the dimensional size. If the "width" is not set - it will be used original image width.
  - Attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" width="10px">
  - Style attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" style="width: 10px;">
  - CSS section: img { width: 10px; }
- height - specifies the height of the image. Can be set to "auto" to keep the dimensional size. If the "height" is not set - it will be used original image height.
  - Attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" height="10px">
  - Style attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" style="height: 10px;">
  - CSS section: img { height: 10px; }
- align, float - specifies the alignment of the image. Doesn't yet support multiple elements alignment. Since HTML Worker 2.0 support.
  - Attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" align="left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  - Style attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" style="align: left;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  - CSS section: img { align: left; }
- nowrap - prevents text wrap over the image in case "inline-block". Since HTML Worker 2.0 support.
  - Attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" nowrap="1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  - Style attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" style="nowrap: 1;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  - CSS section: img { nowrap: 1; }
- display - specifies the image display. Since HTML Worker 2.0 support.
  - block - display image as the block separately.
  - inline-block - display image inline with text.
  - - Attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" display="block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    - Style attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" style="display: block;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    - CSS section: img { display: block; }
- margin, margin-left, margin-right, margin-top, margin-bottom - sets the image margin. Since HTML Worker 2.0 support.
  - Attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" margin-left="10px"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  - Style attribute: <img src="https://www.w3schools.com/cssref/sqpurple.gif" style="margin-left: 10px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  - CSS section: img { margin-left: 10px; }
<p> - specifies the HTML paragraph element. <p>Text</p>
- margin, margin-top, margin-left, margin-right, margin-bottom - specifies the margin space.
  - Style attribute: <p style="margin-left: 10px;">Text</p>
  - CSS section: p { margin-left: 10px; }

<div> - specifies the HTML block element. <div>Text</div>
- margin, margin-top, margin-left, margin-right, margin-bottom - specifies the margin space.
  - Style attribute: <div style="margin-left: 10px;">Text</div>
  - CSS section: div { margin-left: 10px; }
<span> - specifies the inline HTML element. <span>Text</span>
<b> - defines bold text. <b>Text</b>
<s> - defines strikethrough text. <s>Text</s>
<u> - defines underline text. <u>Text</u>
<sub> - defines subscript text. <sub>Text</sub>
<sup> - defines superscript text. <sub>Text</sub>

General

Usage

Global Shortcodes

Helper Shortcodes

Logic Shortcodes

Extensions #

Templates

Elements #

PDF Builder Elements #

Actions & Conditions #

Tags and CSS

Format #

Default CSS #

Supported HTML Tags and specified CSS #

Text1
Text2	Text3

Text1	Text3
Text2