Pause Press Books

"The days of the life of man may be numbered." ––Wisdom of Jesus Son of Sirach

Bikini shot

by Wendell

Now I have your attention …

The barest extensions to WordPress ought to be able to support minimal formatting for verse.

To this blog I have appended customized CSS in order to achieve this. The mechanism is (so-called) HTML microformatting. Plain old HTML code is used as cleanly as possible; assignments to ‘class’ attributes, where necessary, indicate where specialized formatting should be applied. All of this is done in the reader’s browser; what we are doing is giving WordPress a few extra instructions to deliver, with the content, to that device.

To make this work on stuff you insert, under the “Text” tab in your editing window, provide literal HTML (not so-called WordPress “shorttags”) wrapping the bits of verse, kind of like so …

<div class="verse">
  <p>DAUGHTERS of Beulah! Muses who inspire the Poet's Song,</p>
  <p>Record the journey of immortal Milton thro' your Realms</p>
  <p>Of terror &amp; mild moony lustre, in soft sexual delusions</p>
  <p>Of varied beauty, to delight the wanderer and repose</p>
  <p>His burning thirst &amp; freezing hunger! Come into my hand</p>
  <p>By your mild power; descending down the Nerves of my right arm</p>
  <p>From out the Portals of my Brain, where by your ministry</p>
  <p>The Eternal Great Humanity Divine planted his Paradise,</p>
  <p>And in it caus'd the Spectres of the Dead to take sweet form</p>
  <p>In likeness of himself.</p>
</div>

This comes out like this:

DAUGHTERS of Beulah! Muses who inspire the Poet’s Song,

Record the journey of immortal Milton thro’ your Realms

Of terror & mild moony lustre, in soft sexual delusions

Of varied beauty, to delight the wanderer and repose

His burning thirst & freezing hunger! Come into my hand

By your mild power; descending down the Nerves of my right arm

From out the Portals of my Brain, where by your ministry

The Eternal Great Humanity Divine planted his Paradise,

And in it caus’d the Spectres of the Dead to take sweet form

In likeness of himself.

Note—one feature of the code that drives this is that lines will automatically be wrapped with a hanging indent. That is, where verse lines are too long for typographic lines, they will be continued with indents in subsequent (typographic) lines.

This may not be evident in your display, depending on what other controls are in place governing line length. (In this blog you won’t be able to see this feature since the page width is hard coded. But in other environments, it’s important, and even here it will be useful where lines get really really long.)

Note also! if you don’t use the <p>...<p> tagging you have to insert extra lines (i.e., between each line of verse there must be a blank line in the editor), or WordPress will botch it.

This is because we are having to get around some bogus functionality in WordPress. Where it sees two lines with only line breaks between (i.e., no extra lines), it inserts line breaks. But we don’t want line breaks; we want honest elements in our HTML, onto which we can hang styling.

Next is to provide some extra indentation. So:

<div class="verse">
  <p>THERE was a time when meadow, grove, and stream,</p>
  <p class="in1">The earth, and every common sight,</p>
  <p class="in3">To me did seem</p>
  <p class="in1">Apparell'd in celestial light,</p>
  <p>The glory and the freshness of a dream.</p>
  <p>It is not now as it hath been of yore;—</p>
  <p class="in2">Turn wheresoe'er I may,</p>
  <p class="in3">By night or day,</p>
  <p>The things which I have seen I now can see no more.</p>
</div>

which will look like this:

THERE was a time when meadow, grove, and stream,

The earth, and every common sight,

To me did seem

Apparell’d in celestial light,

The glory and the freshness of a dream.

It is not now as it hath been of yore;—

Turn wheresoe’er I may,

By night or day,

The things which I have seen I now can see no more.

The extra indent results from the class assignment on the p. Things are currently configured so that in values up to “in10” should work.

The challenges of this approach:

  • The HTML itself has to be clean and clear enough that WordPress doesn’t strip it. So far we’ve managed this by using simple div and p elements — which seems to work.
  • The CSS in back has to be designed to work well along with the CSS provided by WordPress and its active Theme. This can be a bit of a trick.

“Expression is the main fight.”

by Mark

“Then you should start with no skeleton or plan. The natural one will grow as you work.” —Emerson

Detail, dedicatory page, 1890 edition. “Talks With Emerson.” London: Kegan Paul.