Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Readers > Kobo Reader

Notices

Reply
 
Thread Tools Search this Thread
Old 05-16-2017, 09:33 AM   #1
Sam Sahara
Member
Sam Sahara began at the beginning.
 
Posts: 23
Karma: 10
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.
Sam Sahara is offline   Reply With Quote
Advert
Old 05-16-2017, 09:36 PM   #2
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 3,354
Karma: 12192327
Join Date: Nov 2012
Location: Beneath the Long White Cloud
Device: Kobo Glo
Quote:
Originally Posted by Sam Sahara View Post
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.)

Last edited by GeoffR; 05-16-2017 at 09:45 PM. Reason: image width 33.3% of screen width...
GeoffR is offline   Reply With Quote
Old 05-19-2017, 09:13 PM   #3
rashkae
Fanatic
rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.rashkae ought to be getting tired of karma fortunes by now.
 
rashkae's Avatar
 
Posts: 553
Karma: 3126333
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.
rashkae is offline   Reply With Quote
Reply

Tags
html, kepub, table

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 05:15 PM.


MobileRead.com is a privately owned, operated and funded community.