View Full Version : ePUB and Illustrations


pdurrant
07-27-2009, 07:36 AM
Occasionally, it would be useful to have an illustration that is in proportion to the text around it - so that, for instance, it might have a height of 12 lines of text, no matter what font size was currently selected.

The particular instance I'm looking at is the case of a graphic used as a drop capital. I can get the graphic in the right place easily enough, but ideally I'd like it to scale with the font size, so that it always (say) is three lines of text deep. I can do this is the drop cap is part of the text, but not if it's a graphic.

Does anyone have any ideas on how such a thing might be done in an ePUB?

zelda_pinwheel
07-27-2009, 07:50 AM
this is possible if you define the size of your image in "ems" since they are proportional to the font size. you can see some code to do this in the epub code-snippets (http://www.mobileread.com/forums/showthread.php?t=46448) thread. the snippet in question is really about how to wrap non-rectangular images but as it happens this little trick is in there too. ;)

here is an example of the relevant code (css and html. the css can be in an external stylesheet but here it's been added in the html page directly) from jellby's post (i removed the extra bits about the non-rectangular wrapping to simplify it) :


<html>
<head>
<style>
div.leftpic {
float: left;
text-align: left;
margin: 0.25em; /* Change at will */
}
/* The image */
div#cheshire img {
max-width: 1400px; /* Real width of the image (optional) */
width: 20em; /* Desired total width */
}
</style>
</head>
<body>

<div class="leftpic" id="cheshire">
<img src="Alice-23.jpg" alt="Alice talks to Cheshire Cat"/>
</div>

<p>So she set the little creature down, and felt quite relieved to see it trot away
quietly into the wood. 'If it had grown up,' she said to herself, 'it would have
made a dreadfully ugly child: but it makes rather a handsome pig, I think.' And she began thinking over other children she knew, who might do very well as pigs, and was just saying to herself, 'if one only knew the right way to change them&mdash;' when she was a little startled by seeing the Cheshire Cat sitting on a bough of a tree a few yards off.
</p>

</body>
</html>

you just have to float the image to the left and the text will automatically wrap. i used this for the illuminated drop caps in three men and a boat, and i found it works best if you put the div with the image outside the paragraph, just before it.

in fact they used this method in the adobe epub sample book of alice in wonderland (you can download it from post 5 in that thread where it is attached). the idea is to give the proper proportional size of the image in ems, and the maximum size (should be the real size of the image, which is scaled down at smaller display sizes via the em measurement) in pixels.

however, be careful ; this is a very stylie effect and it's tempting to use it, but don't forget on a small screen it could quickly cause problems with the image taking up quite a lot of the screen width and leaving too little space for the text beside it. and be sure to test the results to make sure everything is displaying properly.

if you decide not to rescale the drop-cap, you can use the same "float left" code to place the image, just don't add the measurements in ems, and make sure the picture is scaled to the proper size.

zelda_pinwheel
07-27-2009, 07:51 AM
perhaps this thread would be better in the epub forum, do you mind if i move it ?

Jellby
07-27-2009, 09:31 AM
Take into account that 1em is not exactly 1 line, even less so since the line height can be altered independently from the font size. But I believe if you specify "line-height: 1.1", then you can say 1 line is 1.1em... although the user could alter the line height him-/herself. Bottom line: don't rely on the image being exactly some number of lines, it's going to be only approximate in practice.

pdurrant
07-27-2009, 09:42 AM
I don't expect pixel accuracy (or even point accuracy), but it would be good to have the drop cap illustration about twice as big when the font size is doubled.

A good point about the line height.

Take into account that 1em is not exactly 1 line, even less so since the line height can be altered independently from the font size. But I believe if you specify "line-height: 1.1", then you can say 1 line is 1.1em... although the user could alter the line height him-/herself. Bottom line: don't rely on the image being exactly some number of lines, it's going to be only approximate in practice.

Jellby
07-27-2009, 10:25 AM
I don't expect pixel accuracy (or even point accuracy), but it would be good to have the drop cap illustration about twice as big when the font size is doubled.

Then ems is what you need :)

pdurrant
07-27-2009, 03:12 PM
I now have the drop cap illustrations working rather nicely. I have another question related to images in ePUBs.

This time, it's illustrations that come in the text. I don't want the illustrations resized with the text this time, but I do want them resized so that they are as big as possible - taking up the whole width of the display if they're a wide, short picture, and taking up the whole height (with white space at the sides) if it's a tall thin picture.

I found the code in Alice used to make the cover picture as big as possible:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 583" preserveAspectRatio="xMidYMid meet">
<image width="400" height="583" xlink:href="images/Cover.jpg" />
</svg>


But when I put this in my document, Safari does nicely resize the picture to fit the width, but when the window width gets less than the width of the picture, it starts to leave gaps above and below the picture, keeping the overall height of the gap the same - I'm guessing this is because of the viewBox dimensions.

Does anyone have a way to fix this? I've tried looking up the SVG specs myself, but they seem to much more concerned with stand-alone images rather than in-line wrappers like this.

zelda_pinwheel
07-27-2009, 03:15 PM
glad to hear the drop caps are working for you. :)

for your other images, i recommend you create 2 classes in your css. to one class, you give an attribute of width:100% (or 90%, if you want a little margin) or whatever. to the other you give height:100%. then you apply the classes to the images depending on their specific proportions ; for portrait images you give them a 100% height, and for landscape format you give them a 100% width.

pdurrant
07-27-2009, 03:58 PM
For this to work I'd need to know the aspect ratio of the display. And that can change from display to display, or even in the same display switch between vertical and horizontal. (e.g. CyBook Opus)

There really ought to be some way to do it.

for your other images, i recommend you create 2 classes in your css. to one class, you give an attribute of width:100% (or 90%, if you want a little margin) or whatever. to the other you give height:100%. then you apply the classes to the images depending on their specific proportions ; for portrait images you give them a 100% height, and for landscape format you give them a 100% width.

zelda_pinwheel
07-27-2009, 04:00 PM
For this to work I'd need to know the aspect ratio of the display. And that can change from display to display, or even in the same display switch between vertical and horizontal. (e.g. CyBook Opus)

There really ought to be some way to do it.

oops, i see what you mean. :o i should have thought of that myself, since i previously spent quite a lot of time determining the precise aspect ration of the eb1150 screen for exactly the purpose of optimising images... :rolleyes:

i'll keep thinking. maybe jellby has a better idea...

Jellby
07-28-2009, 04:57 AM
This time, it's illustrations that come in the text. I don't want the illustrations resized with the text this time, but I do want them resized so that they are as big as possible - taking up the whole width of the display if they're a wide, short picture, and taking up the whole height (with white space at the sides) if it's a tall thin picture.

I think "max-height: 100%; max-width: 100%;" should work, but I have the feeling it didn't last time I tried.

But when I put this in my document, Safari does nicely resize the picture to fit the width, but when the window width gets less than the width of the picture, it starts to leave gaps above and below the picture, keeping the overall height of the gap the same - I'm guessing this is because of the viewBox dimensions.

I use that SVG code for covers too. My experience is that not all web browsers (HTML or readers) support SVG, and those who do tend to have bugs. So do not trust what you see in a browser if you are creating an ePUB book. A possible theory, from what you say and from what I've seen, is that browsers have problems determining the height of the window/frame/viewable area, so measurements relying on that can be problematic (my proposed max-height:100%, the height:100% in the SVG...). I would test the code in a real ebook reader, or in ADE, at least.

pdurrant
07-28-2009, 06:07 AM
I would test the code in a real ebook reader, or in ADE, at least.

A very good point. I'll do that next.