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 09-10-2016, 06:25 PM   #1
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 168
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
@#*&^% coding for Apple images

I am looking to update my knowledge as I am now working on an update to a book I put out two years ago that has a lot of images of different sizes...

In Apple's Asset Guide they provide the following guidelines for image handling:

HTML:
Code:
<div class="image-container">
<img src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>
CSS:
Code:
img {height: 100%;}
.image-container {height: 100vh;}
However, that code assumes all images are vertical. When I created a container class for a horizontal image—

Code:
.image-container2 {width: 100%;}
—and put in a landscape image, the height:100% of the img class countermanded the container code and I ended up with the landscape image ballooned up to 100% of the height of the screen and cropped.

The only way to have both landscape and portrait images in an Apple book, then, was to delete the img class in the CSS and create two different classes that could be applied to the img tag—

Code:
.vertical {height:100%;}
.horizon {width:100%;}
—and add that to the code so that vertical images were placed in a vertical container and horizontal images were placed in a horizontal container:

Code:
<div class="image-container">
<img class="vertical" src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

<div class="image-container2">
<img class="horizon" src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>
Doing it this way also meant that if I wanted an image smaller than 100% of the screen, I had to create an image class for every size. It was a freakin' nightmare.

So what does everyone do now?
eggheadbooks1 is offline   Reply With Quote
Old 09-12-2016, 07:21 AM   #2
mmat1
Berti
mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.
 
mmat1's Avatar
 
Posts: 1,153
Karma: 3842736
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
Hi,

I don't see a reason to define the Size twice, so "image-container" in my books has only "text-align: center;", nothing else.

And, as far as I know, you'll have to define a different class for every size needed, which goes to the <img>-tag

Quote:
Originally Posted by eggheadbooks1 View Post
I am looking to update my knowledge as I am now working on an update to a book I put out two years ago that has a lot of images of different sizes...

In Apple's Asset Guide they provide the following guidelines for image handling:

HTML:
Code:
<div class="image-container">
<img src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>
CSS:
Code:
img {height: 100%;}
.image-container {height: 100vh;}
However, that code assumes all images are vertical. When I created a container class for a horizontal image—

Code:
.image-container2 {width: 100%;}
—and put in a landscape image, the height:100% of the img class countermanded the container code and I ended up with the landscape image ballooned up to 100% of the height of the screen and cropped.

The only way to have both landscape and portrait images in an Apple book, then, was to delete the img class in the CSS and create two different classes that could be applied to the img tag—

Code:
.vertical {height:100%;}
.horizon {width:100%;}
—and add that to the code so that vertical images were placed in a vertical container and horizontal images were placed in a horizontal container:

Code:
<div class="image-container">
<img class="vertical" src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

<div class="image-container2">
<img class="horizon" src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>
Doing it this way also meant that if I wanted an image smaller than 100% of the screen, I had to create an image class for every size. It was a freakin' nightmare.

So what does everyone do now?
mmat1 is offline   Reply With Quote
 
Advertisement
Old 09-14-2016, 02:18 AM   #3
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 611
Karma: 1623024
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
For whole-screen content, I tend to use a separate HTML page and SVG. It is pretty much the only approach I'm aware of that will make things work robustly (almost) everywhere.

For smaller images, I'd normally expect them to be shown at actual size, rather than specifying size information, and I normally pick the image size to be something reasonable on an average device screen, and just let it be small on other devices. Whether that works or not for you depends on the layout.

But if you want to do something more complex than that, then yes, you'd pretty much have to have classes for each image size.

Last edited by dgatwood; 09-14-2016 at 02:22 AM.
dgatwood is offline   Reply With Quote
Old 09-14-2016, 04:08 AM   #4
fbrzvnrnd
Groupie
fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.fbrzvnrnd has not lost his or her sense of wonder.
 
Posts: 154
Karma: 86598
Join Date: Feb 2009
Device: iLiad
Actually I work on a % for portrait and a different % for landscape. I still use the trick to give the % to a div containing the img, and a 100% to the img. Latest iBooks application do not need this, but I still use the trick for retro-support.
I use external SVG except when I need to hyperlink some content inside the SVG, or when I want to interact svg elements with javascript.
fbrzvnrnd is offline   Reply With Quote
Old 09-14-2016, 12:19 PM   #5
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 168
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Quote:
Originally Posted by dgatwood View Post
...For smaller images, I'd normally expect them to be shown at actual size, rather than specifying size information, and I normally pick the image size to be something reasonable on an average device screen, and just let it be small on other devices. Whether that works or not for you depends on the layout.

But if you want to do something more complex than that, then yes, you'd pretty much have to have classes for each image size.
So what I'm hearing is that the way I did it was correct for my needs, and there is no easier way to do it. And that my thread headline is spot on.
eggheadbooks1 is offline   Reply With Quote
Reply

Tags
apple, images

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
EPub validates in Sigil but not in Apple Store & B&N ralphiedee Sigil 8 08-08-2012 05:06 PM
Apple Store Rejecting ePubs with chapter images... Adjust ePub 5 12-15-2011 08:57 AM


All times are GMT -4. The time now is 04:50 PM.


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