Experience Manager Guides

joshm19816095 · 5/7/24

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):

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

VivekKumar · 5/7/24

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

VivekKumar · 5/7/24

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

joshm19816095 · 5/7/24

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

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

Thanks!

Josh

VivekKumar · 5/7/24

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.

joshm19816095 · 5/7/24

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

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

Thanks for your help!

VivekKumar · 5/7/24

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">

joshm19816095 · 5/7/24

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

VivekKumar · 5/7/24

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>

joshm19816095 · 5/7/24

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?

Surbhi_Maheshwari · 5/8/24

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

joshm19816095 · 5/8/24

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:

Any help is greatly appreciated!

Thanks again!!

Josh

Surbhi_Maheshwari · 5/8/24

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

joshm19816095 · 5/14/24

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!

VivekKumar · 5/14/24

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

rkody · 7/23/24

Hey @joshm19816095 , @VivekKumar , @Surbhi_Maheshwari

I have a similar requirement that I am trying to piece together. I have the final footer content correct, but it's being cut off. I need the final footer to be auto sized, due to a variable. If I change the size of the footer in just the Last_Page template, nothing happens, but when I make the common page layout AND the last_page layout to have "margin-bottom:2in;" for example, the content fits but it impacts all the pdf pages. Forcing "margin-bottom:auto;" into the layouts makes the footer disappear.

Is it possible to have either only the final footer auto sized or all footers auto sized?

VivekKumar · 7/24/24

Did you try customizing via css code like

@PAGE Common:-ro-last {
   margin-bottom: 2in;
}

rkody · 7/24/24

Yes, but I don't want the height to be 2in. I want it to be the height of the variable footer content.

kautuk_sahni · 6/6/24

@joshm19816095 We hope you found the AEM community helpful. We look forward to your return as either a learner or a mentor. The community benefits greatly from SMEs like you. Please encourage your AEM peers to contribute as well. Happy AEM learning!

Experience Manager Guides

Native PDF: Last page content overlap

Kautuk Sahni

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe