Formatting of Footers for PDF Output

[jmorales]

Hi,
I'm trying to create CSS to generate our corporate-standard footers for PDF output. I've been able to get the individual elements that we need, but some of the formatting is not yet correct. The CSS code that I'm using currently is at the end of this message. The problems in the output are as follows:
• The center text wraps, although there is a lot of unused space to either side that should make it possible to fit on one line.
• The border line appears about a quarter inch above the footer text, instead of being right above the text.

Regarding the center text, I see at https://www.oxygenxml.com/doc/versions/ ... hl=headers there is a suggestion to move the center text into the left or right box. The effect is not good when I try it. There are three problems: (1) I can't figure out how to make the text appear centered, (2) we need the center text to have a different color and font weight than the left and right elements, and (3) if I move the center text into the right box, then the text in the left box starts to wrap.

I attach screenshots of the current output (Bad Footer.png) and the desired output, as produced using Microsoft Word (Good Footer.png).

Bad Footer.png

Good Footer.png

I'm not sure if I'm hitting some absolute limits to what is possible in CSS and/or Oxygen. Any suggestions would be appreciated. Thanks!

@page {

@bottom-center {
content: "Confidential - Proprietary Information - For Use By Authorized Company Clients Only. Do Not Distribute.";
font-family: "Arial Narrow", arial, helvetica, sans-serif;
font-size: 8pt;
color: grey;
height: 10pt;
overflow-x: visible;
border-top: 1px solid black;
}
}

@page :left {

@bottom-left {
content: "Page " counter(page) " of " counter(pages);
font-family: "Arial Narrow", arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
border-top: 1px solid black;
}
@bottom-right {
content:oxy_xpath("format-date(current-date(), '[M01]/[D01]/[Y0001]')");
font-family: "Arial Narrow", arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
border-top: 1px solid black;
}
}

@page :right {

@bottom-left {
content:oxy_xpath("format-date(current-date(), '[M01]/[D01]/[Y0001]')");
font-family: "Arial Narrow", arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
border-top: 1px solid black;
}
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
font-family: "Arial Narrow", arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
border-top: 1px solid black;
}
}

[Dan]

Hello,
Please use the property:

Code: Select all

		
@bottom-center {
		....
		white-space:nowrap;
		...
	}

This will make the text bleed out to the left and right space and avoid line breaking. The text will be still centered.

Many regards,
Dan

[jmorales]

Thanks, Dan! That solution to prevent wrapping works beautifully.

The remaining problem is to control the position of the horizontal line. I'm using the following in the @bottom-left, @bottom-center, and @bottom-right sections:
border-top: 1px solid black;
We need the black line to appear right above the footer text, but instead it appears higher up. The attachments show the current behavior (Bad Footer.png) and the desired behavior (Good Footer.png, which was created in Word rather than Oxygen).

Bad Footer.png

Good Footer.png

I understand that we could push the text higher up, and that would make it appear right under the border. But we want the text to appear at its current position from the bottom of the page. And maybe we could lower the line by reducing the bottom page margin, but then the body text would come down too low. Our bottom page margin is supposed to be .98".

I've fiddled with padding-top, but that lowers the footer text rather than the border line. I also tried using text-decoration-line: overline to produce the line, but that property is apparently not supported. Looks like the outline-offset property is also not supported. I considered using a background image, but suspect that it won't resize nicely when the user zooms in and out in a PDF viewer.

Any suggestions would be appreciated!

[julien_lacour]

Hello,

The usage of SVG background image is a good practice in this case: it will allow you to fine tune your content and the SVG format can adapt to all your different output formats.

You can find more information about customization with SVG by following this link: How to Decorate the Header by Using a Background Image on the Entire Page

[jmorales]

Thanks, Julien. After much experimentation, I was able to create SVG images that work for the header and footer borders. It was a strange experience. I was using Lucidchart to create the images. When I tried to create an 8.5" x 11" image, the resulting SVG was actually too big to fit on the page when I transformed my Oxygen document to PDF. I tried using the background-size property in CSS to size the image automatically, but Oxygen said that the property is not supported. I ended up reducing the image size in Lucidchart until it finally fit on the page in Oxygen. I've got a feeling there must be an easier way to get the size right. If anyone has suggestions, I'd appreciate it. Thanks!