CSS-Based PDF question about footers

mdslup
Posts: 65

CSS-Based PDF question about footers

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?
Dan
Posts: 299

Re: CSS-Based PDF question about footers

Fri Sep 14, 2018 3:18 pm

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

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 2 guests