View Single Post
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,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&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