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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

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

Post 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?
Last edited by Ambush Commander on Wed Jun 01, 2005 2:18 pm, edited 1 time in total.
User avatar
wwwapu
Forum Contributor
Posts: 197
Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland

Post 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
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post 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.
Post Reply