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

This widget could not be displayed.

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!

This widget could not be displayed.

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.

This widget could not be displayed.

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 Sep 17, 2018 in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

568 views 7 6
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