Footer on last page pdf with CSS

[Benny]

Dear all,
With the “DITA map PDF – based on HTML5 &CSS transformation” I am trying to create a footer on only the last page, that contains the content of several topic files.

[img]
https://drive.google.com/file/d/1yKTFZR ... sp=sharing
[/img]

Are there any suggestions on how to do this?
Individually I tried two approaches:
1. wrap everything in a div with an “lpfooter” class

By referring to an output class I tried to apply this xslt script (tried before or after merging): https://stackoverflow.com/questions/396 ... using-xslt

2. Put content inside a lpfooter div in the footer of the page.

I tried to do the following but the element() function does not seem to be supported:
https://www.cuba-platform.com/discuss/t ... eport/1967

As nothing really works and due to a lag of time I don’t have any good example to provide to you. But maybe you could provide me with hints where I should start and if above example links are good starting points or that there are better starting points.

Thanks

[Dan]

Hello Benny,

Please try the following:

First approach (using position:fixed)

1. Group all the footer topics under a single parent topic, under the last topic from your map.
For example you can have:

Code: Select all

...

End topic

   Footer parent topic

   	Footer content topic 1

   	Footer content topic 2.

2. Put an outputclass="footer" on the parent footer topic root element, or on the topicref.
3. Use the CSS position:fixed to position this topic to the bottom of the page:

Code: Select all

*[outputclass ~= "footer"] {

  position:fixed;

  

  bottom:0.5in;

  left: 0.5in;

  

  width:5in;

  height:200pt;

  

  border: 1pt solid red;

  background-color:yellow;

}

Notes:
- Make sure the width and height are enough for the content of the footer to fit. Take care, the content might bleed out of the page!
- Use bottom and left values to position the block

The second approach would be to decare the footer block as a footnote. Assuming the same structure as above:

Code: Select all

*[outputclass ~= "footer"] {

  float:footnote;



  background-color:yellow;

  height:200pt;

  width:5in;

  border: 1pt solid red;

}



*[outputclass ~= "footer"]:footnote-call{

  color:transparent;  

}



*[outputclass ~= "footer"]:footnote-marker{

  color:transparent;  

}

Notes:
- Use transparent colors to avoid the display of the footnote counters.

I hope this helps,
Many regards,
Dan

[Benny]

Thanks Dan,

This works for me!

I thought to have tried the nesting of the references to group them without succes, but maybe I overlooked something, now it works.

Best regards,

Benny