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-13-2009, 10:26 AM   #1
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: 31,695
Karma: 87823216
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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.
pdurrant is offline   Reply With Quote
Old 09-13-2009, 04:37 PM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,146
Karma: 4792399
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>
But all I see is browsers/readers just ignoring the max-height (probably because they assume the <div> can be resized as large as needed, and don't consider the page restrictions), and Prince XML seems to calculate the max-height relative to the page width (so the image will be, at most, as high as the page is wide).

... or maybe I'm not interpreting the max-height correctly?
Jellby is offline   Reply With Quote
Old 09-14-2009, 04:26 AM   #3
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: 31,695
Karma: 87823216
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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.
pdurrant is offline   Reply With Quote
Old 09-14-2009, 06:05 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,146
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by pdurrant View Post
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;
}
Do you have indents for normal div's? I have them for p's only. You may want to add margins too.
Jellby is offline   Reply With Quote
Old 09-14-2009, 06:44 AM   #5
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: 31,695
Karma: 87823216
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
Quote:
Originally Posted by Jellby View Post
Do you have indents for normal div's? I have them for p's only. You may want to add margins too.
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.
pdurrant is offline   Reply With Quote
Old 09-14-2009, 08:03 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,146
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by pdurrant View Post
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.
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).
Jellby is offline   Reply With Quote
Old 09-21-2009, 06:10 AM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,146
Karma: 4792399
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.
Jellby is offline   Reply With Quote
Old 09-21-2009, 06:49 AM   #8
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: 31,695
Karma: 87823216
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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:
Originally Posted by Jellby View Post
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.
pdurrant is offline   Reply With Quote
Old 09-21-2009, 07:26 AM   #9
mtravellerh
book creator
mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.
 
mtravellerh's Avatar
 
Posts: 9,613
Karma: 1620342
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.
mtravellerh is offline   Reply With Quote
Old 09-21-2009, 08:13 AM   #10
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: 31,695
Karma: 87823216
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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.


Quote:
Originally Posted by mtravellerh View Post
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.
pdurrant is offline   Reply With Quote
Old 09-21-2009, 11:44 AM   #11
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: 31,695
Karma: 87823216
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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....



Quote:
Originally Posted by pdurrant View Post
Can we, in ePub XHTML/CSS, get a block that's the currently available width and height of the page.
pdurrant is offline   Reply With Quote
Old 09-21-2009, 12:19 PM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,146
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by pdurrant View Post
It seems that it /is/possible, at least in browsers, by using

html, body { height:100% }
Hmm... interesting...
Jellby is offline   Reply With Quote
Old 08-16-2013, 04:08 AM   #13
ebooksepub
Junior Member
ebooksepub began at the beginning.
 
Posts: 1
Karma: 10
Join Date: Aug 2013
Device: iPad
Quote:
Originally Posted by pdurrant View Post
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.
I realize this thread is old but what you've described here is exactly what I'm trying to achieve. I want images to flow properly. I want them to scale smaller if they're bigger than the page size (viewport), and I want them to have text above and below if they're respectively smaller than the viewport.

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


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


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