3

I am using Apple Pages to create an eBook (I know I should have used InDesign, I will use it for the next one!). All the text is there, I have used headings and I am very pleased with the result. However... When I export it to ePub, the images are not centered. They are centered when using PDF. Have a look at my image settings in Pages in the following screenshot:

My image settings in Pages

The image (this is one example, but all +150 images are shown this way) is aligned in the center using the "Align" function you can see at the right, but when I select "Center", it does not move (because it is in the center already) and it switches back to Align. I am not sure whether this is good or bad.

Preview of the eBook using Apple iBooks on Mac

As you can see, the image is aligned to the right when I export the book to ePub and open it with Mac iBooks. It looks exactly the same on my iPad / iPhone. The image is cutoff as well: look at the difference between the images shown in the screenshots I added in this post.

How can I get the ePub images to be centered?

  • Do all images in ePub have the same distance from the margin (i.e. independent of their width)? If so you might have a CSS problem that generates too much margin. Have you looked the HTML that was generated c.q. can you update your post with a relevant part of the HTML extracted from your ePub? – Anthon Aug 6 '16 at 11:44
  • En niet te vergeten: welkom bij ebook.stackexchange. – Anthon Aug 6 '16 at 11:44
  • Hi Anthon, thanks! :-) The code (this is the image I used in the screenshots!) <p class="s5">Niet iedere hostingprovider heeft Installatron geïnstalleerd. Meer informatie over</p><p class="s5" style="text-align:left;text-indent:0;"><span style="display:inline-block;margin-bottom:2.5079%;margin-left:16.5528%;margin-right:0.0000%;margin-top:2.5079%;text-indent:0px;vertical-align:baseline;width:26.957em;"><img src="images/164.jpg" alt="164.jpg" style="width:26.957em;"/></span></p> – Jelle Aug 6 '16 at 12:18
  • Better to "improve" your post by editing in extra information there, among other things you cannot format text in a comment, nor can thing be corrected there by others (e.g. typos). – Anthon Aug 6 '16 at 12:32
1

The right alignment results from the margin-left:16.5528% in the span surrounding the image. I am not sure if you can change that in Apple Pages. I would experiment with Position (at the bottom of your screen) essentially there should be no position in cm associated to something centered, as you cannot know (in an ePub) the width of the page up-front.

If you cannot switch that off, you can resort to cleaning the epub with a script, this seems easy enough to find (e.g. using CSS locater span > img and changing the style on the parent of that img)

  • Thanks for the information! I don't think I can change the CSS in Apple Pages and I don't really get the problem, since I have selected "center" as the alignment. Is it okay to edit the document by manually changing the CSS code? In other words: will it work on all devices, or is it considered "not done"? – Jelle Aug 7 '16 at 22:30
  • Sure you can edit the CSS code, this is just wrongly generated code that needs fixing. Problem is that you have to do 150 image entries in multiple files, so I would not want to do that by hand. – Anthon Aug 7 '16 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.