PDF Export: Confluence does not support CSS 3, only 2.1

If you are having trouble with PDF export, these are some important things I learned.

1) PROBLEM: Confluence does NOT support CSS 3, only 2.1. CSS 3 has been around since 1999, and it is the version of CSS that introduced support for controlled output to print media (PDF/print/etc.). So, CSS 2.1 really doesn't support output to PDF at all, which explains why we have so many issues. This is why PDF and other output formats are so buggy and/or impossible with respect to formatting oddities and things you'd like to do but can't seem to get to work.

From Atlassian tech support: "The Confluence CSS export follows W3C CSS 2.1 rules, so to check CSS compatibility using the validator, you would need to choose 'CSS level 2.1' in the 'Profile' under 'More Options'." (Refer to the W3C CSS Validator: https://jigsaw.w3.org/css-validator/#validate_by_input+with_options)

2) TROUBLESHOOTING: See the above link to validate your custom CSS  for compliance with CSS 2.1. This will save you time/money/frustration trying to implement modern CSS code that is not supported by CSS 2.1. (Don't forget to choose "CSS level 2.1"!)

Also, search for "CSS Print output support" for online help designing CSS for print output, keeping in mind that you need to validate your code to CSS 2.1.

3) RESOLUTION: There is a Confluence issue created regarding the need for supporting CSS 3. If this affects you, please go here (https://jira.atlassian.com/browse/CONFSERVER-58982) and vote for this issue, add a comment, and "watch" this issue to help generate enough interest in it that Atlassian will implement this.

I hope this saves you time/money and frustration!

2 comments

Herve Frydlender
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 14, 2019

Hi,

I did the test and the funny part is one setting I'm using to get proper table formatting:

...
table
{
table-layout: auto !important;
width: auto !important;
word-wrap: normal;
}
...

I get "Property word-wrap doesn't exist in CSS level 2.1 but exists in [css3] : normal".

But it is THE statement that makes tables look good in PDF. It seems some CSS3 is already implemented :)

Like Laura Schneider likes this
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 14, 2019

Hi Laura,

many, many years ago I also tried to find out which CSS can be used in confluence and which can't.

If interested have a look at:

https://community.atlassian.com/t5/Confluence-questions/PDF-Export-Which-CSS-properties-do-work-and-which-ones-not/qaq-p/99072#M16610

I think, the best summary is this post:

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.

Like # people like this

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events