The ISA-Bus

One blog to bind them all.

Poetry and CSS3

I’ve made a little experiment. I formatted one of my favorite poems by Christina Rossetti with all the bells and whistles CSS3 offers, box shadows, rounded corners, embedded fonts. The experimental thing about it is that all the formatting is done in the style sheet only. If you look at the source, you will find no HTML tags in the text at all, just the title and the link to the style sheet at the top.

The style sheet isn’t all too complicated either. There are different background properties for HTML and BODY, and the following body properties are important to make it work:

        white-space: pre-wrap; /* See update */
        max-width: 600px;
        margin: auto;

The first of these three lines ensures that the poem is formatted correctly, the other two, along with the different background properties, create the centered slab on which the poem appears to be written.

Note that the different background properties work even though I did not explicitly set HTML and BODY tags. I’ve tested it in Firefox, Chrome and Safari. I have no recent version of Internet Explorer, but the font embedding won’t work here because it’s an OTF, and that will break the layout, because the standard font won’t fit into the max-width. Instead of a max-width, I could have set display: inline, but then I couldn’t have centered it any more.

It’s just an experiment. I find it interesting that with judicious use of CSS it is possible to minimize the needed HTML markup.

Update: PRE-WRAP

I have changed white-space from pre to pre-wrap. That way, white space and new lines are still preserved, but additionally the text will break as necessary. It still won’t look very good of course, since newlines created this way aren’t indented or right-aligned as they should be in a poem, there is no CSS command for that.

This kind of behavior could be achieved by putting each line into a paragraph or div of its own, setting a wide left margin and a negative text-indent of the same value as the margin, but that was not what I wanted to try out here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: