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 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) :

Code:

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

Quote:

Originally Posted by Jellby

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

Quote:

Originally Posted by pdurrant

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.

Quote:

Originally Posted by zelda_pinwheel

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

Quote:

Originally Posted by pdurrant

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.

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

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

Jellby · 07-28-2009, 04:57 AM

Quote:

Originally Posted by pdurrant

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.

Quote:

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

Quote:

Originally Posted by Jellby

I would test the code in a real ebook reader, or in ADE, at least.

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

07-27-2009, 07:36 AM	#1
pdurrant The Grand Mouse 高貴的老鼠 Posts: 71,483 Karma: 305784726 Join Date: Jul 2007 Location: Norfolk, England Device: Kindle Voyage	ePUB and Illustrations 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?

07-27-2009, 07:50 AM	#2
zelda_pinwheel zeldinha zippy zeldissima Posts: 27,827 Karma: 921169 Join Date: Dec 2007 Location: Paris, France Device: eb1150 & is that a nook in her pocket, or she just happy to see you?	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 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) : Code: <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—' 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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
The TOC and List of Illustrations	crutledge	Sigil	1	05-10-2010 03:00 PM
Illustrations missing from epubs	alecE	ePub	2	12-28-2009 02:10 PM
E-books and illustrations available at my website	Jellby	Deals and Resources (No Self-Promotion or Affiliate Links)	2	02-20-2009 02:06 PM
Cannot convert illustrations to mobi	Sydney's Mom	Kindle Formats	10	01-28-2009 03:14 AM
Illustrations in mobipocket	andym	Kindle Formats	33	09-20-2007 04:19 PM

07-27-2009, 07:51 AM	#3
zelda_pinwheel zeldinha zippy zeldissima Posts: 27,827 Karma: 921169 Join Date: Dec 2007 Location: Paris, France Device: eb1150 & is that a nook in her pocket, or she just happy to see you?	perhaps this thread would be better in the epub forum, do you mind if i move it ?

07-27-2009, 09:31 AM	#4
Jellby frumious Bandersnatch Posts: 7,515 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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.

07-27-2009, 03:12 PM	#7
pdurrant The Grand Mouse 高貴的老鼠 Posts: 71,483 Karma: 305784726 Join Date: Jul 2007 Location: Norfolk, England Device: Kindle Voyage	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.

07-27-2009, 03:15 PM	#8
zelda_pinwheel zeldinha zippy zeldissima Posts: 27,827 Karma: 921169 Join Date: Dec 2007 Location: Paris, France Device: eb1150 & is that a nook in her pocket, or she just happy to see you?	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.