How can we export a specific PDF page in portrait or landscape for big pictures or tables ?

[Tiago Santiago]

Hi,

i have a page that has some big pictures and tables. So i would like to know if it is possible to export only that specifc part in landspace (by some macro or something).

Thanks for your help and time.

[Steffen Heller · Accepted solution]

text with 100% landscape width:

Definitely not a clean solution but it seems to work when you add a width to div.landscape:

div.landscape { 
page: landscape; 
width:160%;
}

[Bruce Schlueter]

@Steffen: That works great for me. Now text and table are displayed as wished, except that 160% is too much due to our margins. Thanks a lot.

[Tiago Santiago]

amazing Steffen Heller !! Thanks a lot for your time and effort :) it worked perfectly.

PS: What a hell.. now text and tables are printed in full width of landspace pages, but images and gliffy diagrams not !! oh my.. there must be a way to force it, as we force tables. Going to play a bit with settings! If anyone knows, share it plz :)

[Tiago Santiago]

cool ! i found how to force images to fill 100% width of landspace pages.

Just add:

img {

-fs-fit-images-to-width: 'your-value'in; (i.e: i'm using 8.75in;

}

But now.. i need to find how to force gliffy diagrams! (this is just a workaround, because i'm actually changing diagrams by diagram.png :( )

tks guys

Damm again, another workaround:

actually when we set img { ... } it will auto make page breaks between images and h1 ! i dont know why..

So again, thanks to Steffen Heller !!, i saw his tip to workaround this:

1. h1+img {
2. page-break-before: avoid;
3. }
4. img
5. {
6. -fs-fit-images-to-width:7.75in;
7. }

Now i can use my landspace pages for big tables, text and images :) (If you have more than one image and want to size only specific ones, you will need to set a div for img { ... })

Now, i just need to figure out how to make gliffy diagrams macro to fill 100% width in landspace pages.. maybe Steffen Heller know how :D

cheers

[Erick van Rijk]

anyone know how to get the tables working on full page width for a landscape page.

I used the <div.landscape> method to rotate the page and back again, but the table width still remains 100% portrait size.

I tried @Tiago Santiago2 stylesheet but it seems broken under Confluence 6.7.1 (at least the 100% table width).

[Simon Tost _TNG_]

This is an old question. Still.

Today there is also: PDF Macros for Confluence Plugin as a convenient solution.

[Nicolas Casel]

Thanks for highlighting this plugin.

However, as we tend to avoid adding new plugins to keep our Confluence platforms stable and easy to maintain, using CSS customization can still be a pertinent solution.

[Nicolas Casel]

With the latest Confluence version (5.x), there is a specific CSS rule to display in landscape mode:

https://confluence.atlassian.com/doc/customize-exports-to-pdf-190480945.html#CustomizeExportstoPDF-PageOrientation:LandscapeorPortrait

[Christine Diamond]

Hi Nicolas, Thanks for that update. That option seems to make all pages landscape. I am interested in making certain pages landscape on export, as described above. However, I cannot figure out how to surround an image within a <div> tag. Have you found a way to do that without a special extra plugin? 

[Raju KC]

Go to the page->Tools->export to pdf.

[Steffen Heller]

@Karie:

Images in full width:

Have you tried to simply add a width to your images with something like

img, wiki.content img {
width: 100%; 
width: 297mm;
}

Page title on portrait page:

The page title comes before the content of the page. So it can't be inside the div and so it is put on a normal portrait page.

What you could do instead is simply hide the page title completely and add a h1 title with the same wording inside your div.

You should be able to hide the page title with something like

h1.pagetitle, body h1:first-child {
display: none;
}

The two examples are redundant. I just put different possibilities in one description.

[Karie Kelly]

Thanks, Steffen, for the options. I'll try them each out and report back.

Much appreciated!

[Sanet Minnie]

Hi

I have implemented Steffen's <div> solution mentioned on this page. Thank you!!!

At the end of the <div> it SHOULD automatically switch back to normal portrait page style.

This is true when my `<div>` section is in the middle of a confluence page.
It is also true if my online page does not PDF across two pages.

When the online page PDFs across multiple pages, the exporter does not recognize when the next online page starts and therefore keeps it in landscape and only portraits the page after the 'next online page'.

If I force a page-break, I get two empty pages in the PDF, but then at least the next page is in portrait as it should be.

Did anyone else encounter this and how did you resolve it?

[Sanet Minnie]

Hi

I have implemented Steffen's <div> solution mentioned on this page. Thank you!!!

At the end of the <div> it SHOULD automatically switch back to normal portrait page style.

This is true when my `<div>` section is in the middle of a confluence page.
It is also true if my online page does not PDF across two pages.

When the online page PDFs across multiple pages, the exporter does not recognize when the next online page starts and therefore keeps it in landscape and only portraits the page after the 'next online page'.

If I force a page-break, I get two empty pages in the PDF, but then at least the next page is in portrait as it should be.

Did anyone else encounter this and how did you resolve it?

[Karie Kelly]

This page has been very helpful as I was recently requested for being able to support landscape pdfs. The content is expanding to the full width, when in landscape, but I have these two issues:

If I want the entire page to be landscape and put all content in the div, then one page is created in portrait with just the page title and then the rest is in landscape. How do I get the page title to be in landscape and not page break directly after it?

I've tried the various image options because none of my images are using full width. I don't know if I have misinterpreted the suggestions. But, here's what I've updated the CSS and tried the export with each of these options:

Places the following 1) inside the landscape div tag, 2) created a new div tag (l_image), and 3)with no div tag and not inside any existing div tag at all

