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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 10-07-2014, 05:03 AM   #1
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,280
Karma: 3868800
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
Centering images in iPad mini/iBooks/iOS8

I rarely use iBooks except for checking ebooks I've designed, so this problem may be old news to some people.

The latest ebook I uploaded uses the following XHTML and CSS to centre images:

<div class="centre">
<img src="images/valid.png"
width="25%" alt="valid html, css, and epub" />
</div>


.centre { text-indent: 0; text-align: center; }

It has worked perfectly well to centre images on an iPad2 in the past, and worked perfectly well tonight on my Sony PRS T3, a Kobo Touch, iPad mini with Marvin, Nexus 7 with Mantano, and upgraded Kindle Keyboard. But on an iPad mini the images are flush with the left margin - not centred at all.

Has anyone else seen this problem? Is it a problem with an iPad mini? Or iOS8 and the latest version of iBooks? I can't believe it's because of my markup and CSS since they worked in the past and work on other ebook readers.

Perhaps more importantly: is there a way to centre images with this combination (iPad mini, latest iBooks, and iOS8) that will also work on other ebook readers?

I should mention perhaps that an image which is floated right and has text wrapped around it still works on the iPad mini. And the CSS still centres text material on an iPad mini.

If you need to check the markup and the CSS the book is Right at Last and Other Tales by Elizabeth Gaskell.

Last edited by AlexBell; 10-07-2014 at 05:06 AM. Reason: Added ps
AlexBell is offline   Reply With Quote
Old 10-07-2014, 07:58 AM   #2
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 1,444
Karma: 846401
Join Date: Jan 2009
Device: KoboGlo
mistake

Last edited by roger64; 10-07-2014 at 07:59 AM. Reason: mistake
roger64 is offline   Reply With Quote
Old 10-07-2014, 09:15 AM   #3
odedta
Addict
odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.odedta will give the Devil his due.
 
Posts: 254
Karma: 77776
Join Date: Dec 2013
Device: iPad
Google search for centering a div
odedta is offline   Reply With Quote
Old 10-07-2014, 10:10 AM   #4
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 461
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Images are not the same as text. It's possible that ereaders will display images centered using the text-align property but it’s not a good idea. Instead, you should specify that the image is a block element. Then you can center it as you would a block:

Code:
img.centered {
      display: block;
      margin-left: auto;
      margin-right: auto;
}
and

Code:
<div class="centre">
       <img class="centered" alt="valid html, css, and epub" src="../Images/valid.png" width="25%" />
</div>
I think that should work on iBooks

Regards
Rubén
RbnJrg is offline   Reply With Quote
Old 10-07-2014, 11:03 AM   #5
adv_dp_fan
Connoisseur
adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!
 
Posts: 96
Karma: 57138
Join Date: May 2010
Device: Sony 505, iPad 1 & 3, Galaxy Note 8.1
I think this is a bug in the new iOS 8.0.2 release of iBooks. I'm having other cover related issues with iBooks now and nothing, not even the above css seems to work. At this point I'm just waiting on 8.1 to hit and see if that fixes it.

<rant>
This is one problem with how Apple decided to make iBooks a part of iOS, you now have to wait on an update of the whole system just to get bugs fixed in one app. And you can't remove apps you don't need. Apple is becoming as bad as the phone providers when it comes to bloatware.
</rant>
adv_dp_fan is offline   Reply With Quote
Old 10-07-2014, 11:15 AM   #6
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,006
Karma: 3594657
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Quote:
Originally Posted by RbnJrg View Post
Images are not the same as text. It's possible that ereaders will display images centered using the text-align property but it’s not a good idea. Instead, you should specify that the image is a block element. Then you can center it as you would a block:

Code:
img.centered {
      display: block;
      margin-left: auto;
      margin-right: auto;
}
and

Code:
<div class="centre">
       <img class="centered" alt="valid html, css, and epub" src="../Images/valid.png" width="25%" />
</div>
I think that should work on iBooks

Regards
Rubén
This would not work on the majority of the readers out there. The auto value is converted to 0 for margins on those. That is not even a mistake, the specs allow that.

In iBooks it could work.

