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

PDF-Export: Which CSS properties do work and which ones not?

Steffen Heller Apr 25, 2012

Hello,

I am working a lot with PDF exports and I like the flexibility of using CSS to customize them. What I miss is a simple overview of what CSS properties do actually work with Confluence and which not.

The following are some properties that I would like to use, have spend a lot of time trying and still don't know if it is just me that doesn't get it to work or if it doesn't work at all.

string-set

Did anyone manage to create running headers that automatically copy the content from all the h1s (or h2s...)?

nth-child

I would like to have tables with rows in different colours. But the following doesn't work. Any ideas?

table.confluenceTable tr:nth-child(odd) td.confluenceTd {
background:yellow;
}
table.confluenceTable tr:nth-child(even) td.confluenceTd {
background:green;
}

Different examples with first-child did work though!

content: url()

I want an image as automatically generated content. The following doesn't work. I think I tried with and without apostrophies and with different URL-paths.

li:before { 
content:  url(/download/attachments/72716525/reficon.png); 
}

Thanks

5 answers

1 accepted

3 votes
Answer accepted
Steffen Heller Jun 24, 2012

Hello everyone,

time to sum it up. My initial request was this:

What I miss is a simple overview of what CSS properties do actually work with Confluence and which not.

I think what Paul said answers it quite well:

Flying Saucer is the library used "behind the scenes" for PDF export so you can often find useful hints and discussions on their various mailing lists and forums.

As regards PDF exports the most important information to be found on the flying saucer homepage might be this:

Flying Saucer supports all of CSS 2.1 with a few exceptions...

And for these exceptions there is a discussion group and an issue tracker.

Thanks for all the answers.

Steffen Heller Jun 24, 2012

Talking about exceptions: I actually found something about my "content: url()" problem.

It is quite short but I think this post in the issue tracker confirms that there is no support for url() in the content property.

1 vote
Mary-Jane Smyth Jun 20, 2012

I have created running headers and footers using a div on the wiki page that is hidden from screen display.

Steffen Heller Jun 20, 2012

Thanks Mary-Jane. In fact my approach is similiar to yours. I am just not too happy with it ;-) I have a technique with which I can create running headers. But I would prefer a more automated approach.

Like you I have to include divs on my lightweb pages to get different content into the PDF's header.
With the "string-set" method this should not be necessary because the content of certain html elements like h1, h2, h3 could be automatically copied to the PDF's header.

At least this is how it works in theory. In my practice it doesn't work at all and that is why I opened this thread.

Anyway, in case anyone is interested in my imperfect workaround, here it is:

  • Use the div macro and write the following code on your lightweb page:
{div:class=runningheader}text_that_will_be_shown_in_the_PDF's_header{div}
  • Go to your PDF Export Stylesheet and include the following code:
.runningheader {
position: running(runningheader);
}

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

Afterwards "text_that_will_be_shown_in_the_PDF's_header" will appear in the PDF's page header starting from that point where you included the div macro on your lightweb pages up to the point where there is another div macro with different content.

Felicity Chapman Jan 19, 2013

This tip was exactly what I was looking for. I was so excited to read it. However, I cannot seem to get it to work in my Confluence 4.3 setup. I've no idea if I'm doing something daft with the CSS, whether I'm doing something odd with the div macro or if this just doesn't work in Confluence 4.3.

If you've any debug suggestions then I'd be very grateful. Thanks.

Chris Amos Aug 08, 2018

Can I ask a silly question, just how do I put a Div macro in the lightweb page?

I have a page I want to export to PDF, I want to set the footer, I managed to get the doc title and page numbers using runningheader etc.

I tried adding {Div...} and I tried putting it in an html macro, no go.

But I also need to add revision information to the footer, it is not brilliant but I would accept manually updating a block of text, hidden or or not.

Steffen Heller Aug 08, 2018

How to put a DIV macro in the lightweb page?

  • Insert > Other macros > div

