View Single Post
Old 01-26-2010, 05:31 PM   #66
ePub Headbanger
darkpoet doesn't litterdarkpoet doesn't litter
darkpoet's Avatar
Posts: 43
Karma: 166
Join Date: Aug 2009
Location: Korea
Device: Sony PRS-505
How to format poetry

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
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">&nbsp;</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...
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 ; }

<ul class="poem">
<li>stanza1 - 1</li>
<li>stanza1 - 2</li>
<div class="dontbreak">
<li>stanza2 - 1</li>
<li>stanza2 - 2</li>
</div><div class="dontbreak">
<li>stanza3 - 1</li>
<li>stanza3 - 2</li>
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.
Attached Thumbnails
Click image for larger version

Name:	TheFoolx.png
Views:	4734
Size:	16.4 KB
ID:	44353  

Last edited by darkpoet; 01-28-2010 at 01:24 PM. Reason: better solution, edited for clarity
darkpoet is offline   Reply With Quote