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 02-13-2015, 01:47 PM   #1
rosshalde
Zealot
rosshalde began at the beginning.
 
Posts: 142
Karma: 10
Join Date: Jun 2014
Device: nook
Please Help with Code

I am trying to create an epub picture book.
I am using Sigil.
Each picture is its own "section" in Sigil
I am having trouble with the image code.
Because of the dimension of the images, landscape layout, I have reoriented all the pics so they are sideways in an effort to allow folks with simple b/w e-readers to have as large an image as possible.

The problem is with this code.

<style type="text/css">
img { height:100%; width:auto%;}
</style>

I have tried many combos of 100% and auto for each configuration, as well as auto/auto, and 100%/100%, but can't quite get it to work. Essentially, I want to keep the correct ratios between the dimensions. By the time the pic reaches 100% in height it is too wide for the screen or it will squeeze the images making it look squat.
I want to code the image so that whichever dimension it fills first, width or height, the other dimension stops there as well so it keeps proportionality.

Any advice will be much appreciated.
rosshalde is offline   Reply With Quote
Old 02-13-2015, 02:32 PM   #2
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,512
Karma: 49773163
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Put the images in the SVG wrapper code also used for covers. That should do it.
Toxaris is offline   Reply With Quote
Old 02-14-2015, 11:01 AM   #3
Notjohn
Fanatic
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 574
Karma: 247002
Join Date: Dec 2012
Device: Kindle
I use width="100%" and let the height take care of itself. It works on the Sigil display, on all Kindle devices and apps, on the Nook, and on ADE. (In my experience, I hasten to add, in hopes of avoiding another debate. I am only saying what works for me.)

That said, my first impulse was to copy Sigil's cover html, but I see Toxaris has already suggested that. Here it is in any event:

<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1169" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1169" width="800" xlink:href="../Images/coverepub.jpg"/></svg>
</div>
Notjohn is offline   Reply With Quote
Old 02-14-2015, 04:34 PM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 40,975
Karma: 23358225
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by Notjohn View Post
I use width="100%" and let the height take care of itself. It works on the Sigil display, on all Kindle devices and apps, on the Nook, and on ADE. (In my experience, I hasten to add, in hopes of avoiding another debate. I am only saying what works for me.)

That said, my first impulse was to copy Sigil's cover html, but I see Toxaris has already suggested that. Here it is in any event:

<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1169" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1169" width="800" xlink:href="../Images/coverepub.jpg"/></svg>
</div>
If your image was viewed on one of those cheap tablets with 800x480 resolution, you would have a fail. The image would not fit properly on screen. So the best way to handle it would be to have the height be 100% and let the width be handled on it's own.
JSWolf is offline   Reply With Quote
Old 02-14-2015, 04:39 PM   #5
Notjohn
Fanatic
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 574
Karma: 247002
Join Date: Dec 2012
Device: Kindle
Specifically, what would one of those cheap tablets be named? (Cheaper than an $84 Fire?)
Notjohn is offline   Reply With Quote
Old 02-14-2015, 06:31 PM   #6
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 40,975
Karma: 23358225
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by Notjohn View Post
Specifically, what would one of those cheap tablets be named? (Cheaper than an $84 Fire?)
AllWinner A23 - $29.90



http://www.tabletpcfactory.com/p/and...h-dual-camera/
JSWolf is offline   Reply With Quote
Old 02-15-2015, 06:05 AM   #7
Notjohn
Fanatic
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 574
Karma: 247002
Join Date: Dec 2012
Device: Kindle
$44.90 with shipping, sigh!
Notjohn is offline   Reply With Quote
Old 02-15-2015, 08:17 AM   #8
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,512
Karma: 49773163
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Quote:
Originally Posted by JSWolf View Post
If your image was viewed on one of those cheap tablets with 800x480 resolution, you would have a fail. The image would not fit properly on screen. So the best way to handle it would be to have the height be 100% and let the width be handled on it's own.
Not a problem at all of course. You do need to adapt the numbers to match the actual image of course. If the sizes are correct, scaling will be correct even if the screen is smaller.
Toxaris is offline   Reply With Quote
Old 02-15-2015, 08:31 AM   #9
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 37,862
Karma: 106852987
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Paperwhite 3
Quote:
Originally Posted by Toxaris View Post
Not a problem at all of course. You do need to adapt the numbers to match the actual image of course. If the sizes are correct, scaling will be correct even if the screen is smaller.
Quite. JSWolf is wrong here. The svg code wrap the image and renders it at full width and height of the element it's in, keeping aspect ratio. Even on devices with fewer pixels than the source image.

