View Single Post
Old 04-21-2011, 11:05 AM   #5
sourcejedi
Groupie
sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.
 
sourcejedi's Avatar
 
Posts: 155
Karma: 200000
Join Date: Dec 2009
Location: Britania
Device: Android
How about negative margins on inline boxes?

Thanks for helping a newbie sort himself out! All your technical points look correct. It's interesting that the default styling of DIV is so convenient for lines of poetry; I hadn't realized that. You're also right that it's a slight improvement on P for my purposes: better to use a more semantically neutral element than to lie outright.

1. Even after re-fixing my test environment so my SPANs were actually displayed as block elements, I still see the mystery that a single BR at the end of the display:block SPAN has no effect. This is exactly what I want, but I can't rely on it unless I know why.

2. Thinking about it, I don't want to literally "disable" BR when the CSS is enabled. I realized I could do that simply using display:none, but then I break copy+paste -- it looks like Firefox very sensibly skips display:none elements during copy+paste.

3. The third solution, avoiding all the issues so far, would be to use display: inline-block (and put the BRs just outside the span). But it's not supported by EPUB 2.0.

4. That's pretty much everything you could do to get text-ident to work, but what about other properties? How about using negative margins on inline boxes:

Code:
<!DOCTYPE html><!-- complete (though technically invalid) document -->
<style>
.basic-poetry { margin-left: 2em; }
.basic-poetry > p > span { margin-left: -2em; }

/* P may well be styled with an indent, e.g. iBooks default stylesheet, so we'd better reset it */
.basic-poetry > p { margin-top: 0; margin-bottom: 1em; text-indent: 0 }
</style>

<div class="basic-poetry"><!-- consider replacing DIV with SECTION or BLOCKQUOTE, according to context -->
<p>
<span>this is a very long line, a very long line, to i-i-i-ndicate the use, the usefulness of hanging indents to us all, except it's not real poetry so the point is probably lost, never mind, tra-la;</span><br />
<span>line 2</span><br />
<span>line 3</span></p>

<p>
<span>line 4, which starts a new stanza</span><br />
<span>line 5</span></p>
</div>
sourcejedi is offline   Reply With Quote