09-13-2009, 10:26 AM | #1 |
The Grand Mouse 高貴的老鼠
Posts: 71,429
Karma: 305784726
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
resizing in-line images
I've run into a problem. I'm hoping there's a simple answer that I've completely overlooked.
I want to include an image in an ePub between two paragraphs of text. I want it to display in the following way: * It should resize only proportionally - it should never display stretched or squashed * It should resize to be as large as possible (optionally up to a fixed limit) * It should never display partially on one page and partially on another * If the image display height is shorter than the page height, text should appear above and below the image * If the image display width is narrower than the page width, it should be centred left/right. So a tall image might take up the whole of the page, and be centred left/right. A short image would have text above and below it, and might also be centred on a very wide display that's wider than the resize limit. A simple <img> link can be set to resize to the largest width, with a maximum, and even get centred. But a tall thin image will be resized to be taller than the page area An embedded svg image has a similar problem, which can be fixed by specifying a height of 100%, but then the image /always/ takes up a whole page, and so short wide images also display on a separate page, with no text above and below them. I want some of my images to be displayed in-line with the text, not always on a separate page. I think I can work around it, by making an assumption that a page is taller than it is wide, and choosing different options for my pictures depending on their own aspect ratio. But this will break down for odd cases - e.g. people readin on a device rotated 90 degrees. Any suggestions gratefully received. |
09-13-2009, 04:37 PM | #2 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
I've encountered the same problem, and haven't found a fully satisfactory solution. I believe the main problem is readers/browsers not interpreting relative heights with respect to the page height, otherwise this should (if I'm not mistaken) work fine:
Code:
div.illustration { text-align: center; } div.illustration img { max-height: 100%; max-width: 100%; } <div class="illustration"> <img src="file.jpg" /> </div> ... or maybe I'm not interpreting the max-height correctly? |
09-14-2009, 04:26 AM | #3 |
The Grand Mouse 高貴的老鼠
Posts: 71,429
Karma: 305784726
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
That does work very well. And in Safari the height restriction (limiting the image to the height of the browser window) does also work, so one can hope that in future ePub reader implementations it should work better.
And it's a lot simpler than my attempt with svg. I'll adopt this solution. I'd add a few things to div.illustration, as I need to sometimes clear a drop-cap image, and I default to a text indent: div.illustration { text-indent: 0; text-align: center; clear: both; } Oh - the one thing this doesn't do is expand the illustration in case of larger page sizes. But since I was going to limit the scaling up to the actual pixel size of the image anyway, it doesn't worry me for this case. It would be nice to have something that worked properly with SVG images though, for cases when the illustration is vector and could scale up for bigger screens without a problem. |
09-14-2009, 06:05 AM | #4 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Do you have indents for normal div's? I have them for p's only. You may want to add margins too.
|
09-14-2009, 06:44 AM | #5 |
The Grand Mouse 高貴的老鼠
Posts: 71,429
Karma: 305784726
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Good question! I don't think I do, come to think of it, so the text-indent:0 is redundant, so long as no-one overrides my CSS. Margins I'd rather leave alone - if the body has margins applied, I don't want to override them for images.
|
09-14-2009, 08:03 AM | #6 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
I meant top and bottom margins, to separate the illustration from the text (if there is a pagebreak, I believe the affected margin is ignored by ADE).
|
09-21-2009, 06:10 AM | #7 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
I asked something about this issue in the Prince XML forum, and got a reply saying that actually percentage heights are calculated in relation to the container's height (spec), and this only works if the container has a fixed height. Since the container will usually be <body> or a <div> without explicit height, I'm afraid something won't work here.
|
09-21-2009, 06:49 AM | #8 | |
The Grand Mouse 高貴的老鼠
Posts: 71,429
Karma: 305784726
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
So I suppose the question is:
Can we, in ePub XHTML/CSS, get a block that's the currently available width and height of the page. We seem to be able to get width easily enough, but height eludes me. Quote:
|
|
09-21-2009, 07:26 AM | #9 |
book creator
Posts: 9,635
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: PB360°
|
I guess the problem may be that a fixed page size(inside a div container for example) might interfere with the concept of ePub and hinder the reflowing capability.
|
09-21-2009, 08:13 AM | #10 |
The Grand Mouse 高貴的老鼠
Posts: 71,429
Karma: 305784726
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
But I don't want a /fixed/ page size - I want the page size of the current device. And while this might cause flow problems, no more than any other element that has a particular depth (e.g. a plain illustration with an <img> tag.)
I've not completely given up hope that it's possible with current ePUB XHTML and CSS, but I it might be that it'll require some new syntax. Perhaps max-height=@page would be a good choice. |
09-21-2009, 11:44 AM | #11 |
The Grand Mouse 高貴的老鼠
Posts: 71,429
Karma: 305784726
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
It seems that it /is/possible, at least in browsers, by using
html, body { height:100% } which inherits the height of the viewport (i.e. page) into the body, allow neat tricks like: http://brunildo.org/test/shrink_center_5.html which centres horizontally and vertically in the viewport. Just what I wanted for my dedication text, but which, alas, fails in ADE. It also work to get img objects to resize nicely, inlcuding in-line images. But that too fails in ADE. Sigh.... |
09-21-2009, 12:19 PM | #12 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
08-16-2013, 04:08 AM | #13 | |
Junior Member
Posts: 3
Karma: 10
Join Date: Aug 2013
Device: iPad
|
Quote:
I could care less at this point about width, as long as the image scales to fit and doesn't get cut off. I have some image and video heavy eBooks and my images are breaking in multiple eReaders across multiple pages (iBooks, Kobo, Sony/Bluefire). They should never break, but they should always scale to fit the viewport. The way I'm seeing it, the max height issue is... one problem. Where the image has nothing to "grab onto"... in that, the eReaders aren't really expressing their viewport height that we can lean max height against. eReaders should handle max height by relating it to the vertical size of the viewport... not the screen size. The screen size isn't the content area. The viewport is, which is effectively the page. I've been reading on the SVG wrapper solution... does anyone have any other comments about this or another solution? Last edited by ebooksepub; 08-16-2013 at 04:10 AM. |
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Image resizing - how to disable? | ATimson | Calibre | 2 | 04-05-2012 12:08 AM |
PDF resizing tips | Gerbil | Sony Reader | 1 | 06-24-2010 01:20 PM |
Table is not resizing properly in case of images | mangalv | ePub | 0 | 11-14-2009 04:57 AM |
Software for resizing PDF's | tshare | Sony Reader | 9 | 02-07-2007 11:39 AM |