Last edited by Toxaris; 10-07-2014 at 11:27 AM.
Toxaris is offline   Reply With Quote
Old 10-07-2014, 11:24 AM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,194
Karma: 4800739
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by RbnJrg View Post
Images are not the same as text. It's possible that ereaders will display images centered using the text-align property but it’s not a good idea.
They should be the same if they are inline elements. And note that the text-align property is applied to the container, not to the <img>. This should work in a compliant renderer (in the absence of other rules).
Jellby is offline   Reply With Quote
Old 10-07-2014, 05:41 PM   #8
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 461
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Jellby View Post
...And note that the text-align property is applied to the container, not to the <img>...
Yes, of course. For that reason I added the class "centered" to the image tag. The div tag retains the class "center" (Alex's original) so the epub will continue working on the ereaders where already works and by adding the class "centered" to the <img> tag now it should also work in iBooks. At least, that is the idea
RbnJrg is offline   Reply With Quote
Old 10-07-2014, 05:43 PM   #9
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 461
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Toxaris View Post
This would not work on the majority of the readers out there. The auto value is converted to 0 for margins on those. That is not even a mistake, the specs allow that.

In iBooks it could work.
Yes, you are right. For that reason I retained the Alex's class "center". Read my previous post.
RbnJrg is offline   Reply With Quote
Old 10-07-2014, 06:00 PM   #10
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,280
Karma: 3868800
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
Thanks for all the suggestions.

Is there anyone around who uses an iPad and iBooks and can tell me whether they've had the same or similar problems? The exact same markup and stylesheet that I've quoted worked on an iPad some time ago, and I'd really like to know what has made the difference.
AlexBell is offline   Reply With Quote
Old 10-19-2014, 08:20 PM   #11
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,280
Karma: 3868800
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
This is late, I know, but I realised that the problem might be that the markup in my first post does not set the img to display: inline.

I added this to the CSS file

div.centre img { display: inline; }

and the images are centered in iBooks as well as all the other readers.

I'm afraid I don't know enough about CSS to know whether iBooks is being too strict in requiring that the image display: inline, or whether ADE and Marvin is being too lax in not requiring this. Any comments?
AlexBell is offline   Reply With Quote
Old 10-20-2014, 02:40 AM   #12
mikelv
Developer of EPUBReader
mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.mikelv once ate a cherry pie in a record 7 seconds.
 
Posts: 262
Karma: 1922
Join Date: Oct 2009
Device: none
Quote:
Originally Posted by AlexBell View Post
This is late, I know, but I realised that the problem might be that the markup in my first post does not set the img to display: inline.

I added this to the CSS file

div.centre img { display: inline; }

and the images are centered in iBooks as well as all the other readers.

I'm afraid I don't know enough about CSS to know whether iBooks is being too strict in requiring that the image display: inline, or whether ADE and Marvin is being too lax in not requiring this. Any comments?
"display:inline" shouldn't be necessary, because the img element is per definition an inline element. So in my opinion this is a bug in the iOS renderer.
mikelv is offline   Reply With Quote
Old 10-20-2014, 06:07 AM   #13
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,280
Karma: 3868800
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
Quote:
Originally Posted by mikelv View Post
"display:inline" shouldn't be necessary, because the img element is per definition an inline element. So in my opinion this is a bug in the iOS renderer.
Thanks.

I'm not too surprised: I can remember the days when one had to scatter unnecessary <span></span>s around to get ePubs to work properly in iBooks.
AlexBell is offline   Reply With Quote
Old 10-20-2014, 05:28 PM   #14
adv_dp_fan
Connoisseur
adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!adv_dp_fan will blow your mind, man!
 
Posts: 96
Karma: 57138
Join Date: May 2010
Device: Sony 505, iPad 1 & 3, Galaxy Note 8.1
Just updated my my iPad mini to iOS 8.1 and it fixed the issues I was having with iBooks. Might check yours again.
adv_dp_fan is offline   Reply With Quote
Old 10-20-2014, 06:09 PM   #15
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,280
Karma: 3868800
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
Quote:
Originally Posted by adv_dp_fan View Post
Just updated my my iPad mini to iOS 8.1 and it fixed the issues I was having with iBooks. Might check yours again.
Thanks, I'll give that a try. At least my solution won't do any harm even if it is unnecessary. And perhaps it will prevent problems with the next iOS update.
AlexBell is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Calibre cannot detect ipad air with ios8 mapline Marvin 9 09-26-2014 11:37 AM
No superscript on iPad since iOS8 buecherhans Apple Devices 5 09-22-2014 02:31 AM
Centering images perkin5 Conversion 8 09-19-2014 10:40 AM
Irregular images on an iPad/iBooks AlexBell ePub 12 04-02-2013 08:35 AM
Centering SVG graphics in iBooks? FunkeXMix ePub 8 01-04-2013 09:21 PM


All times are GMT -4. The time now is 02:53 PM.


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