MobileRead Forums - View Single Post

jgray · 04-03-2008, 06:31 AM

I had already come up with a workable method of formatting the poetry in Forest Runes and posted the result to my web site. However, I wasn't completely satisfied. I thought that there must be a better way to do this. After doing some additional pondering and Googling, I see that quite a few people have wrestled with the problem of formattting poetry for the web.

In any event, I have what I think is a slightly better variation on the method that I had already used. I would like to get some comments and suggestions on possible improvements. What I don't want to do is to use numerous nbsp tags for indents. Note that any suggestions have to allow for multiple levels of indent to be applied to individual lines of a stanza. Also, the less markup needed, the better.

Here is my current example.

Code:

<html>
    <head>
        <title>Poetry Test</title>

        <style type="text/css">
            .indent1 { padding-left: 1.2em; }
            .indent2 { padding-left: 6.0em; }
            body { font-family: Georgia, serif; }
            div.poem { white-space: nowrap; }
            h1 { margin-top: 0.4em; text-align: center; font-size: 1.2em; }
            p {text-indent: 1.2em; }
            p.poem { text-indent: 0; }
        </style>

    </head>

    <body>
        <h1>SUNRISE IN THE FOREST</h1>

        <div class="poem">
            <p class="poem">THE zephyrs of morning are stirring the larches,
                <br /><span class="indent1"></span>And, lazily lifting, the mist rolls away.
                <br />A paean of praise thro’ the dim forest arches
                <br /><span class="indent1"></span>Is ringing, to welcome the advent of day.
                <br /><span class="indent2"></span>Is loftily ringing,
                <br /><span class="indent2"></span>Exultingly ringing,
                <br />From the height where a little brown songster is clinging,
                <br /><span class="indent1"></span>The top of a hemlock, the uttermost spray.
            </p>
        </div>
     </body>
</html>

A few notes:

I didn't know about "whitespace: nowrap" before. This takes care of preventing a long line from breaking.
Placing the closing span tag immediately after the opening span, or at the end of the line doesn't seem to make any difference. Placing it where I did simplifies the markup process, however. (I know, one is an emply span with a padding, followed by the text and the other is a span with padding that encloses the text. It still doesn't seem to display any differently).
Each stanza of a poem would be a separate paragraph of class "poem".

This seems to work fine in IE, Firefox and Opera. One problem with this method is that Mobipocket does not seem to support this. Using margin-left in place of padding-left doesn't work with Mobipocket either. A zillion nbsp tags will work, but I'm not willing to mark things up that way. Not only is is a PITA to markup, but it is a very ugly solution IMO.

Question: Is it OK to use "poem" as a class selector for two different tags that have different properties, as I did? It seems to work without any problems.

04-03-2008, 06:31 AM	#22
jgray Fanatic Posts: 554 Karma: 2928497 Join Date: Mar 2008 Device: Clara 2E & Sage	More on formatting poetry I had already come up with a workable method of formatting the poetry in Forest Runes and posted the result to my web site. However, I wasn't completely satisfied. I thought that there must be a better way to do this. After doing some additional pondering and Googling, I see that quite a few people have wrestled with the problem of formattting poetry for the web. In any event, I have what I think is a slightly better variation on the method that I had already used. I would like to get some comments and suggestions on possible improvements. What I don't want to do is to use numerous nbsp tags for indents. Note that any suggestions have to allow for multiple levels of indent to be applied to individual lines of a stanza. Also, the less markup needed, the better. Here is my current example. Code: <html> <head> <title>Poetry Test</title> <style type="text/css"> .indent1 { padding-left: 1.2em; } .indent2 { padding-left: 6.0em; } body { font-family: Georgia, serif; } div.poem { white-space: nowrap; } h1 { margin-top: 0.4em; text-align: center; font-size: 1.2em; } p {text-indent: 1.2em; } p.poem { text-indent: 0; } </style> </head> <body> <h1>SUNRISE IN THE FOREST</h1> <div class="poem"> <p class="poem">THE zephyrs of morning are stirring the larches, <br /><span class="indent1"></span>And, lazily lifting, the mist rolls away. <br />A paean of praise thro’ the dim forest arches <br /><span class="indent1"></span>Is ringing, to welcome the advent of day. <br /><span class="indent2"></span>Is loftily ringing, <br /><span class="indent2"></span>Exultingly ringing, <br />From the height where a little brown songster is clinging, <br /><span class="indent1"></span>The top of a hemlock, the uttermost spray. </p> </div> </body> </html> A few notes: I didn't know about "whitespace: nowrap" before. This takes care of preventing a long line from breaking. Placing the closing span tag immediately after the opening span, or at the end of the line doesn't seem to make any difference. Placing it where I did simplifies the markup process, however. (I know, one is an emply span with a padding, followed by the text and the other is a span with padding that encloses the text. It still doesn't seem to display any differently). Each stanza of a poem would be a separate paragraph of class "poem". This seems to work fine in IE, Firefox and Opera. One problem with this method is that Mobipocket does not seem to support this. Using margin-left in place of padding-left doesn't work with Mobipocket either. A zillion nbsp tags will work, but I'm not willing to mark things up that way. Not only is is a PITA to markup, but it is a very ugly solution IMO. Question: Is it OK to use "poem" as a class selector for two different tags that have different properties, as I did? It seems to work without any problems. Last edited by jgray; 04-03-2008 at 06:40 AM.