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 07-27-2009, 07:36 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: 30,761
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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?
pdurrant is offline   Reply With Quote
Old 07-27-2009, 07:50 AM   #2
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
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&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 is offline   Reply With Quote
Old 07-27-2009, 07:51 AM   #3
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
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 ?
zelda_pinwheel is offline   Reply With Quote
Old 07-27-2009, 09:31 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: 5,952
Karma: 4346919
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.
Jellby is online now   Reply With Quote
Old 07-27-2009, 09:42 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: 30,761
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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 View Post
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 is offline   Reply With Quote
Old 07-27-2009, 10:25 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: 5,952
Karma: 4346919
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by pdurrant View Post
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
Jellby is online now   Reply With Quote
Old 07-27-2009, 03:12 PM   #7
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: 30,761
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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.
pdurrant is offline   Reply With Quote
Old 07-27-2009, 03:15 PM   #8
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
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.
zelda_pinwheel is offline   Reply With Quote
Old 07-27-2009, 03:58 PM   #9
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: 30,761
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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 View Post
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 is offline   Reply With Quote
Old 07-27-2009, 04:00 PM   #10
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
Join Date: Dec 2007
Location: Paris, France
Device: eb1150 & is that a nook in her pocket, or she just happy to see you?
Quote:
Originally Posted by pdurrant View Post
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...
zelda_pinwheel is offline   Reply With Quote
Old 07-28-2009, 04:57 AM   #11
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: 5,952
Karma: 4346919
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by pdurrant View Post
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.
Jellby is online now   Reply With Quote
Old 07-28-2009, 06:07 AM   #12
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: 30,761
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
Quote:
Originally Posted by Jellby View Post
I would test the code in a real ebook reader, or in ADE, at least.
A very good point. I'll do that next.
pdurrant 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
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, Freebies, and Resources (No Self-Promotion) 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


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


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