Year: 2010

CONTENTS

• Introduction
• Using Images
• What About “Invisible” Dots?
• The Mighty Pre Tag
• Non-Breaking Spaces, Span Padding, and Empty Paragraphs
• Using CSS to Whip Poetic Lines Into Shape

Introduction

Web content is written in HTML, which stands for hypertext markup language. Your browser (Internet Explorer, Safari, Firefox, Chrome, etc., including whatever the hell your mobile device uses) parses this to produce the text and images you see. HTML can be styled any number of ways, but a couple widespread conventions are friendly to poetry: paragraphs are almost universally separated by spaces, as stanzas are in poetry, and it’s unusual for the first line of a paragraph to be indented, though special code does exist to do that (more on that later). And poets who like to center their text or present it in fully justified rectangular blocks are in luck: those are things HTML does very easily.

Aside from that, though, HTML is not particularly poetry-friendly, and special measures are required to preserve a lot of the formatting which an earlier technology, the typewriter, made all too easy. Web developers have created some awesome, easy-to-use web publishing tools which are democratizing poetry publication and helping us reach new audiences in an unprecedented manner, but we poets and online magazine editors still struggle to figure out how to post anything more complicated than simple, left-justified stanzas with short lines. I’ve even seen some literary magazines that advise authors not to submit anything that can’t be easily formatted!

One problem is that many poets like to space text across the page in unconventional manners or indent lines in various ways, but HTML will not reproduce more than two consecutive spaces in a row without special coding. If online poets represented a numerically significant proportion of web content creators, there might be a blogging platform or content management system (CMS) just for us, with a poetry-attuned visual editor in which one could add intraline spaces merely by clicking an icon, in the same way one adds italics, links, underlines, etc. But in fact I can’t even find a WordPress plugin that does this, among all the thousands of plugins out there, which is especially galling considering that for its entire history, WordPress has used the slogan, “Code is Poetry.” I call bullshit on the self-styled code poets at WordPress.

A second problem concerns interline spaces, which different blogging and CMS systems approach in different ways. In most visual or WYSIWYG (“what you see is what you get”) editors, a hard return skips a line, so poets have to either compose in the code editor if they want single-spaced text, or paste their text in from a text editor on their computer. (Of course, if it’s a Word document, you have to first copy and paste into a text editor such as Notepad to remove all the extraneous bits of mystery-meat Microsoft code. Never paste directly from Word into the visual editor of a blog, CMS, or other website creation system! If you’re using WordPress, the visual editor includes a tool to paste from Word, which preserves universal code, such as that for italics and bold type, while stripping out all the B.S. code.)

A third and more intractable problem concerns the formatting of lines too long for the content space. Current versions of HTML make no distinction between prose and poetry, so all text wraps in the same way — there’s no out-of-the-box way to indent the continuation of a line as is customary for printed poems. In fact, lines don’t even exist as separate entities in HTML!
(Back to top)

Using Images

One solution favored by some web publishers is to turn difficult-to-format poems into JPEGs or other image files, and publish those instead of text. The problem is that this renders the poem invisible to search engines and to the visually impaired, who use devices called screen readers to access web content. You can get around the problem by putting the text of the poem into the image code using the alt attribution, but this is really only practical for short poems such as those included in haiga or poetry postcards — genres where presentation in image form is of course essential.

“Alt” stands for “alternate text,” the text that appears when the image either isn’t visible or hasn’t loaded yet (still a common situation for many people in rural locations with slow, dial-up connections). It’s not to be confused with the mouseover text, which can be identical but has to be included separately using the title attribute. For optimal usability, include a descriptive term such as “poem” or “poetry postcard” in the alt text. Here’s an example from my “Postcards from a Conquistador” series, for a poem called “Misfit“:

<img src="http://www.vianegativa.us/wp-content/uploads/2008/12/postcard-from-a-conquistador-9.jpg" border="1" alt="Poem: I was the village misfit, the one who refused to stop dreaming. I could be an entrepreneur, they said, accountable only to the crown. Those who brought daggers were given swords. Those who brought nothing were stripped and beaten." />

Since this article is about publishing to the web, I won’t get into other formats that can be shared on the web, such as PDFs and the new ebook/ezine platforms that build upon them. But from time to time I see online poetry magazines sharing all their textual content via images, and I have to wonder why the heck they aren’t just using Issuu or Scribd.
(Back to top)

What About “Invisible” Dots?

Another quick-and-dirty solution to the spacing problem is to hold the spaces with dots (using the period key) or other type elements, then use the visual editor’s font color tool to white them out, rendering them invisible to most readers — except, again, those using screen readers, who presumably hear a lot of “dot dot dot” in such poems and assume the poet is afflicted with a bad case of ellipsisitis. Also, this only really works if your blog or website’s background is white. Sure, you can turn text the same color as any background, but anyone who accesses your content via feed reader or email subscription is going to see it, unless you also specially style the background for each and every page or post you publish, because the default background in probably every feed reader happens to be white. And some content re-publishers strip out such styling in any case — those text excerpts that appear with a link in Facebook, for example. So I think this is kind of a dotty approach.
(Back to top)

