July 20, 2006

Poetry in blogs

I had a request for advice on how to format poems in blogs. This can be achieved with the addition of a little css code.

There's a lot of poetry in Warwick Blogs. I will refrain from making aesthetic judgements on a literary form that I know little about. So here's a poem by Pablo Neruda, assuming that his work is the kind of thing that slightly romantic motorcyle travellers should recite. It is followed by details of the css code and how to use it.


‘Leaning into the afternoon’
VII From:’ Veinte poemas de amor’

Leaning into the afternoon, I cast my saddened nets,
towards your oceanic eyes.

There, in the highest fire, my solitude unrolls and ignites,
arms flailing like a drowning man’s.

I send out crimson flares across your distant eyes,
that swell like the waves, at the base of a lighthouse.

You only guard darkness, far–off woman of mine,
from your gaze the shore of trepidation sometimes emerges.

Leaning towards afternoon, I fling my saddened nets,
                     into the sea, your eyes of ocean trouble.

The night–birds peck at the early stars,
that glitter as my soul does, while it loves you.

The night gallops, on its mare of shadows,
spilling blue silken tassels of corn, over the fields.


…OK, time to forget those silken tassles and the far–off woman. What about the css? A while ago it became possible for blog owners to add extra styles to their blogs using the CSS language. To do this, you create a named style with a definition of what that style is like, and copy that definition into the textbox at the bottom of the Appearance page in the Admin section of your blog. In this case, I have added a defintion called "poetry". It looks like this:

.poetry {margin-left:100px; margin-right:50px; font-family:verdana}

The effect of this is to indent the poem text 100px from the left of the blog entry, 50px from the right, and with the font verdana. You can adjust these as required, or leave out elements of the style such as the font. I have written a previous entry on doing this in Warwick Blogs for other effects such as highlighting. A good place to find out about css and other style attributes is the W3Schools css documentation and tutorials.

To apply this style to the poem text, the whole block of text needs to be wrapped in a "div" element with the class "poetry". In the blogbuilder entry editor, this looks as follows:

<div class="poetry">
Leaning into the afternoon, I cast my saddened nets,
towards your oceanic eyes.
…more lines of poetry
</div>

Warning!: make sure that you don't forget the closing </div> tag, otherwise your whole blog will end up looking rather odd.


Robert O'Toole : 20 Jul 2006 06:06 |  Tags:   |  Comments (5) |  Report a problem

- 5 comments by 2 or more people Not publicly viewable

  1. Um. Why not just use a blockquote element? Instant indentation and actual semantic meaning... Failing that, use a p rather than a div, since, guess what, that's a paragraph of text you have there.

    20 Jul 2006, 11:02

  2. Robert O'Toole

    Thanks Catherine. To answer your questions:

    1. the blockqoute style is defined in many blog styles as having qoutation marks at the start and the end. A poetry qoute is different, and should be treated differently;
    2. it is possible to override that style, but that then changes the blockqoutes;
    3. the poetry text is not a paragraph of text, it is in fact several paragraphs, so it makes sense to wrap them in a single tag at the start and the end;
    4. using css in this way gives you much more control and potential stylings.

    20 Jul 2006, 11:42

  3. Robert O'Toole

    But what about the poetry? Does it not stir the passions?

    20 Jul 2006, 12:00

  4. The poetry is very good, sorry for not mentioning it before :–)

    I take your point about multiple paragraphs of text, I hadn't considered that. Basically though, instead of <div class="poetry"> you can use <blockquote class="poetry">. You can override the quotation marks and do anything else you like to the element with blockquote.poetry in your CSS, or even the plain old .poetry you're already using. It won't change the other blockquotes.

    20 Jul 2006, 12:25

  5. Robert O'Toole

    As often is the case with HTML and CSS there are many routes to the same affect.

    ps. it's not my poetry, honest! Neruda.

    20 Jul 2006, 12:33

Add a comment

You are not allowed to comment on this entry as it has restricted commenting permissions.