Chang: I am working on the same problem now, except with some custom fonts... poetry I want indented slightly when zoomed in, all but the first line. Something like this:
At first I tried this
Code:
p.poem {
font-family: "OldNewspaperTypes" ; font-size: 117% ;
padding-left: 1.5em ; text-indent: -1.5em ; line-height: 125% ; }
<p class="poem">Title</p>
<p class="poem"> </p>
<p class="poem">stanza1 - line1</p>
<p class="poem">stanza1 - line2</p>
...
You might notice the line-height in the CSS. My Sony Reader doesn't render the fonts correctly at normal line-height. I was losing the tails of letters like y and g (not shown, sorry). But after a lot of playing around, unordered lists seems like a better, cleaner solution (and it renders correctly). The border, padding, and margin should be set to zero otherwise the Sony Reader renders a slightly bordered box around the whole "list." I personally like a little space between my lines (the margin-bottom) but that's your choice... I also hate it when stanzas break across pages, especially when all that remains is the final line. When using lists, span's don't work correctly so use div's...
Code:
ul.poem {
font-family: "OldNewspaperTypes" ; font-size: 117% ;
border: 0 ; padding: 0 ; margin: 0 ; list-style-type: none ;
padding-left: 1.5em ; text-indent: -1.5em ; }
ul.poem li { margin-bottom: 0.2em ; }
.dontbreak { page-break-inside: avoid ; }
<h3>Title</h3>
<ul class="poem">
<li> </li>
<li>stanza1 - 1</li>
<li>stanza1 - 2</li>
<div class="dontbreak">
<li> </li>
<li>stanza2 - 1</li>
<li>stanza2 - 2</li>
</div><div class="dontbreak">
<li> </li>
<li>stanza3 - 1</li>
<li>stanza3 - 2</li>
</div></ul>
On a related note, I also had trouble with a right-floating image. You can't use paragraph's in that case either. For some reason, it ends up getting screwed up by the Sony Reader.