image display

WebLim · 05-03-2026, 05:02 PM

Hello,
I created an e-book in EPUB format using Calibre from a .docx file.
I've noticed that the images aren't displaying properly. They're not centered, are incomplete, or are even oriented incorrectly!
How can I fix this issue, which is happening on my Kobo Clara e-reader?
Here are some examples.
Thanks for your help.
Philippe

DNSB · 05-03-2026, 05:56 PM

Basically, your CSS is not correct likely to not using the correct styles in whatever program was used to create the .docx original. I would suggest opening the ePub in an ePub editor such as Sigil or calibre's ebook-editor and fixing it up.

If you would like to post your ePub as an attachment to a message here, you'll probably get more help and contradictory opinions than you could shake a stick at (the contradictory opinions because there are multiple ways to do many tasks and we all seem to get attached to our preferred methods).

I'm also going ask if some nice administrator could move this discussion to the ePub forum where it will be more at home.

WebLim · 05-04-2026, 07:07 AM

Thanks for your reply,
I've attached the ePub file.
Note that this issue appears on my Kobo Clara e-reader, but the display is correct in the Calibre viewer! (see image) Mysterious...

Quoth · 05-04-2026, 09:14 AM

Use a centred text paragraph style (not a direct format) and put the image in that in source. Also check image anchor is character and also image style.

I only edit in odt and save an extra docx for Calibre, which is never opened in an editor.

Make sure all document and editor defaults are pt. Then 12 pt = 1em. Body text thus 12 pt. Only inches/cm/mm for PDFs.

The only post conversion editing (for larger images) in Calibre may be to replace width & and height values in the CSS. By default It may be pt (you can then use % for one axis and auto for the other). Note a CSS / HTML px is not always pixels. The % is safest for larger images. Only fullscreen needs an SVG wrapper.

Quoth · 05-04-2026, 09:27 AM

The Calibre viewer is only 100% good to check TOC and all links as it's really a web browser made to work like epub renderer. An eink epub reader (not KOReader) is a better test. Also check on a small phone using Lithium, Pocketbook etc apps.

Sane simpler epubs are converted fine by Amazon, though the shortly to be extinct azw3/KF8 is more similar than KFX.

We ceased testing mobi/KF7 conversion last year when Amazon ended Broweser based downloads for USB transfer as K3 and all later gen Kindles do KF8. Now we won't check Amazon conversions at all.

WebLim · 05-04-2026, 11:33 AM

OK, thanks. I'll look into it and let you know.
Have a nice day

WebLim · 05-04-2026, 11:54 AM

I'm getting better results with your advice.
The only remaining issue is that images in portrait orientation in Word are displayed in landscape orientation and therefore appear cropped.
What should I do?

DNSB · 05-04-2026, 09:22 PM

For what it may be worth, I took a quick look at the epub, used svg wrappers for the full page images, corrected the chapter subheaders, etc.

I've attached a copy to this message. This is not what I would consider a clean final result, it was the result of killing 10 minutes so epubcheck did not spray multiple error messages.

WebLim · 05-05-2026, 09:58 AM

Thanks—the images do indeed display correctly on my Kobo Clara.
How do I modify the SVG tag to display the images vertically?

WebLim · 05-05-2026, 10:22 AM

Quote:

Originally Posted by WebLim

Thanks—the images do indeed display correctly on my Kobo Clara.
How do I modify the SVG tag to display the images vertically?

I used
transform="rotate(90 100 100)"
but the image isn't centered

DNSB · 05-05-2026, 01:50 PM

When I want to rotate an image by 90 degrees in an ePub2, I just add transform="rotate(90deg)" to the svg element which rotates the image 90 degrees around it's centre point.

Code:

<svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet"  viewBox="0 0 1388 981"><image height="981" width="1388" xlink:href="../Images/UIDAS_(UIdas.png" transform="rotate(90deg)" /></svg>

It may just be easier to rotate the images in a image editor, crop any excess white space and then re-inject the images into the ePub file.

Edit: I've edited the images to reduce white space and rotate 90°. The resulting ePub is attached.

WebLim · 05-08-2026, 11:28 AM

manythanks

DNSB · 05-08-2026, 06:18 PM

I should explain that I prefer rotating the images externally since I've found issues in the past with various ePub2 and ePub3 renderers when using transform to rotate images. KISS principle in action.

05-03-2026, 05:02 PM	#1
WebLim Junior Member Posts: 8 Karma: 10 Join Date: May 2026 Device: kobo clara	image display Hello, I created an e-book in EPUB format using Calibre from a .docx file. I've noticed that the images aren't displaying properly. They're not centered, are incomplete, or are even oriented incorrectly! How can I fix this issue, which is happening on my Kobo Clara e-reader? Here are some examples. Thanks for your help. Philippe Attached Thumbnails

05-04-2026, 09:14 AM	#4
Quoth Still reading Posts: 15,471 Karma: 114319649 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper	Use a centred text paragraph style (not a direct format) and put the image in that in source. Also check image anchor is character and also image style. I only edit in odt and save an extra docx for Calibre, which is never opened in an editor. Make sure all document and editor defaults are pt. Then 12 pt = 1em. Body text thus 12 pt. Only inches/cm/mm for PDFs. The only post conversion editing (for larger images) in Calibre may be to replace width & and height values in the CSS. By default It may be pt (you can then use % for one axis and auto for the other). Note a CSS / HTML px is not always pixels. The % is safest for larger images. Only fullscreen needs an SVG wrapper. Last edited by Quoth; 05-04-2026 at 09:21 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Image Display Size Help	AlwaysNew	ePub	19	07-21-2020 09:35 PM
About image display in viewer	roger64	Editor	2	08-05-2017 07:03 AM
image caption display	xmlgirl	ePub	1	05-21-2015 10:24 PM
Display of a png image linked to a svg image	roger64	Editor	6	03-13-2015 06:21 AM
Cover Image Display	JoeD	OpenInkpot	9	05-05-2009 12:42 AM

05-03-2026, 05:56 PM	#2
DNSB Bibliophagist Posts: 51,944 Karma: 180003020 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	Basically, your CSS is not correct likely to not using the correct styles in whatever program was used to create the .docx original. I would suggest opening the ePub in an ePub editor such as Sigil or calibre's ebook-editor and fixing it up. If you would like to post your ePub as an attachment to a message here, you'll probably get more help and contradictory opinions than you could shake a stick at (the contradictory opinions because there are multiple ways to do many tasks and we all seem to get attached to our preferred methods). I'm also going ask if some nice administrator could move this discussion to the ePub forum where it will be more at home.

05-04-2026, 09:27 AM	#5
Quoth Still reading Posts: 15,471 Karma: 114319649 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper	The Calibre viewer is only 100% good to check TOC and all links as it's really a web browser made to work like epub renderer. An eink epub reader (not KOReader) is a better test. Also check on a small phone using Lithium, Pocketbook etc apps. Sane simpler epubs are converted fine by Amazon, though the shortly to be extinct azw3/KF8 is more similar than KFX. We ceased testing mobi/KF7 conversion last year when Amazon ended Broweser based downloads for USB transfer as K3 and all later gen Kindles do KF8. Now we won't check Amazon conversions at all.

05-04-2026, 11:33 AM	#6
WebLim Junior Member Posts: 8 Karma: 10 Join Date: May 2026 Device: kobo clara	OK, thanks. I'll look into it and let you know. Have a nice day

05-04-2026, 11:54 AM	#7
WebLim Junior Member Posts: 8 Karma: 10 Join Date: May 2026 Device: kobo clara	I'm getting better results with your advice. The only remaining issue is that images in portrait orientation in Word are displayed in landscape orientation and therefore appear cropped. What should I do?

05-05-2026, 09:58 AM	#9
WebLim Junior Member Posts: 8 Karma: 10 Join Date: May 2026 Device: kobo clara	Thanks—the images do indeed display correctly on my Kobo Clara. How do I modify the SVG tag to display the images vertically?

05-08-2026, 11:28 AM	#12
WebLim Junior Member Posts: 8 Karma: 10 Join Date: May 2026 Device: kobo clara	manythanks

05-08-2026, 06:18 PM	#13
DNSB Bibliophagist Posts: 51,944 Karma: 180003020 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	I should explain that I prefer rotating the images externally since I've found issues in the past with various ePub2 and ePub3 renderers when using transform to rotate images. KISS principle in action.