Page 1 of 1

[SORTA-SOLVED]Poetry in HTML - P tags aren't right...

Posted: Sun May 29, 2005 3:50 pm
by Ambush Commander
Since I run a "fiction-publishing" type of site, I have to handle fiction and poetry. Currently, I'm redeveloping my paragraph() function. What does it do? It, as it suggests, takes plain or HTML text and then turns it into paragraphs. Originally, I did it all via <br />s, but now I want to have contextual paragraphs, and I'm taking to wrapping them in <p>s.

This is all fine and dandy when it doesn't really matter whether or not there's a space between paragraphs (like just now), but what about poetry?

Code: Select all

When I happened to ask this brain,
he seemed to be under a great strain.
When he answered my question, which was thirty one hours later,
When he called in a waiter.

The waiter went into a trance,
And poked me with her large lance.
Then she told the whole story,
A true one that was extremely gory.
Okay, here is our cleartext. Each line is well defined, and it would be nice if I could operate on each line. You can use P tags for this, doing something like this:

Code: Select all

P {margin:1.3em 0;} /*The Default*/
.np {margin:0;}

Code: Select all

&lt;p class=&quote;np&quote;&gt;When I happened to ask this brain,&lt;/p&gt;
&lt;p class=&quote;np&quote;&gt;he seemed to be under a great strain.&lt;/p&gt;
&lt;p class=&quote;np&quote;&gt;When he answered my question, which was thirty one hours later,&lt;/p&gt;
&lt;p class=&quote;np&quote;&gt;When he called in a waiter.&lt;/p&gt;
&lt;p class=&quote;np&quote;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p class=&quote;np&quote;&gt;The waiter went into a trance,&lt;/p&gt;
&lt;p class=&quote;np&quote;&gt;And poked me with her large lance.&lt;/p&gt;
&lt;p class=&quote;np&quote;&gt;Then she told the whole story,&lt;/p&gt;
&lt;p class=&quote;np&quote;&gt;A true one that was extremely gory.&lt;/p&gt;
But this is unacceptable, because if you were to copy and paste the text, it would have spaces between them: not good.

Taking another look at the HTML 4.1 spec ( http://www.w3.org/TR/REC-html40/struct/text.html specifically ), one sees no other way to divvy up the lines. That presents us with two options:

Parse it like this:

Code: Select all

&lt;p&gt;
When I happened to ask this brain,&lt;br /&gt;
he seemed to be under a great strain.&lt;br /&gt;
When he answered my question, which was thirty one hours later,&lt;br /&gt;
When he called in a waiter.&lt;br /&gt;
&lt;/p&gt;
&lt;p&gt;
The waiter went into a trance,&lt;br /&gt;
And poked me with her large lance.&lt;br /&gt;
Then she told the whole story,&lt;br /&gt;
A true one that was extremely gory.&lt;br /&gt;
&lt;/p&gt;
Which treats the stanza as a coherent entity with linebreaks, or

Code: Select all

&lt;div class=&quote;stanza&quote;&gt;
&lt;div&gt;When I happened to ask this brain,&lt;/div&gt;
&lt;div&gt;he seemed to be under a great strain.&lt;/div&gt;
&lt;div&gt;When he answered my question, which was thirty one hours later,&lt;/div&gt;
&lt;div&gt;When he called in a waiter.&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quote;stanza&quote;&gt;
&lt;div&gt;The waiter went into a trance,&lt;/div&gt;
&lt;div&gt;And poked me with her large lance.&lt;/div&gt;
&lt;div&gt;Then she told the whole story,&lt;/div&gt;
&lt;div&gt;A true one that was extremely gory.&lt;/div&gt;
&lt;/div&gt;
The stanza classes putting in the vertical margins. Unfortunantely, this isn't satisfactory either because:

1. We still lose our "stanza space" when we copy and paste
2. The contextual meaning of <div> is null

Is there a solution to this problem? What would you recommend I do?

Posted: Wed Jun 01, 2005 1:04 pm
by wwwapu
If you wish to avoid <br>:s you could do it with <p> and <span> like this:

Code: Select all

&lt;p class=&quote;stanza&quote;&gt;
&lt;span&gt;When I happened to ask this brain,&lt;/span&gt;
&lt;span&gt;he seemed to be under a great strain.&lt;/span&gt;
&lt;span&gt;When he answered my question, which was thirty one hours later,&lt;/span&gt;
&lt;span&gt;When he called in a waiter.&lt;/span&gt;
&lt;/p&gt;
 
&lt;p class=&quote;stanza&quote;&gt;
&lt;span style=&quote;display: block;&quote;&gt;The waiter went into a trance,&lt;/span&gt;
&lt;span style=&quote;display: block;&quote;&gt;And poked me with her large lance.&lt;/span&gt;
&lt;span style=&quote;display: block;&quote;&gt;Then she told the whole story,&lt;/span&gt;
&lt;span style=&quote;display: block;&quote;&gt;A true one that was extremely gory.&lt;/span&gt;
&lt;/p&gt;
Of course this is not enough. You have to set style for the span, or their class.

Code: Select all

&lt;style type=&quote;text/css&quote;&gt;
span{
	display: block;
}
&lt;/style&gt;
[EDIT]
or you could use <pre> as there is example about poetry at http://www.w3.org/TR/REC-html40/struct/ ... l#edef-PRE

Posted: Wed Jun 01, 2005 2:17 pm
by Ambush Commander
PRE is a possibility, as it was designed for that purpose. Hmm... the problem with using <span> is that it has virtually no context... but I forgot about the display element! That might be helpful. Thanks, I'm going to put this down as solved, but if anyone else has solutions, fire away.