Indeed, the float property works just fine, and I assume that's what Winnie is relying on. Here is my own example:
The code is absolutely standard and familiar:
img.float {float:right; margin-left:10px}It works in Adobe Digital Editions also.
Seems like it opens up a world of possibilities. I'll be spending the day looking at them, but I'd love to see what you come up with.
One thing to keep in mind is that when the iPad is rotated, the image does not change size. And the wrapped text can get pretty squished:
The answer to that problem is probably keeping the image small enough to work on the horizontal spread, and big enough to be helpful on the vertical.
Don't be distracted by the italics and small caps. Those are tests as well. And yes, that is Walden Pond.
Liz, what happens when you set up an object with relative positioning (which is not listed as "strongly discouraged," according to www.idpf.org/2007/ops/ops2.0/download/#Section1.3.5). Also, what about overflow options and CSS3 definitions? This article offers some reason for optimism: infogridpacific.typepad.com/using_epub/2010/04/more-epub-best-practices.html
ReplyDeleteWhat if the image width is specified as a percentage?
ReplyDeleteI'm trying lots of combinations of things and will post when I have a definitive answer. What I'm finding in particular is that each eReader supports a different subset of CSS, and it's giving me flashbacks of the browser war days. What's even more troubling is that many eReaders deliberately ignore particular CSS properties to (over)compensate for earlier readers who weren't as good at supporting them.
ReplyDeleteWill max-width on image in iBooks works? Maybe max-width: 60% can solve the problem?
ReplyDeleteIt's not clear from your screenshot, but I don't think the margin attribute works. If you float right, the top, bottom, and right margins are OK, but there's no margin on the left.
ReplyDeleteActually, it seems as though only one of margin-left and margin-right work at a time, and the same for margin-top and margin-bottom. So if you're floating right, you have to choose between butting up against the edge of the page or butting up against the text on the left.
ReplyDeleteLiz, could you tell me where I must include the code for floating?
ReplyDeleteJust in the "style" paragraph of the xhtml page?
I am using Sigil
In the CSS, wherever you have it. It could be in the XHTML page (within style tags at the top) or it could be in its own CSS document.
ReplyDeleteI don't know Sigil (though I have heard of it).
hope that helps,
Liz
Sure that helps Liz. Thank you very much. I have purchased on of your books today...
ReplyDeletein your css file, you can create a new class. i.e.
ReplyDelete.FloatLeft {
float:left
margin:2.5em
max-width:60%
}
and then apply this style to the image in the html. ie:
<img class:"FloatLeft" src...etc
Yes, but that's not how CSS is supposed to be used. A class should group elements by function, not by format.
Delete