Page 1 of 1

CSS-Based PDF question about footers

Posted: Fri Sep 14, 2018 4:41 am
by mdslup
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?

Re: CSS-Based PDF question about footers

Posted: Fri Sep 14, 2018 3:18 pm
by Dan
Hello,
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.. -->
</style>

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

Code: Select all


@page {
@top-left {
font-family:SansSerif;
font-size: 10pt;
content: url("part_no.svg") " XXX";
color: blue;
vertical-align:middle;
}
}
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,
Dan