The Mighty Pre Tag

A poem by Daniela Elza which we just published as part of qarrtsiluni‘s current New Classics issue, “Andy Warhol (The Vancouver Art Gallery, 2004),” contains a lot of intraline spaces, and Daniela mentioned that her usual advice to editors wondering how to format such a poem is to wrap it in pre tags. I told her we usually take a different approach, but she’s right: that is indeed the quickest and easiest way to preserve intraline and interline spaces in a block of text. In my web research for this article, I found a lot of geeks in various fora offering the same advice to people inquiring about how to format poems.

Pre is short for presentation, and the whole purpose of the tag is to preserve the formatting of whatever text it encloses. The trouble is that in most browsers, presentation tags are displayed using a monospaced font, e.g. Courier or Courier New. But you can add a style definition to make it display in the same font as the rest of your site. In the case of Via Negativa, with the present blog theme, that’s Georgia. Let’s use the first several lines of Daniela’s poem to illustrate. I’ll wrap the text in pre tags as follows:

<pre style="font-family:Georgia,serif;">[text of poem]<pre>

Here’s the result:

"an i.con   turned    around
upside d.own     until      it does not

make sense.
until    symbol is    b.led from

the hammer and the sick.le—
they lie flat    as if the workers were

in a hurry for their lunch break.     and
someone forgot their shoe in the picture."

If you’re comfortable editing CSS (cascading stylesheets, which control site-wide HTML appearance on most modern websites and blogs), you could achieve the same thing by adding a new class, such as:

pre.poem {font-family: Georgia, 'Times New Roman', Serif;}

and then calling it up as follows:

<pre class="poem">

The trouble with the CSS approach is that it doesn’t change what people see in their feeds, so the first approach is a little better, if less elegant. But that’s not perfect either, because if everything else is in Arial — as it generally is in a feed reader — and the poem appears in Georgia or Times New Roman, that’s almost as wrong-looking as if you’d just used unmodified pre tags and let the poem appear in Courier. (Evidently RSS feeds can be styled through something called an XSL stylesheet, but I don’t know of any easy tools to help us do that.)

Pre tags can also be used for poems with extra-long lines, to prevent them from wrapping, but the results can be ungainly. Here’s a small section from “An Irish Blessing” by M.V. Montgomery, published in qarrtsiluni‘s Words of Power issue, without any special formatting added:

“May your appetite be hearty and the waistband of your trousers slack. May there be
no household project to ever get the better of you. May you shit out the colon cancer
if it starts to grow back, and then may the doctors go broke trying to find anything else
wrong with you.”

You see the problem? In qarrtsiluni itself, our extra-wide main column and smallish font prevent these lines from wrapping, but not so here. Well, what happens when we apply our pre-tag solution?

"May your appetite be hearty and the waistband of your trousers slack. May there be
no household project to ever get the better of you. May you shit out the colon cancer
if it starts to grow back, and then may the doctors go broke trying to find anything else
wrong with you."

This might not look too bad, but that’s only because this is a lengthy post and we’re already past the bottom of the sidebar. Otherwise, the ends of those lines would disappear under it. Pre tags are not a very elegant solution for formatting poems with long lines.

(UPDATE 6/24/10) However, with CSS you can change the overflow property from the default “visible” to “scroll” for a special “poem” pre class. In layman’s terms, you turn the content area into a box with a scroll bar rather than letting the content spill beyond the confines of the area (which is what “visible” means). Let’s try it! I’ve added this code to Via Negativa’s CSS:

pre.poem {font-family: Georgia, 'Times New Roman', Serif; overflow:scroll;}

Now let’s wrap the M.V. Montgomery text in pre tags as shown above, <pre class="poem">[text]<pre>.

"May your appetite be hearty and the waistband of your trousers slack. May there be
no household project to ever get the better of you. May you shit out the colon cancer
if it starts to grow back, and then may the doctors go broke trying to find anything else
wrong with you."

(Back to top)

Non-Breaking Spaces, Span Padding, and Empty Paragraphs

There’s really one canonical way to add extra spaces to a line in HTML, and that’s with the character entity called a non-breaking space, which is written  . (It’s called that because it was designed not to format poetry but to keep a two-word combination from breaking in the middle if it happens to appear at the end of a line; inserting a   between the two words forces them to be treated as a single unit.) For smaller gaps in poems, strings of non-breaking spaces can certainly work. I believe all modern browsers correctly recognize and reproduce such strings. For example, to format the Daniela Elza excerpt I’ve been using, I’d type something like this:

an i.con     turned      around
upside d.own       until       it does not

make sense.
until      symbol is      b.led from

the hammer and the sick.le—
they lie flat       as if the workers were

in a hurry for their lunch break.       and
someone forgot their shoe in the picture.

