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
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Friday in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

264 views 11 10
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