h1+img

{

page-break-before: avoid

}

img

{

-fs-fit-images-to-width:10.00in;

}

I've also changed the image size from original to larger pixel width. The larger image displays find, but still exports to 2/3rds the landscape width.

I appreciate any guidance on how I can get our images to render in the full width, if sized properly, for content inside of our landscape div tag.

Thanks! Karie

[Tiago Santiago]

/* Page break at h1 and h2, because confluence push h1 to h2 */  
h1, h2  
{  
   page-break-before: always;  
}  
  
@page  
{  
    @bottom-center  
    {  
        content: "Page " counter(page);  
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;  
        font-size: 8pt;  
    }  
    /*bottom center prints page number */  
    
   @bottom-right  
    {  
        content: "Copyright © 2013";  
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;  
        font-size: 8pt;  
    }  
    /* bottom right prints copyright msg */    
}

/* makes tables fill 100% of page width - good for landspace */
  
table.confluenceTable {    
   width:100%;    
   table-layout: auto;  
}  
  
/* to in specific landscape pages. Just use the div macro <div class="landscape"> ... </div> */

/* "{div" in edit mode to use the div*/

@page {  
   size: 210mm 297mm; /* DinA4 */  
}  
  
div.landscape {  
   page: landscape;  
}  
   
@page landscape {  
   size: A4 landscape;   
}

[Tiago Santiago]

let me know if it worked for your tables with landspace page format..

[Łukasz Kulik]

@Tiago: Yes, please. I'll take a look.

[Steffen Heller]

@Bruce:

You are right. I get the same result when I use your stripped down CSS.

I never recognized this because I only use this @page landscape for big tables and in combination with

table.confluenceTable {  
width:100%;  
table-layout: auto;
}

it shows the tables with 100% of the page's width.

That is all I needed. I wasn't aware that there is more to it. Perhaps there is a way to force normal text to 100% as well. But I never tried so far.

[Łukasz Kulik]

Unfortuantelly I have the same issue even with tables. Page is re-oriented but even tables uses on 2/3 of page width.

[Tiago Santiago]