-or-

  • Start writing {div and click ENTER (Autocomplete from Editor settings must be activated for this)
Chris Amos Aug 08, 2018

Is it possible that this is a restricted macro, I am space admin?

Auto complete is on, it says 'failed to get macro details', if I insert it with the dialog and search for div, nothing there.

 

We have v6.10.1 server 10K license.

Steffen Heller Aug 08, 2018

Here is another explanation about how to find it:
https://www.adaptavist.com/doco/display/CFP/Div

If there is nothing, then perhaps it was deactivated or something, difficult to say.

Chris Amos Aug 08, 2018

ah, when I go to formatting I get things like info and html, but I don't get css stylesheet, dialog, div... all the items in the screenshot on the link above that have a round orange icon are not present.

Are they from an add-in?

1 vote
Paul Curren Atlassian Team Jun 21, 2012

PDF export should support the full set of CSS 2.1 selectors. This is via the library used.

I must confess, I'm no expert on CSS, but as far as I can tell from the spec the 'content' property in a :before or :after selector must be textual, which would make your example of trying to include an image invalid.

Steffen Heller Jun 21, 2012

Hello Paul,

that sounds as if your first two sentences answer all my questions here. Are you saying that "flying saucer" is what stands behind the export function of confluence and knowing that "flying saucer" uses CSS 2.1 gives a good guideline for which CSS properties will work in confluence and which ones not?

So far I didn't have a clue how the PDF export really works and what technology is used for that. And admittedly I am no expert on this.

I quickly checked some of the properties in the CSS 2.1 spec. "string-set" and "nth-child" are not included and do not work in my examples. "first-child" is included and does work for me.

As regards the "content: url(...)" example I am not sure yet. If you go the spec and just move one chapter further down from your point you find description for the content property . It says that its value can be an uri and that

The value is a URI that designates an external resource (such as an image)...

I will give it another try some time.

Thanks so far.

Paul Curren Atlassian Team Jun 21, 2012

Hi Steffen.

Flying Saucer is the library used "behind the scenes" for PDF export so you can often find useful hints and discussions on their various mailing lists and forums.

I had a look at the part of the CSS 2.1 spec you referenced but I still didn't see it specify that 'url' was a valid value for the content property.

However, I'm no CSS expert so I apologise if I'm wrong here.

Cheers.

0 votes
d Dec 10, 2012

The fancy selectors (like nth child and such) are not part of CSS 2.1. Here is a link to the specifics on CSS 2.1 selectors:

http://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html

Steffen Heller Jan 20, 2013

@Felicity

(...)However, I cannot seem to get it to work in my Confluence 4.3 setup.(...)

Hi Felicity,

I just tried it with confluence 4.3.2 and it is not working. I think the problem is the div macro. When I do as described above I get an html code that is different because it inserts an additional <p> tag:

&lt;div class="runningheader"&gt;&lt;p&gt;text_that_will_be_shown_in_the_PDF's_header&lt;/p&gt;&lt;/div&gt;

When I originally posted I was using an earlier version of confluence and I am pretty sure this was not the case back then.

I wasn't aware of this change and the problem it causes because in my own setting I actually don't use the div macro myself but a selfdefined user macro which is a little different and with which everything is still working fine. The decisive difference is that in my html code I still get:

&lt;span class="runningheader"&gt;text_that_will_be_shown_in_the_PDF's_header&lt;/span&gt;

If you get something like this on your page it should still work. But it seems the div macro doesn't do it (anymore).

Felicity Chapman Jan 20, 2013

Thanks for the quick reply. Yes, you're right if you enter the wiki markup then you get an extra <p> tag. Got it working in the end by using the macro dialog to add the DIV macro. It also seems as if the DIV needs to be first item on the page. It's a huge step in the right direction. Thank you.

It would be so much easier if the PDF export supported 'string-set' but I can't seem to get this to work. It also seems as if the syntax "content: element(runningheader, first-except);" isn't supported, so I've ended up having to put every topic on a new page (so that the TOC page numbers don't get out of step).

Steffen Heller Jan 21, 2013

@Felicity:

Somewhere above I tried to sum things up and I think string-set falls under CSS that is above 2.1 and therefore not working.

0 votes
Steffen Heller Aug 08, 2018

Big QUESTION:

Anyone having any experience with iText and iText pdfhtml ?

To my understanding iText is the library that is used by Flying Saucer which again is the library used for the Confluence PDF export.

The current version of iText is 7.x and comes with extensions for HTML to PDF conversion whereas the version used in my Confluence exports seems to be iText 2.0.8 (that is what it says when I open an exported PDF file and have a look at Files > Properties > Description > PDF Producer).

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

2,380 views 11 28
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