nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Column width and pdf export ?

BenoitP

When exporting as pdf pages containing tables, the output tables columns widths are automatically resized to (page width/nbr columns). Consequently, all the columns widths are equal in the pdf...!

This is preventing us from using the pdf export as the generated document is useless and content mostly unreadable.

Also, using section macro with columns macros is even worse (does not export columns properly).

Any solution?

Accepted answers

Steffen Heller

@boogaloob:

Just found out that all that we talked about only takes effect when the image is scaled down to less than 301px.

Try it: Change the image size to 300px and you have the "confluence-thumbnail" suffix and bad quality, change the image size to 301px and there is no "confluence-thumbnail" and the quality is good.

All comments

Steffen Heller

Hi,

I think it has to do with the table format.

With "table-layout:fixed" the columns have the same width, with "table-layout:auto" the column width is adjusted to the real space needed.

If you have access to the PDF export stylesheet you can change that. If you don't, you have to go with the preinstalled standard which might be "fixed" in your case.

Daniel Garcia12

You can customize your stylesheet of a space or global confluence. Check:

https://confluence.atlassian.com/display/DOC/Customising+Exports+to+PDF

https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS

You can use CSS styling properties table to adjust the output tables when export to PDF. Check properties you can apply:

http://www.w3schools.com/css/css_table.asp

Remember that Confluence not allow all properties of CSS3...

Steffen Heller

@Daniel:

Does hosted service allow customisations of the PDF export stylesheet?

BenoitP

Thanks. This works fine (On-demand version).

But now, I am running into troubles with the image quality on exported pdf. Playing with css did not help here. Any idea?

Steffen Heller

About image quality:

The problem is that you would need different image resolutions for 1) the confluence page in your browser and 2) the exported PDF.

In the browser the image is displayed with a resolution of 72 dpi. This is too little for good PDF quality.

If you increase the resolution for better quality in the PDF the browser will still display it with 72 dpi and so the image will simply appear much bigger.

To find a solution for this dilemma is difficult:

You can try to find a compromise by making the original image quite large, then decrease its display size in edit mode but define a different size for the PDF export.

Also, there is an "image-resolution" property that could be the real solution but I don't think this will work with confluence.

BenoitP

That's the problem! I have tried various CSS properties about image quality without any success. I have experienced unexpected behaviors: exported pdf image quality depends on the size you choose to be shown in confluence!?

I cannot find any information about it. What is the policy and strategy in confluence for image quality of exported pdfs? I have no clue about what size/resolution is used so far. Any clue?

This is a major problem for us as user has no way to predict the exported behavior quality when using an image within a confluence page.

Steffen Heller

@boogaloob:

Are you familiar with terms like image resolution, image size, dpi and do you know how they can be calculated and how they interact with print quality?

A page that seemed to explain it quite well was this one: http://www.photoshopessentials.com/essentials/image-quality/

A quick web search should give you lots of more information.

With confluence this has little to do.

BenoitP

Yes, but thanks for the reminder.

Sorry, the description of the 'issue' was incomplete: try to put an image (a screen shot 72 dpi) in a table (2 columns) and change the size of the image displayed in confluence. Export as pdf in each case and you will end up with different quality rendered on the pdf images. The image is the same. The only difference in each exportation is the size shown on confluence... but the table column is identical in each exported case so the size of the exported image... why is the image looking different? In this special case, confluence does not take the raw image to render the pdf but somehow takes the image parameters set in confluence page.

Am I missing something here? I still have no clue about the default setup chosen by the export routine for images in tables.

Steffen Heller

You are right.

When I take a big image and change the display size in confluence to something smaller it is exported as if it was really that small and the quality in the PDF is worse. I don't know why this is so.

I used to experiment a lot with image sizes and I think it wasn't like that in earlier versions.

Steffen Heller

I had a second look at the topic:

It is a pity. Image size and quality for both web and pdf is a tricky thing. But it is also one of the things that used to be better in the old 3.x version.