yap.. i confirm this too :( damm !

1- Tables use 100% of page landscape width.

2- But text and images uses only the space as if it was a portait page :(

Anyone as any ideia how to solve this ?

lukasz, do you want my pdf export stylesheet config ? i dont experience this issue with tables, as you do..

Cheers guys

ps: tested with confluence 4.3 and lastest version too 5.1.x , so i dont believe this is a confluence versions problem =/

[Steffen Heller]

Blank space on the right:

On my pages this is not the case. So there must be something else in your CSS.

Perhaps you can search if this is caused by a padding, margin or a fixed width in the CSS.
Or you give the @page landscape, @page and the .wiki-content in your CSS a different background-color to see what is what.

[Bruce Schlueter]

It is strange. I have stripped the CSS and just left @page and @page landscape with the size and no margins etc., no difference :-(

The background color changes but not the width of the text. If I just leave the @page landscape the page still will only be printed partly. If I change the @page to landscape size the complete area will be used.

[Steffen Heller]

@Bruce:

So what you get is a landscape PDF page with a width of 297 mm but the content of the page (a broad table or what?) covers only an area of 210 mm and the rest of the page is blank space on the left and on the right? Is this correct?

[Bruce Schlueter]

That is correct, but the blank space is only on the right. The text is not centered.

[Steffen Heller]

@Bruce:

The described method simply switches to an alternative @page setting as soon as a certain element is found on the page.

The element here is a "div.landscape" and the page setting is what you define at "@page landscape {...}".

"size: A4 landscape;" should get you a DinA4 landscape page. If the result is not as expected you could also start with something like "size: 297mm 210mm;" (width and height turned around) and change the numbers to your liking.

[Bruce Schlueter]

@Steffen:

Thanks for your input, what puzzles me is that the page orientation changes correct but the area that is used for printing does not cover the complete page when it changes to landscape. I did a test with landscape part in the middle of the page and the first and the third page were portrait as it should and the second was landscape. So far so good but the area that was used for printing was only as wide as a portrait page. So I guess I did something wrong.

@page landscape {
size: 297mm 210mm;
 margin-top: 2.0cm;  
    margin-bottom:1.4cm;   
    margin-left: 1cm;  
    margin-right: 1cm;  
    padding: 1em;  
}

@page 
{
    size: 210mm 297mm;   
    margin-top: 2.0cm;
    margin-bottom:1.4cm; 
    margin-left: 1cm;
    margin-right: 1cm;
    padding: 1em;

This is what I already changed inside the css, the @page section continues with more information so that is why the closing bracket is missing. Any ideas? We are currently on Confluence 4.3.2.

Cheers Bruce

[Tiago Santiago]

Hi ck. Thanks for the reply, but thats not what i was looking for.

i just found and tested the solution, its pretty easy :)

ALL CREDITS TO:

Steffen Heller

I am using it for big tables as follows:

My standard CSS is set for portrait pages with

1 2 3

@page { size: 210mm 297mm; /* DinA4 */ }

When I have a very big table I put it inside a div macro with <div class="landscape">...</div>
In my CSS a define an additional section with

1 2 3 4 5 6 7

div.landscape { page: landscape; } @page landscape { size: A4 landscape; }

So whenever there is a table (or anything else) inside a <div class="landscape"> the page format will change to "A4 landscape". At the end of the div it will automatically switch back to normal portrait page style.

[Bruce Schlueter]

Hi Tiago,

does the print in landscape cover the complete page? In our system it changes to landscape but still only prints the width of a portrait size. No matter if I have a table or just normal text. What are your settings in the css?

Thanks, Bruce

[Tiago Santiago]

Hmm really ? well i didnt notice that, but i will test it again and let you know about it ok ? maybe tomorrow, because i am not at the office anymore.

cheers

[Christine Diamond]

re: "When I have a very big table I put it inside a div macro with <div class="landscape">...</div>"

I understand how to edit the CSS for the PDF Export, but don't understand how to put content inside a <div> in my Confluence page. Is there a special macro for that? I looked for {div and {html and could not find one. I am using the Server version 5.7.1.

Thanks, Christine

[Steffen Heller]

Yes, you need a macro for this. You can use a div, span or html macro, anything that enables you to create a small bit of html code than includes the 'class="landscape"'.

In many installations these macros are preinstalled. But if you don't have any of them, it won't work.