Please Help with Code

[rosshalde]

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.

[Toxaris]

Put the images in the SVG wrapper code also used for covers. That should do it.

[Notjohn]

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>

[JSWolf]

Originally Posted by Notjohn

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.

[Notjohn]

Specifically, what would one of those cheap tablets be named? (Cheaper than an $84 Fire?)

[JSWolf]

Originally Posted by Notjohn

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/

[Notjohn]

$44.90 with shipping, sigh!

[Toxaris]

Originally Posted by JSWolf

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.

[pdurrant]

Originally Posted by Toxaris

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.

[Toxaris]

Originally Posted by pdurrant

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.

[Hitch]

Originally Posted by pdurrant

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:

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

[Notjohn]

"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.