Back then I used images that were big enough for good PDF quality and then changed the width attribute in the old wiki markup like in !image.png|width=300px!. With this "trick" the image would appear small in confluence but the PDF export was not affected by that and would still use the big image.

I assumed that this would still work with the new visual pop up menu for image size and effects. But this is not the case. It is just like boogaloob mentioned. If you change image size with the new menu the image quality of the PDF goes down as well.

Steffen Heller

Hi boogaloob,

you can try the following:

use a large image, include it on your confluence page and make it smaller
open firebug
search for the image
change the <img class="..."> from "confluence-embedded-image confluence-thumbnail" to just "confluence-embedded-image"

With this the PDF export should still use the original large image and not the decreased thumbnail variant. Seems to work for me.

BenoitP

Very interesting... This is exactly the problem. Within the same page, I have images with and without this property (<img class="..."> from "confluence-embedded-image confluence-thumbnail" ). Each time the "confluence-thumbnail" is present, the rendering is wrong...obviously...

How did this happened? Inlcuding an image is always the same process!? How can we remove this property?

I guess, changing live the HTML code does not keep your changes forever, right?
This can not be a "real" solution even if it is a perfect workaround.

Thanks, with this, Atlassian should be able to fix it quickly.

Steffen Heller

What I can say is this. Changing the size of an image in Edit mode changes the underlying code.

This is the code for an image where the size was not changed:

&lt;img class="confluence-embedded-image" width="300"
data-mce-src="http://{domainname.com}/download/attachments/{id_number}/{imagename.png}?version=1&amp;modificationDate=1342768665990&amp;api=v2" 
data-linked-resource-container-id="{id_number}"
data-base-url="http://{domainname.com}" 
data-linked-resource-default-alias="{imagename.png}"
data-linked-resource-type="attachment"
data-linked-resource-id="{otherID}" 
data-image-src="/download/attachments/{id_number}/{imagename.png}?version=1&amp;modificationDate=1342768665990&amp;api=v2"
src="/download/attachments/{id_number}/{imagename.png}?version=1&amp;modificationDate=1342768665990&amp;api=v2" title="{titlecode}"&gt;

This is the code for an image where the size was changed:

&lt;img class="confluence-embedded-image confluence-thumbnail" width="300" 
data-mce-src="http://{domainname.com}/download/thumbnails/{id_number}/{imagename.png}?version=1&amp;modificationDate=1342768665990&amp;api=v2" 
data-linked-resource-container-id="{id_number}" 
data-base-url="http://{domainname.com}" 
data-linked-resource-default-alias="{imagename.png}" 
data-linked-resource-type="attachment" 
data-linked-resource-id="{otherID}" 
data-image-src="/download/attachments/{id_number}/{imagename.png}?version=1&amp;modificationDate=1342768665990&amp;api=v2" 
src="/download/thumbnails/{id_number}/{imagename.png}?version=1&amp;modificationDate=1342768665990&amp;api=v2" title="{titlecode}"&gt;

It is all the same except for two details:

img class="..." contains an extra "confluence-thumbnail"
src=..." changes from "/download/attachments/..." to "/download/thumbnails/..."

Perhaps this different image source (src) is what makes the difference? It shouldn't be too complicated to have a look at that and see if it our problem can be fixed with some change here. But...

Steffen Heller

@boogaloob:

Just found out that all that we talked about only takes effect when the image is scaled down to less than 301px.

Try it: Change the image size to 300px and you have the "confluence-thumbnail" suffix and bad quality, change the image size to 301px and there is no "confluence-thumbnail" and the quality is good.

BenoitP

I guess these issues are related:
CONF-22535
CONF-25974
CONF-19706
None of these issues have been assigned to an atlassian guy!!

BenoitP

I had figured out this before but this did not solve all my problems. Some images are rendered ok and some others are still not... maybe the remaining problems are coming from somewhere else now (maybe from the image quality itself....).