Quote:
Originally Posted by zelda_pinwheel
i've been looking at the adobe sample ebook of Alice in Wonderland (attached). in chapter 6, they've managed to reflow text around a non-rectangular image.
i've been wanting to figure out how to do that for ages and it turns out it's laughably easy. here's the code.
|
Thanks Zelda, that's indeed a nice trick. I'm now playing with it, and here's the same thing "cleaned-up" and with the elements made visible:
Code:
<html>
<head>
<style>
img {
opacity: 0.5; /* Just to make the borders visible */
}
div.leftpic {
float: left;
text-align: left;
margin: 0.25em; /* Change at will */
}
div.leftpic + div.leftpic {
margin-left: -0.25em; /* The negative amount in div.leftpic */
}
/* The image */
div#cheshire img {
max-width: 1400px; /* Real width of the image (optional) */
width: 20em; /* Desired total width */
}
/* The narrow part */
div#cheshire {
max-width: 645px; /* Width of the narrow part (optional) */
width: 9.2em; /* 645/1400 * 20 = 9.2 */
border: solid red 1px; /* Just to make it visible */
}
/* The wide addition */
div#cheshire + div {
max-width: 755px; /* 1400-645 = 755 (optional)*/
width: 10.8em; /* 755/1400 * 20 = 10.8 */
max-height: 885px; /* Height of the widhe part (optional) */
height: 12.6em; /* 885/1400 * 20 = 12.6 */
border: solid green 1px; /* Just to make it visible */
}
</style>
</head>
<body>
<p>
<div class="leftpic" id="cheshire">
<img src="Alice-23.jpg" alt="Alice talks to Cheshire Cat"/>
</div>
<div class="leftpic"></div>
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>
The image can be found
here.
I think the css is self-explanatory, this keeps the settings specific to an image separated from the global ones. The max-widths are actually optional, but the widths (and height) are proportional to them (I guess that makes it impossible to use percent values, as then width and height proportions are not linked). I don't know if it would be possible to do something more self-contained, that allows an easier change of the image size...
This is the result: