CSS-Based PDF question about footers

[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?

[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