Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

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

Barbara Green October 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

4 votes
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 8, 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 October 9, 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! :)

Chetanya Jain June 24, 2019

Hi Christian, can you please the full content with me, please?

Majo November 13, 2020

@Steffen Heller  7 years later your answer helps me !!

 

Thanks a lot.. 

2 votes
Christian Sprenger October 7, 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
Vaibhav kamble April 26, 2019

Hi guys,

 

how to get the current date into footer?

1 vote
Shell D November 9, 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?

1 vote
Deleted user September 1, 2014

@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
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 9, 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
RianA
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 18, 2012
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
Deleted user September 1, 2014

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

0 votes
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 2, 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
Rainer Broleen August 8, 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 August 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 August 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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 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
Jason Eley July 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 July 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
Stanislav Kalianov November 13, 2011

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

0 votes
sanjay srikonda October 13, 2011

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

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events