Styling examples

Different styles

A different style can be defined for each “piece” of the PDF template using the class name.
Let’s take an example with the “piece” related to the logo:
<span class="company-logo-standard"><img src="imgs/logo.png"></span>

In CSS file are defined types of style for the logo with

/* company-logo-standard definition */
.company-logo-standard {
    border: 1px solid red;
}
/* company-logo-modern definition */
.company-logo-modern {
    border: 3px solid green;
}

Style families

Each “piece” of the PDF template can be included in a div or span block with one o more style classes

<div class="class-name">here the template "piece"</div>
This feature allows to define, in the style file (CSS) associated to a PDF generator, multiple families of styles to be used in the PDF template.
Let’s take an example with the logo “piece”:
<span class="company-logo"><img src="imgs/logo.png"></span>

In the PDF template the logo is nested in a block to define the style family

<div class="family-style-modern">
    <span class="company-logo"><img src="imgs/logo.png"></span>
</div>

In the CSS file are defined the style families

/* family-style-standard definition */
.family-style-standard .company-logo {
    border: 1px solid red;
}
/* family-style-modern definition */
.family-style-modern .company-logo {
    border: 3px solid green;
}

Style families for the page

Different style families can also be defined for the page.

/* family style standard definition */
.family-standard .page-body {
    font-family: Courier;
    font-size: 12px;
    color: #444444;
}
.family-standard .company-logo {
    border: 0.5mm solid #222222;
    box-shadow: 5px 10px #888;
}
.family-standard thead,
.family-standard tfoot {
    display: table-row-group;
}

Watermark style families (mPDF excluded)

In the case of watermark text, the style definition is identical as header, footer and page.
If the text watermark is
<span class=”wm-txt”>DRAFT</span>

the families are defined in the CSS style file

/* watermark text family style standard definition */
.wm-family-standard .wm-txt {
    border: 0.5mm solid #222222;
}

Style families can also be defined for watermark image, using the watermark text editor and the ###WMIMAGE### marker

  1. define a watermark text with

    <span class=”wm-img”>###WMIMAGE###</span>
    
  2. switch to the watermark image

  3. select the image

  4. save

in the CSS style file define families style

/* watermark image family style standard definition */
.wm-family-standard .wm-img {
    border: 0.5mm solid #222222;
}

Right to Left text

To insert text with RTL orientation it is necessary to define a dedicated css class

.rtl-dir {
    direction: rtl;
}

in the PDF template, the text must be enclosed in a tag with class rtl-dir:

<span class = "rtl-dir">here the text</span>