Even though copying and pasting strings of non-breaking space entities can make it go relatively quickly, the resulting code is hell to look at and keep track of for poems with really deep indents or large spaces. You have to use a text editor (for Windows users, try Notepad — it’s under Accessories) and expand it to full screen width.

(UPDATE 6/24) Andre Tan left a comment that makes a couple of valuable suggestions:

One tip regarding non-breaking spaces is to format with standard spaces in Word (or your text editor of choice) and “Find and Replace” all ” ” (a single space) with   or better yet  . Technically speaking,   isn’t valid XML, so they can potentially cause finicky RSS readers to balk or spit out “double-escaped” text (i.e.,  ).

In Notepad, use “Replace” from the Edit drop-down menu to do the find-and-replace action Andre mentions. A huge time-saver! (Why didn’t I think of that?)

His other suggestion makes a point I was totally unaware of. XML is the language in which RSS feeds are written. The code he suggests as an alternative to  ,  , is simply the alternate, numerical way of writing it. (Many character entities in HTML can be written in two different ways, and I tend to favor the abbreviated name rather than the number simply because it’s easier to remember. Here’s the reference guide I use.)

I think this approach — the insertion of non-breaking spaces — would be the way to go for an automated system such as that WordPress plugin I’m fantasizing about, but unless and until we get that, I’m going to stick with the less ungainly approach I use at qarrtsiluni: using special padding definitions. Here is what I actually posted into the code editor screen for our post of Daniela’s poem:

an i.con <span style="padding-left:15px;">turned</span> <span style="padding-left:20px;">around</span>
upside d.own <span style="padding-left:35px;">until</span> <span style="padding-left:30px;">it does not</span>

make sense.
until <span style="padding-left:30px;">symbol is</span> <span style="padding-left:30px;">b.led from</span>

the hammer and the sick.le—
they lie flat <span style="padding-left:20px;">as if the workers were</span>

in a hurry for their lunch break.

What I’m doing there is probably pretty self-explanatory. Span tags exist solely to apply styling to a unit of text of any size; it doesn’t otherwise affect the look of it. (If the same styling were included in a p tag, it would indent the whole paragraph, but with span, it only applies the padding at the beginning of the enclosed area.) Using pixels allows pretty fine-grained control, but remember that the spacing will not remain consistent if font and font-size are altered at some point. So by adopting this approach, I’ve pretty much locked us into our current font. But it’s much easier to deal with than strings of  s.

(UPDATE 6/30) One could define the spaces with ems instead of pixels, as Adam Chambers points out in a comment. Ems are used for proportional rather than absolute spacing, so they tend to remain much more consistent with changes in font style and size. They are equal to the height of a capital M in a website’s base font (whence the name). See CSS: Units of Measurement.

I mentioned in the introduction that extra interline spaces are relatively easy to code. In Blogger, you don’t have to worry about it because the visual editor will preserve all the hard returns in a row you want to enter, coding them as linebreak tags (<br /> or <br>). In most other web publishing platforms, columns of br tags will be removed, so what you have to use instead are empty paragraphs — or to be more specific, paragraphs that consist of a single non-breaking space. They look like this:

<p>&nbsp;</p>

and you can stack them as high as you want.
(Back to top)

Using CSS to Whip Poetic Lines Into Shape

The only ways I’ve found to make long lines of poetry properly indent on the wrap involve CSS. I’m not saying it can’t be done in HTML, because my coding skills are pretty unexceptional, but I wasn’t able to figure anything out. (If you know of any tricks, please leave a comment!)

This approach takes advantage of the text-indent property, which was added mainly for designers who want traditional paragraphs, but as it says in the tutorial I just linked, negative values are allowed, too. So in your CSS you define special classes for stanzas (or whole poems) and for lines, use padding or margin definitions to indent the stanzas by whatever amount you want wrapping lines to indent, then assign the same amount in a negative value to the lines using text-indent.

This is probably easier to show than to explain. I’ve added the following to the Via Negativa stylesheet:

.stanza {padding-left:30px;}
.line {text-indent:-30px;}

So I type this:

<div class="stanza">
<div class="line">"May your appetite be hearty and the waistband of your trousers slack. May there be</div>
<div class="line">no household project to ever get the better of you. May you shit out the colon cancer</div>
<div class="line">if it starts to grow back, and then may the doctors go broke trying to find anything else</div>
<div class="line">wrong with you." </div>
</div>

And here’s what we get (shrink the width of the window to watch them indent):

This isn’t the only possible CSS solution — you could create a special class of unordered lists, for example — but I believe it’s the one that best takes the semantic web into account. But that’s a topic best left for another article.
(Back to top)

UPDATE (8/25/10): I didn’t cover the problem of how to center a block of text on the longest line, which is a useful thing to know how to do in presenting poetry. See Poetry and Verse in the HTML Page for tips. (Thanks to the author for bringing this to our attention in a comment below.)