It's astonishing that native formatting conveniences such as this weren't added to the XHTML-like coding of ePub 2 or 3 when all sorts of specialist junk was added.
pdurrant is offline   Reply With Quote
Old 02-15-2015, 12:51 PM   #10
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,512
Karma: 49773163
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Quote:
Originally Posted by pdurrant View Post
It's astonishing that native formatting conveniences such as this weren't added to the XHTML-like coding of ePub 2 or 3 when all sorts of specialist junk was added.
I agree, I am frequently amazed that they didn't take bookmaking as focal point when defining the ePUB standard. Basic stuff as good handling of images, good handling of footnotes, complete set of metadata (series information, translator(s), etc), more semantics and more.
Even a bigger shock (not really actually...) that this is not fixed in ePUB3 as well. No, lets put in more cosmetic disasters (javascript, audio/video) instead of making the BOOK format better.

Sometimes I am pondering about defining a standard, flat model based on semantics that should be easy to convert to ePUB or other formats. Perhaps a mix of markdown and Latex, but than easy to work with. Just as an intermediate format and archiving. If setup correctly, it should be easy to convert to the successor or next competitor of ePUB.

Last edited by Toxaris; 02-15-2015 at 12:54 PM.
Toxaris is offline   Reply With Quote
Old 02-20-2015, 02:54 PM   #11
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 3,382
Karma: 32085221
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
Quote:
Originally Posted by pdurrant View Post
Quite. JSWolf is wrong here. The svg code wrap the image and renders it at full width and height of the element it's in, keeping aspect ratio. Even on devices with fewer pixels than the source image.

It's astonishing that native formatting conveniences such as this weren't added to the XHTML-like coding of ePub 2 or 3 when all sorts of specialist junk was added.
Paul:

That's true for SVG, but not for plain image coding. When NJ says he's using 100%, he means in normal image tags. So, while Wolfie is wrong, in this particular context (SVG), he's not wrong about what would happen if the image is not SVG, but a straight-up HTML image tagged jpeg, or what-have-you.

@rosshalde:

Quote:
Because of the dimension of the images, landscape layout, I have reoriented all the pics so they are sideways in an effort to allow folks with simple b/w e-readers to have as large an image as possible.
Isn't this much ado about nothing? 99.99% of all e-readers out there, including Kindle2's, can reorient when the image is zoomed. Why not just put the pic in, without all the brain-damage, and let folks click/tap zoom, and turn the device? If you have already rotated the images, 90-degrees, if/when they try to zoom the images, they'll be chasing them 'round and round, instead of being able to simply zoom and see them. I understand your altruistic impulse, but I think you're making your life harder than it need be.

FWIW.

Hitch
Hitch is offline   Reply With Quote
Old 02-21-2015, 06:20 AM   #12
Notjohn
Fanatic
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 574
Karma: 247002
Join Date: Dec 2012
Device: Kindle
"If you have already rotated the images, 90-degrees, if/when they try to zoom the images, they'll be chasing them 'round and round, instead of being able to simply zoom and see them"

I have a biography of Stalin with some wonderful maps oriented sideways. When I bought it, I did not know that I could "lock" the orientation on my Fire HD. So the only way I could study the maps was to read the book in bed, lying on my side with the tablet held vertically while I read horizontally.
Notjohn 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
After I Edit Code, Save, and Convert, all my Code Edits are Gone lukewrussell Calibre 1 03-14-2014 08:05 PM
QR code for MR Donnageddon Lounge 81 10-04-2011 06:28 PM
Some code help Gray Eminence Sigil 3 12-31-2010 09:18 AM
Let's create a source code repository for DR 800 related code? jraf iRex 3 03-11-2010 12:26 PM
Hi all — and see the code sigizmund Introduce Yourself 2 12-18-2009 02:53 AM


All times are GMT -4. The time now is 01:25 AM.


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