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

How can I pull in the page title to the PDF export header?

Barbara Green Oct 13, 2011

An example in the Confluence doc shows how to customize the PDF style sheet header so that the page title is at the top.

Note that the content: for the title is a text string. Since this is done at the space level, is there a way to pull the page title in? So that when I select Export to PDF from the page menu, the page title is inserted?

@page
/* Any page-specific properties */
{
    @top-center
    {
        content: "Document Title Goes Here";
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
        font-size: 8pt;
    }
    @bottom-center
    {
        content: "Page " counter(page);
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
        font-size: 8pt;
    }
    /* Any other page-specific rules */
}

13 answers

3 votes
Steffen Heller Oct 08, 2013

Hello everybody,

here is a simple example for how to automatically add the page title to the PDF header.

Add this to your PDF stylesheet:

@page {
@top-center {  
content: element(runningheader);
} 
}
.pagetitle h1 {
position: running(runningheader); 
}

Explanations and examples can be found at "Running headers".

Christian Sprenger Oct 09, 2013

Edit: found the problem of dissapearing footer but still does not show me the page title in the top-center.

It will show me a dedicated page with the page title but this is not what I want. I^d like to have the title in the header-center.

Confluence V4.3.1

Unfortunately, my IE won't let me add the stylesheet as code so here it is in plain.

The "Page left" is with your suggestion, the right page how I tried. The reason we had "right" and "left" pages is that I wanted to display the page number always on the outside page, but for whatever reason I cannot show anything on "bottom-left" so we added tha page numbers into the center.

@page :left {
margin-left: 54pt; margin-right: 34pt;

@top-center {
content: element(runningheader);
}

.pagetitle h1 {
position: running(runningheader);
}

@bottom-center{
content: "Page " counter(page) " of " counter(pages);
font-family: times, serif;
font-size: 10pt;
}
@bottom-right {
content: "Copyright © 2013. All Rights Reserved";
font-family: times, serif;
color: #00853f;
font-size: 8pt;
}
}

@page :right {
margin-right: 54pt; margin-left:34pt;

@top-left{
content: element(header1);
font-size: 10pt;
}
@bottom-center{
content: "Page " counter(page) " of " counter(pages);
font-family: times, serif;
font-size: 10pt;
}
@bottom-right {
content: "Copyright © 2013. All Rights Reserved.";
font-family: times, serif;
color: #00853f;
font-size: 8pt;
}
}

@page :first {
@bottom-center{
content:none;
}
@bottom-right{
content:none;
}
}

This is not the full content of my stylesheet, if you need it please let me know.

And thank you very much for your support, I really appreciate! :)

Hi guys,

I'm afraid that confluence still could not add dynamically generated content in pdf export such as title of the page. there's a feature request regarding this, you can follow it here.



Hope it helps.

Best regards,
Josua

Issue Does Not Exist

The issue you are trying to view does not exist.

If you think this message is wrong, please contact your JIRA administrators.

Return to search

1 vote
Christian Sprenger Oct 07, 2013

...for the ammount of money paid COnfulence is SO NOT flexible. Not at ALL!

I tried with your suggestion but does not work.

Anyway, I think I'll hire some people and get some pens. Then they can write the page title on every printed document.

The time I already wasted to solve this (actually easy) issue is way more!

1 vote
Steffen Heller Oct 09, 2013

@Christian:

If that header topic is important to you you should start from scratch and experiment with a new stylesheet that doesn't contain anything else. Otherwise there is always risk that different formats intermingle.

My example definitely works for confluence 4.3.7. When I export to PDF all the PDF pages have the page title in the header of the page.

The method also has its limitations:

  • Since the page title is MOVED (and not COPIED) it doesn't appear in the text area of the page anymore
  • If you do an advanced PDF export with numerous pages only the page title of the first page is moved to the header

As regards your code example one thing definitely needs to be corrected:

The ".pagetitle h1" must be OUTSIDE of the "@page { ... }". So move the ".pagetitle h1" behind the closing "}" of the "@page { ... }".

1 vote

@all

follow the Steffen Heller comment, this solve (REALLY and DEFINITIVELY) the problem:

He says

Hello everybody,

here is a simple example for how to automatically add the page title to the PDF header.

Add this to your PDF stylesheet:

1
2
3
4
5
6
7
8
@page{
@top-center{
content: element(runningheader);
}
}
.pagetitle h1 {
position: running(runningheader);
}

Explanations and examples can be found at "Running headers".

1 vote
Shell D Nov 09, 2015

I'm still looking for a solution... tried

/* moves pagetitle (with modified formatting, eg: 10pt font) 
   from top of page to header (top left) on first page & 
   footer (bottom left) on every page */  
