Centering an image in kobo epub

Sam Sahara · 05-16-2017, 09:33 AM

If I want to make a page with an image horizontally centered at 20% from the top, in an epub I draw a table like this:

Code:

<body>
<table border="0" width="100%" height="555em">
  <tr height="20%">
    <td width="33.3%"> </td>
    <td width="33.3%"> </td>
    <td width="33.3%"> </td>
  </tr>
  
  <tr height="30%">
    <td> </td>
    <td align="center" vertical-align="middle">
      <img src="../images/animage.jpg" width=100%/>
    </td>
    <td> </td>
  </tr>
  
  <tr height="50%">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>

It works very well.

But the same thing doesn't work into a kepub, the image is showed at full screen as if the table didn't exist.

In ADE the image is not showed at all.

QUESTION:

How can I make a page with an image horizontally centered at 20% from the top, into a kepub and that shows correctly in ADE too?

GeoffR · 05-16-2017, 09:36 PM

Quote:

Originally Posted by Sam Sahara

Code:

      <img src="../images/animage.jpg" width=100%/>

<img> must have an alt attribute, and the width parameter must have quotes:

Code:

<img src="../images/animage.jpg" width="100%" alt="image"/>

ADE and RMSDK-based readers such as Kobo's ePub reader are very fussy about syntax errors like this, it is a good idea to always test your book with Epubcheck after making changes.

The KePub reader automatically makes an image full-screen if it meets certain criteria. I'm not sure exactly what the criteria are, but roughly: if the html file is the first one displayed in the book, or contains nothing but an image, then it is usually displayed full-screen. You should be able to avoid that by including some visible text in the same file as the image, such as a caption.

Quote:

How can I make a page with an image horizontally centered at 20% from the top, into a kepub and that shows correctly in ADE too?

This should work for ePubs: (image width 33.3% of screen width, horizontally centred, aligned vertically 20% from top of screen):

Code:

<body>
 <div style="text-align:center;padding-top:20%">
  <img src="../images/animage.jpg" alt="image" style="width:33.3%;max-height:80%;"/>
 </div>
</body>

but for KePub I think you will need to make sure there is text or something else visible in the file besides the image, and that it is not the first page of the book. (I haven't done much with KePubs, so someone else might know better.)

rashkae · 05-19-2017, 09:13 PM

Any image with no text will get treated as a picture, stretched (or shrunk) to fit the page. The titlepage gets complete full screen, (that might be because it's the first page,, I've not tested what condition defines cover, other than all my book shave a cover image, and it just works.). Other pictures will be fit in the frame with the header, footer and margins.

05-16-2017, 09:33 AM	#1
Sam Sahara Connoisseur Posts: 79 Karma: 228 Join Date: Aug 2014 Device: lambda k21	Centering an image in kobo epub If I want to make a page with an image horizontally centered at 20% from the top, in an epub I draw a table like this: Code: <body> <table border="0" width="100%" height="555em"> <tr height="20%"> <td width="33.3%"> </td> <td width="33.3%"> </td> <td width="33.3%"> </td> </tr> <tr height="30%"> <td> </td> <td align="center" vertical-align="middle"> <img src="../images/animage.jpg" width=100%/> </td> <td> </td> </tr> <tr height="50%"> <td> </td> <td> </td> <td> </td> </tr> </table> </body> It works very well. But the same thing doesn't work into a kepub, the image is showed at full screen as if the table didn't exist. In ADE the image is not showed at all. QUESTION: How can I make a page with an image horizontally centered at 20% from the top, into a kepub and that shows correctly in ADE too? Last edited by Sam Sahara; 05-16-2017 at 12:35 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Universal Solution for Centering Text Under Image	Trane	Sigil	45	05-16-2017 07:05 AM
Conversion limitation: Centering image [docx to mobi]	zonoiko	Calibre	1	09-25-2013 12:40 AM
table centering in ePub	liinak	ePub	1	05-24-2013 05:41 PM
Touch Best image size in epub format for Kobo touch	zztush	Kobo Reader	2	04-28-2013 09:32 AM
how come my kobo epub won't show a cover image?	mayamo	Kobo Reader	4	11-15-2011 04:31 PM

05-19-2017, 09:13 PM	#3
rashkae Wizard Posts: 1,141 Karma: 5061953 Join Date: Jun 2011 Location: Ontario, Canada Device: Kobo Aura HD	Any image with no text will get treated as a picture, stretched (or shrunk) to fit the page. The titlepage gets complete full screen, (that might be because it's the first page,, I've not tested what condition defines cover, other than all my book shave a cover image, and it just works.). Other pictures will be fit in the frame with the header, footer and margins.

Advert