It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Define different page layouts for PDF export Edited

Hello everyone,

I want to define different page layouts for when you export to PDF. I want some to be landscape and some in portrait mode. Also some should have a different margin.

I found a similar question and a promising answer here:

https://community.atlassian.com/t5/Confluence-questions/Confluence-How-can-we-export-PDF-in-portrait-or-landscape-in-the/qaq-p/349230#M58987

Sadly, that solution does not seem to work, or at least not the way I want it to. Whenever I set my first page to use a named page, I end up with one extra empty page on my export.

 

Any help is greatly appreciated.

 

[Edit]

further explanation what I tried to do:

I edited the stylesheet under "Space Tools -> Look and Feel -> PDF Stylesheet". I use the Export function located under "Space Tools -> Content Tools -> Export => Export as PDF". I am using Confluence version 6.15.9. It is the Server edition which I am hosting myself for testing purposes.

The named page in and of itself is working. The problem is that I defined a named page for my cover page. So it is called with "<div class='cover-page'>" in the very first page.

As far as I can tell changing the "@page" automatically creates a pagebreak. That is why I get an empty page at the beginning. For now I just use "@page :blank" and set it to "display: none;" to get rid of it.

2 answers

Hi Tobias,

 

The I know the default PDF exporter has it's limitations.

I know that my team's Scroll PDF Exporter app can handle multiple templates and whatever page orientation you'd like. You can even have the page be portrait orientation and mark certain pieces of content to be exported in Landscape.

 

Let me know if you'd like to have a look at it to see if it does what you need.

The problem I was having was quite simple and can be best explained by a screenshot:

Confluence divs.png

The brown area is the "@page landscape" rule that changes the size of the page. As expected, it applies to the whole page. The purple is the "wiki-content" class, that wraps around the whole content of a Confluence page. For testing, I've set its width to 50% in this example. The yellow box (see second screenshot) is the div with which I called named page. Again, its behavior is expected. It wraps around everything I want to put on a landscape page. The orange box is a div I tried to get to fill the whole page.

Here is a closer look at the top of my landscape page:

Confluence divs 2.png

 

It is obvious that the "wiki-content" is limiting the width of the page. The width of the wiki-content gets set before I set new page dimensions and isn't getting updated when there is a page-break or a change in the page dimensions.

 

I tried to decouple the orange box from the parent box, but was not successful with it. When I manage to do what I want, I will post the solution here. I just hope that this bit of information is useful to some.

Let's take a look at the intermediary html page that gets generated:

    <body>
                
                
        
           
                      <div class="toc">
                    <div class="toclvl0">
           <a href="#Test_Home">
            <span>Test Home</span>
            <span class="toclead"/>
            <span href="#Test_Home" class="tocnum"/>
           </a>
          </div>
                          <div class="toclvl1">
           <a href="#Cover_Page">
            <span>Cover Page</span>
            <span class="toclead"/>
            <span href="#Cover_Page" class="tocnum"/>
           </a>
          </div>
                            </div>
    
                          <div class="hidden rendered-page"></div>
         <div class="wiki-content">
    <div class="pagetitle" id="Test Home">
     <h1 class="title-header">Test Home</h1>
     
    </div>
</div>

                          <div class="hidden rendered-page"></div>
         <div class="wiki-content">
    <div class="pagetitle" id="Cover Page">
     <h1 class="title-header">Cover Page</h1>
     <div class="landscape-page">
<div class="frame1"><p class="auto-cursor-target">This is<br/>some text</p></div>
</div>
<div class="break"></div><p><br/></p>
    </div>
</div>

      </body>

 

Yes, that indentation is awful, but that's how it is getting generated. There is some content that gets automatically added, such as the table of contents, which I've hidden with the css, same goes for the titles:

/* remove displayed titles */
.title-header
{
display: none;
}

/* don't add a table of content */
div.toc
{
display: none;
}

 

Let's clean up and look a bit closer at the interesting part:

<div class="hidden rendered-page"></div>
<div class="wiki-content">
<div class="pagetitle" id="Cover Page">
<h1 class="title-header">Cover Page</h1>
<div class="landscape-page">
<div class="frame1">
<p class="auto-cursor-target">This is<br/>some text</p>
</div>
</div>
<div class="break"></div>
<p><br/></p>
</div>
</div>

As can be seen, the "wiki-content" wraps around the whole content I want to display on a new page. There is even some content on the page, before I even get to change the page layout with my "landscape-page".

 

I am still trying to figure out a functioning way to escape the wiki-content styling. Confluence is using flyingpdf to convert from the html page to pdf, but sadly it is almost impossible to make it run on its own, as that would ease testing quite a bit.

I will make another post, once I've figured this out...

That is a lot of text and I am not sure to fully understand what you are after.

Is your main point this:

The width of "wiki-content" stays the same and does *not* change when the page format switches from landscape to portrait.

I have had that problem before. For example, if you change a page to landscape to have more space for wide tables, these tables only occupy a part of the available space. There is a discussion about that with some workarounds but no solution at

https://community.atlassian.com/t5/Confluence-questions/How-can-we-export-a-specific-PDF-page-in-portrait-or-landscape/qaq-p/115774#M19248

Perhaps there is something in the default CSS confluencedefaultpdf.css that makes "wiki-content" act as it does!?

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

Lessons and Learnings: Six Months of Working Remote [Discussion]

Hey there, folks! For most of us, the past six months- yes, you read that right- have been a journey. More people than ever before have pivoted to working remotely, and navigating being on-scre...

2,117 views 4 5
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you