Expand my Community achievements bar.

SOLVED

Native PDF: Last page content overlap

Avatar

Level 3

Hello again!

 

I am developing a Native PDF Map template. I have copyright content that I'd like to include on the last page of a PDF. I've been able to call the information that I need, but I'm having trouble with the DITA content running under the copyright info. I know I can potentially push this out to its own page entirely, but I would prefer not to include an entire extra page each time.

 

Here is what I'm working with:

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="layout.css" type="text/css"/>
<meta name="page-style" content="size:A4 portrait;"/>
<title>Page Layout</title>
<meta name="footnote-style" content=""/>
</head>
<body>
<div data-region="header">
<br/>
</div>
<div data-region="content" style=""></div>
<div class="content" style="position: absolute; margin-top: 6pt; margin-bottom: 12pt; break-inside: avoid; bottom: 0">
<img align="left" height="73" src="BackMatter-ERIE_Logo.jpg" style="vertical-align: bottom; position: relative; display: block;" width="175"/>
<span style="padding-top:5e;">
<span style="position:relative;">
<span style="font-size:10pt;padding-top:5em">©</span>
</span>
</span>
<span data-field="metadata" data-format="default" data-subtype="//copyright/copyryear/@year" style="font-size: 10pt">COPYRYEAR</span>
<span data-field="metadata" data-format="default" data-subtype="//copyright[1]/copyrholder" style="font-size: 10pt">COPYHOLDER</span>
</div>
<div data-region="footer"></div>
</body>
</html>

 

Here is an example of the output that I'm getting on the last page from this code (page content continues underneath the copyright verbiage):

 

joshm19816095_0-1715103044465.png

 

How can I make it so that the DITA topic content does not run into the copyright info? I have tried quite a few things without success. Any help is greatly appreciated!

 

Thank you!

Josh Monacella

 

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Employee

You will have to redesign your back page a bit. position: absolute is the culprit.

 

<div class="content" style="position: absolute; margin-top: 6pt; margin-bottom: 12pt; break-inside: avoid; bottom: 0">

 

View solution in original post

13 Replies

Avatar

Employee

How are you specifying the last page in the template? Can you share the screenshot of the Page Layouts tab of your template?

Avatar

Level 3

Thanks for the quick response! Here is the page layouts tab for the template I'm using:

 

joshm19816095_0-1715141151401.png

 

joshm19816095_0-1715141444502.pngjoshm19816095_1-1715141462341.png

 

Let me know if this is what you need, or if you need anything else.

Thanks!

Josh

 

Avatar

Employee

Remove the Back Page entry. 

Go to the Page Layout order tab, add last_page layout as a custom page, and select the option merge before. 

 

Generate the PDF and see what you get.

Avatar

Level 3

Thanks again! I should have sent you a shot of the order before:

joshm19816095_0-1715143405285.png

 

I removed the back page entry, but the output is the same.

 

Thanks for your help!

Avatar

Correct answer by
Employee

You will have to redesign your back page a bit. position: absolute is the culprit.

 

<div class="content" style="position: absolute; margin-top: 6pt; margin-bottom: 12pt; break-inside: avoid; bottom: 0">

 

Avatar

Level 3

All the publishes I have tested so far are no longer overlapping!

 

Now, is there code I can add back in to make it always at the bottom of the page its on? That would be perfect!

 

Thanks again for all your help, I really appreciate it!

Josh

Avatar

Employee

You will have to add your code in the footer div, then it will always be at the bottom of the page.

<div data-region="footer"></div>

 

Avatar

Level 3

Thanks!

I did try this before, but it looks like the common page footer layout is overriding the last_page footer layout. Am I missing a setting there?

Avatar

Employee

Hi Josh,

 

Here you can use the same page layout for all chapters and topics and then change the last page footer to achieve what you want. Try adding the below CSS:

 

 

@PAGE Common:-ro-last {
  @bottom-left {
    content: element(last_pageFooter);
  }
}
footer.last_page {
  position: running(last_pageFooter);
}

 

 

I noticed that your copyright content is after content region. Please move it inside footer region for the above CSS to work.

 

 

 

 

 

 

<div data-region="footer" style=""></div>

 

 

 

 

 

 

 

Let us know how it goes.

Thanks and Regards,
Surbhi Maheshwari

Avatar

Level 3

It looks like that did the trick! I really want to thank you guys for going above and beyond for me on this one - I truly appreciate it!

I have one last ask, if I may. If you'd prefer me to start a new question post, just let me know and I can do so!

Now that the last page is controlling the last page footer, I'm having trouble getting the footer to line up the copyright and normal footer content properly. Could I trouble you to take a look at the footer code?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="layout.css" type="text/css"/>
    <meta name="page-style" content="size:A4 portrait;"/>
    <title>Page Layout</title>
    <meta name="footnote-style" content=""/>
  </head>
  <body>
    <div data-region="header">
      <br/>
    </div>
    <div data-region="content"></div>
    <div data-region="footer">
      <div class="footer" style="margin-top: 6pt; margin-bottom: 12pt; break-inside: avoid; bottom: 0">
        <img align="left" height="73" src="BackMatter-ERIE_Logo.jpg" style="vertical-align: bottom; position: relative; display: block;" width="175"/>
        <span style="padding-top:5e;">
          <span style="position:relative;">
            <span style="font-size:10pt;padding-top:5em">©</span>
          </span>
        </span>
        <span data-field="metadata" data-format="default" data-subtype="//copyright/copyryear/@year" style="font-size: 10pt">COPYRYEAR</span>
        <span data-field="metadata" data-format="default" data-subtype="//copyright[1]/copyrholder" style="font-size: 10pt">COPYHOLDER</span>
      </div>
    </div>
    <table border="0" style="border-style: none">
      <colgroup>
        <col style="width:10%"/>
        <col style="width:75%%"/>
        <col style="width:15%"/>
      </colgroup>
      <tbody style="border-style: none;  text-align: top">
        <tr>
          <td style="border-style: none">
            <span data-field="page-number" data-format="default" style="float: left;color: rgba(0, 0, 0, 0.75);font-size: 10pt">1</span>
          </td>
          <td style="border-style: none;text-align: center;">
            <span data-field="metadata" data-format="default" data-subtype="//resourceid/@id" style="color: rgba(0, 0, 0, 0.75);font-size: 10pt">DSD Number</span>
            <span data-field="project-title" data-format="default" style="text-align: center;color: rgba(0, 0, 0, 0.83);font-size: 10pt">Project Title</span>
            <span data-field="metadata" data-format="default" data-subtype="//data/title" style="text-align: center;color: rgba(0, 0, 0, 0.83);font-size: 10pt">Subtitle</span>
          </td>
          <td style="border-style: none">
            <span data-field="metadata" data-format="default" data-subtype="//critdates/revised/@modified" style="float: right;padding-left: 2em;display: inline-block;color: rgba(0, 0, 0, 0.75);font-size: 10pt">Revised Date</span>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

 

 

Here is the output that I'm currently getting out of that code:

joshm19816095_0-1715198058651.png

 

Any help is greatly appreciated! 

Thanks again!!

Josh

Avatar

Employee

Hi Josh,

 

You can add the footer content i.e. page, title and date in last_page page layout after the copyright content and you should be able to achieve the use case.

Let us know if that works for you.

 

Thanks and Regards,
Surbhi Maheshwari

 

Avatar

Level 3

Thanks again for all your help!

For anyone reading this down the line, it was the size of the footer that was preventing the final output showing correctly (after the previous steps). Once I increased the footer size, everything came together really nicely. 

I'm really thankful for this avenue of communication!

Avatar

Employee

Good to know Josh that it worked for you. Do post here if you have any other issues.