.pagetitle h1 {
    position: running(runningheader);
    font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
    font-size: 10pt;
} 
@page:first {
    /* Header - Page Title */
    @top-left {
        content: element(runningheader);
    }
} 
@page {
    /* Footer - Page Title */
    @bottom-left {
        content: element(runningheader);
    }
    /* Footer - Page Numbers */
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
        font-size: 10pt;
    }
    /* Generate border between footer and page content */
    border-bottom: 1px solid black;
}
/* doesnt appear to do anything as apparently 
   confluence supports CSS 2.1, not CSS 3 */
 
.pagetitle h1 {
     string-set: myheading content(); 
} 
 
@page {
     @bottom-left     {
         content: string(myheading);
         font-size: 8pt;
     }
}
/* doesnt appear to do anything as apparently 
   confluence supports CSS 2.1, not CSS 3 */
 
meta[name="wikilink"] {
     string-set: myheading attr(content);
}
 
link[rel="canonical"] {
     string-set: myurl attr(href);
}
 
@page {
 
     @bottom-left {
         content: string(myheading);
         font-size: 8pt;
     }
 
     @bottom-right {
         content: string(myurl);
         font-size: 8pt;
     }
}

 

Ideally I would like to obtain the url & path of page (spaceabbrev & page title) of these html codes & display them in headers & footers

<link rel="canonical" href="the_page_url"> 
<meta name="wikilink" content="[SPACEABBREV:Page Title]">
Benjamin Kramer May 17, 2018

me too:) would like to display the name of the space in the header and ideally the url

Any idea?

0 votes
sanjay srikonda Oct 13, 2011

I have been wondering this as well. I'm going to make sure to watch this post.

0 votes
Stanislav Kalianov Nov 13, 2011

I have posted similar question regarding the space title on cover page of PDF.

0 votes
Jason Eley Jul 18, 2012

has anyone worked this out yet? I have even tried getting the .pagetitle h1 to go in the @page { @top_left } but to no avail.

0 votes
Jason Eley Jul 18, 2012

has anyone worked this out yet? I have even tried getting the .pagetitle h1 to go in the @page { @top_left } but to no avail.

0 votes
Rainer Broleen Aug 08, 2012

After checking the references to the flying saucer documentation mentioned elsewhere, I came up with the following using a running element (see http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1).

h1 
{
    position: running(header1);
}

@page
{
    size: A4 portrait;
    
    @top-center
    {
        content: element(header1);
    }

    @bottom-center
    {
        content: "  Page " counter(page) " of " counter(pages);
        /*font-size: 10px;*/
    }
}

Stephen Gilson Aug 20, 2012

@Rainer,

That code works to pull in the h1 text, but the text ini the header reatins the same formatting as the h1 on the page. I tried this code, but bo go:

@top-left {
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 8pt !important;
content: element(header1);

}

Any idea?

Thanks,

Stephen

Rainer Broleen Aug 21, 2012

I got the same (inconsistent) results. If you put the formatting in the h1{} some of it works, like the font size. I ran out of time to try around and figure out what works where. I was hoping that someone at Atlassian who is into the inner workings would point to the docs or explain it.

Matthew J. Horn Aug 21, 2012

Maybe try doing something like this:

@top-left h1 {

...

}

Not sure if this will work, but might be worth a try.,

Steffen Heller Apr 14, 2014

Finally, I am in a situation where I also have to pull a h1 into the header of the page. And now I am also confused about the formating.

Certain formats work when I put them into the @top-center part, others work when I put them into the h1 {...} part. Somehow I managed to change the font-color but not the font-size (opposite to what Rainer wrote above).

Matthew's suggestion "@top-left h1" has no effect at all when I try.

So far I had a stylesheet where I pulled the content of a div to the header. With that it worked as expected. I could define the format of the div with div.classname {...}. But when it is not a div but the h1 that I want to use, it is all different...

0 votes
Steffen Heller Apr 02, 2013

If you put the formatting in the h1 {...}, as Rainer wrote, it should work.

I am doing something similiar with a <div class="runningheader"> that I copy to the page's header and I can define the formatting with .runningheader {...}

BUT not everything works as expected. Font styles are no problem. Other things like e.g. background-images won't work or will only work if other properties like "width", "height" or "display" are properly defined and so on.

0 votes
Vaibhav kamble Apr 26, 2019

Hi guys,

 

how to get the current date into footer?

Suggest an answer

Log in or Sign up to answer
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published in Confluence

6 Awesome Ways to Apply Trello, JIRA and Confluence to your Project

I attended  Atlassian Summit 2019  and learned a lot from the presenters, attendees and knowledgeable Atlassian product managers. The presentations I attended focused on applying Agile, pla...

1,149 views 7 18
Read article

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