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 img {
    border: 1px solid red;
}
/* company-logo-modern definition */
.company-logo-modern img {
    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 (family-style-modern)

<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-modern definition */
.family-style-modern .company-logo {
    border: 3px solid green;
}

Style families for the header and footer

Let’s see how to define different style families for the header.

Since the header is included in a block with class header-body we define two families: standard and modern.

/* header standard definition */
.header-body .header-standard {
    font-size: 10px;
    color: #DDDDDD;
    text-decoration: italic;
}
/* header modern definition */
.header-body .header-modern {
    font-size: 8px;
    color: blue;
    font-weight: bold;
}

In the header you have to set html like this (for standard family)

<div class="header-standard">
    here the header content
</div>

Same for footer styling: just replace header-body with footer-body.

Style families for the page

Different style families can also be defined for the page. The page body is included in a block with class page-body.

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

In the PDF template content, you have to set the content in a block with css class family-standard

<div class="family-standard">
    here the body of PDF: content, logo, tables and so on
</div>

Watermark style families (mPDF excluded)

In the case of watermark text, the style definition is identical as header, footer and page.

The watermark is included in a block with class page-watermark.

If the text watermark is

<div class="family-standard">
    DRAFT
</div>

the families are defined in the CSS style file

/* watermark text family style standard definition */
.page-watermark .family-standard {
    opacity: 0.1;
}

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>