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

[Steffen Heller]

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

[Steffen Heller · Accepted solution]

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]

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.

[Paul Curren]

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]

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]

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.

[MS]

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

[Steffen Heller]

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]

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]

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]

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]

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]

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]

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?

[Chris Amos]

I see they are, just 5K!

https://marketplace.atlassian.com/apps/247/content-formatting-for-confluence?hosting=server&tab=pricing

[Steffen Heller]

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

[DavidH]

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]

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

<div class="runningheader"><p>text_that_will_be_shown_in_the_PDF's_header</p></div>

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:

<span class="runningheader">text_that_will_be_shown_in_the_PDF's_header</span>

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]

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]

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