Images are note centered on PDF Export

This question is in reference to Atlassian Documentation: Customise Exports to PDF

We just migrated to Confluence 5.8.16. Unfortunately, we experience issues with the PDF export. We have some pages where images are centered and are displayed as centered, correctly. If we export them to PDF, images will be re-aligned to the left. Does someone know, if we can rewrite this behaviour ?

See also: https://jira.atlassian.com/browse/CONF-38632

3 answers

We just found a pretty and smart solution for pictures that are either not centered or aligned to the right!


Append the following code to your PDF stylesheet:

span.confluence-embedded-file-wrapper {   
    display: inline-block !important;  
}


If not just images are affected, but other spans, you can embed the following:

p[style="text-align: center;"] span,  
p[style="text-align: right;"] span  
 {   
    display: inline-block !important;  
}


Issue Description


The actual issue is about the <span> tag that wraps the image. After centering an image with the editor, you have a construct like

&lt;p style="text-align: center;"&gt;&lt;span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"&gt;&lt;img class="confluence-embedded-image" src="/xsystem/download/attachments/344041801/Koala.jpg?version=1&amp;amp;modificationDate=1448543356520&amp;amp;api=v2" data-image-src="/xsystem/download/attachments/344041801/Koala.jpg?version=1&amp;amp;modificationDate=1448543356520&amp;amp;api=v2" data-unresolved-comment-count="0" data-linked-resource-id="382009443" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Koala.jpg" data-base-url="https;//*/xsystem" data-linked-resource-content-type="image/jpeg" data-linked-resource-container-id="344041801" data-linked-resource-container-version="15" height="250"&gt;&lt;/span&gt;&lt;/p&gt;


The style 'text-align:center' will not be applied to the <img> tag due to the span tag which has this missing property: "display:inline-block;"


@Atlassian: Please provide this fix in an upcoming version!

That is complicated.

Centering elements can be achieved with numerous methods. Search for "css image center" to see how many hints and tricks exist.

If your images are centered in the wiki page but not in the PDF you would have to examine

  • with what HTML and CSS code the images are centered in the wiki page
  • what Confluence CSS code is defined as standard behaviour for images in the PDF export

In the end you have to define your own customized CSS that

  • will work together with the HTML of the wiki page
  • overwrite the standard CSS code

To answer your question: Yes, you can rewrite this behaviour but it can take a while.

Hi @Jens Kasperek (Bosch GmbH),

I used Content Exporter addon (available in Cloud too) to export a test page and the alignment seems to be correct in PDF (see the attached picture)

BR: Attila

 

2016-02-06_10h31_31.png

 

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 24, 2018 in Confluence

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,526 views 25 14
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