Assigning height=”100%” within Sigil from a Calibre ePub

[Arpeggio]

Hi I'm new here. I write technical books with pictures and diagrams and need to make the images be contained within varying screen sizes without being clipped.

I’m not an expert and my html knowledge is minimal, so I guess I may have being making ePubs in an unconventional way. First I copy and paste the text from PDF into Sigil, then add images, clean up the html as much as I can within Sigil (going through its flight crew errors, infact I can't remember how I did this now but it involved learning some html at the time). Then I convert the file to ePub within Calibre in order to get it to 100% pass on Sigils flight crew. Finally I take all the spaces out between the image file names, the ePub then passes on ePubchecker. http://code.google.com/p/epubcheck/

After reading the following thread from here… https://www.mobileread.com/forums/sho...d.php?t=188033
I’ve been adding the height=“100%” to the post calibre version within Sigil rather than the pre Calibre version (as it’s a bit late to go back now). I have a question please.

The post Calibre version changes the html. For example…

<p class="calibre1"><img alt="" class="calibre42" src="../Images/Dmajorsinglestring.jpg" /></p>

If I add height="100%" just before src=” then look at the ePub in ADE it makes no difference. However if I remove class="calibre42" from the code as well, then the image appears thin within Sigil but within ADE resizes to fit any window size as required. I leave out width altogether on the basis that height is the important specification, and that otherwise width would interfere (i.e. on a short screen the image would look squashed).

Having done this with a few graphics then tested in within ePubChecker it passes.

Could the calibre html alterations be an issue? Is this an acceptable way of doing it or have I missed something?

Your views would be much appreciated.

[Jellby]

Originally Posted by Arpeggio

Hi I'm new here. I write technical books with pictures and diagrams and need to make the images be contained within varying screen sizes without being clipped.

That has proved to be a very slippery goal. When you get it working, it will fail in some other reader.

If I add height="100%" just before src=” then look at the ePub in ADE it makes no difference.

Do not add that in the html. Instead, look for calibre42 (or whatever appropriate) in the CSS and add height:100%;

But height 100% (if it works) means the image will always take the whole screen vertically, regardless of its aspect ratio, the screen's aspect ratio and the image size. Is that what you want?

[Arpeggio]

Originally Posted by Jellby

That has proved to be a very slippery goal. When you get it working, it will fail in some other reader.

Do not add that in the html. Instead, look for calibre42 (or whatever appropriate) in the CSS and add height:100%;

But height 100% (if it works) means the image will always take the whole screen vertically, regardless of its aspect ratio, the screen's aspect ratio and the image size. Is that what you want?

Thanks I did that and got it to work.

Regarding the aspect ratio; there are tall thin diagrams and short fat ones (some I have added white spacing on each side), for some of the short ones I think I will ad a width100% and leave the height.

A bunch of other graphics were affected too, which have the same "calibre13" with them. To solve this would I need to have certain specifications in the CSS e.g. calibre13 height100%, calibre14 width100% etc. then in the html change "caliber whatever it was" to calibre14 for all images that need to follow 14's rules?

Knowing that as you say it's a slippery goal (which is more the fault of eReader manufacturers?) could another option be simply to leave it alone so as not to conflict with technology within eReaders and instead take the taller pictures down to 720 pixels in height so they don't get clipped at the bottom on the average PC screen size for people who read on a ADE or Nook, neither of which rescale images (that is based on the assumption that eReader actually rescale images?).

[Jellby]

Originally Posted by Arpeggio

A bunch of other graphics were affected too, which have the same "calibre13" with them. To solve this would I need to have certain specifications in the CSS e.g. calibre13 height100%, calibre14 width100% etc. then in the html change "caliber whatever it was" to calibre14 for all images that need to follow 14's rules?

Do you know that CSS classes can be combined? Don't touch the existing ones and just add these:

.wideimg { width: 100%; }
.highimg { height: 100%; }

Now, for wide and short images, change this:

<img class="calibre13 wideimg" src="..." ... />

(simply add "wideimg" to the class attribute, inside the quotes and separated by a space and nothing else). And similarly with tall and narrow images, adding highimg instead.

Knowing that as you say it's a slippery goal (which is more the fault of eReader manufacturers?)

Not really... The behaviour of "height:100%" is mostly practically undefined in the CSS model, and there's no robust way of referring to the available screen height.

[mrmikel]

Originally Posted by Arpeggio

Knowing that as you say it's a slippery goal (which is more the fault of eReader manufacturers?) could another option be simply to leave it alone so as not to conflict with technology within eReaders and instead take the taller pictures down to 720 pixels in height so they don't get clipped at the bottom on the average PC screen size for people who read on a ADE or Nook, neither of which rescale images (that is based on the assumption that eReader actually rescale images?).

Then you will have the tablet people, especially the 10" tablet people, complaining about the small images.

There is just no way to please everyone, but you can get a sense of what this particular technical audience uses and try to aim for that.

[Arpeggio]

Originally Posted by Jellby

Do you know that CSS classes can be combined? Don't touch the existing ones and just add these:

.wideimg { width: 100%; }
.highimg { height: 100%; }

Now, for wide and short images, change this:

<img class="calibre13 wideimg" src="..." ... />

(simply add "wideimg" to the class attribute, inside the quotes and separated by a space and nothing else). And similarly with tall and narrow images, adding highimg instead.


Not really... The behaviour of "height:100%" is mostly practically undefined in the CSS model, and there's no robust way of referring to the available screen height.

Thanks, I tried that on a tall image and although it fit the images height into ADE it didn't proportionally scale down the width, which made it stretch wide, is there something else I need to ad?

If assigning height 100% is not recommended as it will fail in another reader, then can I ask if most eReader devices rescale images automatically while it is only readers on PC like ADE and Nook that don't? If so perhaps I could be better off leaving it and making sure all images don't exceed an appropriate pixel height for the average monitor size / resolution.

[Jellby]

Originally Posted by Arpeggio

Thanks, I tried that on a tall image and although it fit the images height into ADE it didn't proportionally scale down the width, which made it stretch wide, is there something else I need to ad?

You need to remove any "width" setting. Or replace both "width" and "height" with "max-width" and "max-height".

If assigning height 100% is not recommended as it will fail in another reader, then can I ask if most eReader devices rescale images automatically while it is only readers on PC like ADE and Nook that don't?

As far as I know, most readers don't rescale images. They don't even offer a "click/tap on the image to view it on its own (with zoom & pan)" feature.

[mrmikel]

The PRS-505 allowed you to look at images, jpgs, separately and allowed you to pan, but not within an epub.

Can't do that with my little PRS-300.

[Arpeggio]

Originally Posted by Jellby

You need to remove any "width" setting. Or replace both "width" and "height" with "max-width" and "max-height".

As far as I know, most readers don't rescale images. They don't even offer a "click/tap on the image to view it on its own (with zoom & pan)" feature.

I tried but couldn't get it to work. Eventually I took out the calibre13 altogether. So for example this...

<img class="calibre13 wideimg" src="..." ... />

would be just...

<img class="wideimg" src="..." ... />

Unfortunately on ADE2.0 when I adjust the window, the quality of the image in various sizes looks as bad as an original size non-scalable image used to look on ADE1.8. Through epubreader (FireFox ad-on) which also rescales images automatically it maintains integrity at all sizes, but that doesn't recognize DRM.

[JSWolf]

Originally Posted by Arpeggio

I tried but couldn't get it to work. Eventually I took out the calibre13 altogether. So for example this...

<img class="calibre13 wideimg" src="..." ... />

would be just...

<img class="wideimg" src="..." ... />

Unfortunately on ADE2.0 when I adjust the window, the quality of the image in various sizes looks as bad as an original size non-scalable image used to look on ADE1.8. Through epubreader (FireFox ad-on) which also rescales images automatically it maintains integrity at all sizes, but that doesn't recognize DRM.

Yes, ADE for Windows (and maybe OS X) do have problems resizing images. But, all of the portable versions I've seen (Sony, nook, Bluefire and screen shots from Kobo, Bookeen and some others) do look fine when displaying a resized image.

Just strip off the DRM and it won't bite you on the bum.

[Arpeggio]

Originally Posted by JSWolf

Yes, ADE for Windows (and maybe OS X) do have problems resizing images. But, all of the portable versions I've seen (Sony, nook, Bluefire and screen shots from Kobo, Bookeen and some others) do look fine when displaying a resized image.

Just strip off the DRM and it won't bite you on the bum.

That is good to know. ADE seems neglected, the only PC reader that it looks OK on is the Kindle for PC which also automatically rescales.

I was thinking about not having DRM and have been on the fence over that for a while and still pondering. To me not having DRM seems to contradict word of mouth sales.

I just purchased a couple of eBooks in my genre today to analyse and see what they did.

[Arpeggio]

Originally Posted by mrmikel

Then you will have the tablet people, especially the 10" tablet people, complaining about the small images.

There is just no way to please everyone, but you can get a sense of what this particular technical audience uses and try to aim for that.

I bought “Guitar for Dummies” and “Progressive Guitar Method - Finger Picking” from Kobo.

The latter has all scalable images when looking at it through ADE. Guitar for Dummies has no scalable images they all stay the same. I worked out that the musical pieces are all 540 pixels wide (my monitor screen is 43.3cm wide and 1152 pixel res wide, while the books musical pieces are 20cm wide on my screen. 20cm as % of 43.3cm is 46.9% and 46.9% of 1152px is 540 pixels).

My image widths are currently up to 700 pixels and according to the following, all larger screen eReaders have a width of more than 700.

http://en.wikipedia.org/wiki/Compari...e-book_readers

My eBook is going to be specifically for larger screen eReaders (as will be stated in the synopsis). I think that’s the best I could do in the hope technology will improve and automatic image scaling becomes more common. If not having scalable images is good enough for Wiley publishing and their 540px width, then I guess my 700px non scalable image plan is good enough for me. Unfortunately rescaling images in ADE seems to sacrifice the image quality of my diagrams and reading on PC needs to be an option.

It looks like 700 pixels wide would still be smaller within the screen for many of the larger readers if they don’t automatically rescale knowing that most have higher screen res width than 700. Then again, given that surely larger screen eReaders are intended for more graphics and more complex layouts, automatic image scaling is more likely to be standard? I wonder what anyone knows about that?…..Still confused and undecided but feeling a little clearer.

[JSWolf]

Originally Posted by Arpeggio

That is good to know. ADE seems neglected, the only PC reader that it looks OK on is the Kindle for PC which also automatically rescales.

I was thinking about not having DRM and have been on the fence over that for a while and still pondering. To me not having DRM seems to contradict word of mouth sales.

I just purchased a couple of eBooks in my genre today to analyse and see what they did.

Tor has gone DRM free and they have said that sales have not been impacted because of not having DRM. The people who share eBooks on the net either know how to strip the DRM or where to find them. So DRM is only really hurting honest people who do not strip DRM.

[Arpeggio]

Originally Posted by JSWolf

Tor has gone DRM free and they have said that sales have not been impacted because of not having DRM. The people who share eBooks on the net either know how to strip the DRM or where to find them. So DRM is only really hurting honest people who do not strip DRM.

I use stamping on the PDF's I sell direct on my website so the file isn't limited by DRM. A shame that wont work for other formats too.

[mrmikel]

Originally Posted by JSWolf

Tor has gone DRM free and they have said that sales have not been impacted because of not having DRM.

Since they are a science fiction publisher, I am not certain you can generalize this to the broader market.

Science fiction readers have more of a relationship to the authors than other fields, especially the heavy and regular readers, going to conventions, etc.