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

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

4 answers

1 accepted

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.

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.

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

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.

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.

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.

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.

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

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

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

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

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Tuesday in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

375 views 16 9
Join discussion

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you