CSS-Based PDF question about footers

Posts: 138
Joined: Tue Mar 06, 2018 1:34 am

CSS-Based PDF question about footers

Post by mdslup » Fri Sep 14, 2018 4:41 am

I'm using the @page attributes to create headers and footers.

For example, in my @bottom-left I specify

@bottom-left {
content: "Part number: XXX";

I'd like to have the "XXX" be in a different color, but I can't figure out how to do that. Any tips?

Posts: 450
Joined: Mon Feb 03, 2003 10:56 am

Re: CSS-Based PDF question about footers

Post by Dan » Fri Sep 14, 2018 3:18 pm

This can be done using an SVG image that contains the text "Part Number" with a color, like this:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="60pt" height="10pt" font-size="10pt" alignment-baseline="after-edge" font-family="SansSerif" > <!-- The height is as big as the font -->
<desc>Part number</desc> <!-- Use the same value as the text, so the PDF document will be accessible (the screen readers will use it) -->
<style type="text/css">
.txt { fill: red; } <!-- Add here the styles for the entire text. -->
.italic-blue {font-style:italic; fill: blue;} <!-- You can also style fragments of the text also.. -->

<text x="0" y="0.8em" class="txt">Part <tspan class="italic-blue">number</tspan>:</text> <!-- Used 0.8em to emulate the text baseline. -->
Then use it from the CSS:

Code: Select all

@page {
@top-left {
font-size: 10pt;
content: url("part_no.svg") " XXX";
color: blue;
The color of the "XXX" text can be controlled from the CSS property. The rest from the SVG.

However currently the vertical-align is working as expected on images, so the image will be a bit out of alignment. I recommend to write us on the support email address to get access to a nightly build.

Many regards,

Post Reply