- 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
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)
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="https://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)
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)
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."
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.,&nbsp;).
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> </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.)
Very helpful, thanks! I’ve bookmarked it; I may attempt that CSS solution. Up to now, I’ve used . It makes for really messy code, though, which gives me hives.
Yeah, I hear you. Glad you found this useful. (I take it you wrote
and it got converted into an actual space there.)This is a great article addressing a very gnarly issue, Dave.
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., “&nbsp;”)
But as you’ve mentioned, it’s all a house of cards and any number of variables can and will change the final presentation.
That should read “or better yet & #160;” without the space between the ampersand and pound sign.
Thanks, Andre! I will update the post to include this tip, since you can’t count on folks to read the comments. I was hoping to hear from experts like yourself.
Wow, this is really thorough. I don’t use intraline spacing often, but I think in the WP wysiwyg editor, there’s an icon that can be used to add those spaces. The indent icon maybe? I can’t remember which it was, but it seemed to work pretty well.
I like the CSS tip for coding poems with really long lines. I may add that to my site since I’ve been playing with the CSS anyway lately to convert my dropdown menus to take advantage of the new dropdown menu functionality built into WP 3.0.
Yes, the WP visual editor has an indent/tab icon, but it’s only for paragraphs (or single lines isolated as paragraphs). It adds 30 pixels to the left each time you click it, and was in fact the inspiration for my span padding approach when WordPress introduced it two years ago.
I too have been doing a lot of CSS-messing since WP 3.0 came out, though dropdown menus aren’t a feature I need for this site. I’m working on a child theme for Twenty Ten, basically importing styles from this theme and another one I like, but I’m no hurry — it’s mostly for my own amusement.
Anyway, glad you found that CSS tip helpful. I never write poems with long lines myself, so I added that code to my stylesheet solely for the purpose of this tutorial. Actually, my poems are so boringly conventional (left-aligned, hardly ever any indents or extra spaces), I never would’ve made a study of any of this were it not for my activities at qarrtsiluni.
I laughed about doing this stuff for one’s own amusement as that’s probably the main reason I fiddle with my code so much. I probably don’t need drop downs either (or some other things my site does) but I really wanted to know how it was done. In some ways, I think it’s a bit like being one of those shade-tree mechanics, except I’m endlessly tuning up my blog.
Yeah, good analogy!
Fun. I played for about an hour one time, trying to come up with an html solution for long lines, using that same basic approach — define the standard as indented and then make each line an exception with a negative indent — but I got exasperated about something & quit.
It’s odd that this should be awkward, because most program code is written in lines, just as poetry is; it’s not an unfamiliar problem to coders.
True. I guess when they were developing HTML, they were focused on trying to keep it as simple and practical as possible, and probably none of the architects were poetry readers (though Tim Berners-Lee does seem like a very literate guy).
Very helpful. Thanks for making the effort.
You’re welcome! It was exhausting but fun to compile all this.
O.K., I added another update, this time to the <Pre> section, about adding the
overflow:scrollproperty to the stylesheet. I know a lot of people consider horizontal scroll bars an example of poor usability, but I kind of like them.I was wondering if I was the only one who struggled with this. I’ve used the “dot dot dot” method and, more regularly, the non-breaking spaces, especially last month when frequently quoting chunks of Charles Wright proved to be a big challenge. I have four browsers on my Mac, and one of them (I forget which) always displays the spaces as being wider than the other three do. Rough justice.
Peter, if you could find out which browser does that, it might make a good addition to the post.
I had it backwards. In Mac OS X 10.5.8, Firefox 3.6.3 renders non-breaking spaces narrower than do Safari 5.0, Chrome 5.0.375.86, and Opera 10.53. Safari, Chrome, and Opera render the spaces about the same. (Internet Explorer, of course, is not available for Mac OS X.) (I always make it pretty for Safari, still the most popular browser on Mac, and with this month’s release of 5.0, now faster than even Chrome. I have no easy way of checking how verse on my site looks on browsers written for other operating systems.)
I’d suggest trying browsershots.org. It’s a handy tool under the right conditions.
Thanks, Andre! Ignorance was bliss: I had no idea my fonts looked so attenuated on IE. I’m thinking of putting a note at the top of my site suggesting that readers download SeaMonkey, which I now think renders my site the best. They’ll need to install the FreeBSD 7.1 OS, too; I don’t have too many readers, but they’re pretty loyal. I’ll provide links to both downloads to make it easier.
Thanks, Peter. I haven’t noticed any differences on Windows.
And thanks Andre for that link. I did use browsershots.org once, but failed to bookmark the site. It was fun seeing how my site looked on some of the more obscure browsers such as Ice Weasel.
This is such a great resource, Dave. I (like Peter) have used the dot dot dot method and hate the clumsiness.
Thanks for all the work that went into this post. You’re a generous poet.
You’re welcome. I don’t imagine the majority of regular readers found it too thrilling, so I’m glad to hear from folks like you and Peter who will actually be able to put some of the tips to use.
Um. Should this be in your “Poetics and Technology” series?
It is. Note the series navigation link at the bottom of the post.
I read “AND IS FILED UNDER POETS AND POETRY” and thought it was in that series. Ah, the cereals won’t be the same with Kellog’s recall.
If I knew PHP better, I might be able to figure out how to list the series right there in the metadata alongside the categories and tags. Your confusion is totally warranted.
Oh lookee, I think I figured it out! Just occurred to me I could poach code from Moving Poems, for which I learned — then promptly forgot — how to code custom taxonomies over a year ago.
Quick note: Your “font-family: Georgia;” should provide a back-up generic specifier for people without that font. Something like “font-family: Georgia,serif;” likely works and falls back to whatever serifed font exists.
(and anyone who calls anything implemented in PHP “poetry” needs smacked upside the head with a clue-by-four)
Let me guess: you’re a Perl guy, right?
Primarily Fortran, C, Octave, and R, with a preference for Lisp. But tons of short Perl programs for data munging. ;)
Excellent suggestion — I’ll put that in. Thanks!
One addendum to your thing with the span tags: using pixels does allow pretty fine-grained control, but if you do the padding in em instead (e.g. ), the spacing should remain relatively consistent over different fonts and sizes.
Yes, good point — I should add that to the tutorial. I’ve thought about changing my habit, but I have this juvenile, semi-innumerate aversion to decimals.
that is (e.g. span-style=”padding-left:5em;”
Thanks for this post. I am not a poet, but I try to get as much local poetry as I can on our Arts Council website, and I hope that this will help with the formatting.
One of the most satisfactory methods of doing the formatting is scanning the poems sent me on paper, and publishing them as JPG. Always comes out just so!
Xian
Yes, indeed. Though as I mentioned, it’s not the best way to get web traffic with the text hidden away in an image.
Thanks for commenting. I’m always cheered to hear about poems appearing in venues where they’ll be seen by more than just other poets.
you can keep the image in place and put the text in a div with a class, and have a css rule that puts the left margin out -2500 ( negative left offset). engine will see it. But i am really not in favor of that. i think using a pdf reader (viewer) will keep everything just so, and Google likes pdf over regular text ( it thinks it is technical stuff).
Yeah, the way Google treats PDFs has certainly changed for the better since this post was written. Generally speaking, I favor open web standards over requiring users to download proprietary software such as Adobe Reader, but it is certainly an attractive option for publishers these days, and I’ll admit I have bent my own standards and used PDFs in certain circumstances.
Found a link to this post in the Dumbfoundry blog, and found the information here most interesting. I’m no major code fiend, but can kind of more or less follow most of this.
I write most of my poems with irregular margins on both the left and right sides — I write by hand on paper, and for many many years I typed my poems on a manual typewriter, which worked find. MS Word is okay too, though as you noted here it doesn’t carry over well into HTML.
I’ve only attempted posting the irregular-margin poems online a few times, and I’ve used the “pre” tag method. This was in a Blogger blog (a group blog I posted in for a while), and I found it worked pretty well. I was able to fix the font with the font button in the text window. Then in the HTML window I just hit the spacebar as many times as it needed to do the indent for each line.
I did find, with the Pre tag, that I needed to hop back and forth many times between the Edit HTML window and the previewer, because the indents (using the spacebar) were a different size in the Edit HTML window than they actually displayed in the blog, because of the difference in fonts. I found that a little cumbersome. But with some patience I did get the poem to look the way I wanted it to.
** One other detail about using the Pre tag — when I did it, I found that I initially needed to type the poem with no stanza breaks, and no line space between the title and the body of the poem. Then after I put the “pre” tag at the beginning and end of the poem, I added the stanza breaks (and line space after the title), and then I added “pre” tags at the beginning and end of each stanza, and the title. It was necessary to do it this way — if I entered the stanza breaks before putting in the “pre” tags, the stanza breaks wouldn’t format right after I applied the tags.
For what it’s worth. Thanks for the good information here.
Hi Lyle – Thanks for that detailed report on your own experience with using Pre tags. Yes, I think adjustment would be needed in almost any platform, and I’m sure that hopping back and forth between edit screen and preview is the best way to do it. I wonder if the stanza-break thing wasn’t due to the peculiar way the blogger post editor codes stanza breaks, using break tags rather than proper paragraph tags? A question for a more tech-savvy person than me.
I will say, parenthetically, that I am deeply grateful to Blogger for its primitiveness and lack of limits on what a user can do (even at risk of screwing up a site): starting out there forced me to learn HTML and CSS, discover the online tutorials from w3schools, and in general lose my fear of monkeying around in templates.
Well, I have been trying for ages to use the ” ” tag to insert non-breaking spaces in my WordPress blog in order to post poems, and though it seems to work as I do it, once I save it (& return from html view to visual) the program strips all the added spaces out again. Most frustrating! I have tried every which way to remedy this, to no avail. I guess there is some major difference between basic website html behavior & the behavior of WordPress blog sites, though logically they should take the same formatting. Any help would be much appreciated.
Oh gosh, I’m sorry, I guess I should’ve added a note (but see, this is why it’s an incomplete guide): you can’t switch back and forth between the HTML editor and the visual editor in WordPress (self-hosted or at WordPress.com, it makes no difference) without losing almost all the formatting! Use the Preview button instead — it will show you changes you’ve made even when you haven’t clicked Save yet.
This is not a bug, apparently — it’s the visual editor working as intended. I read an interview a while back with the guy who adapted it for WordPress, explaining some of these quirks, but I forget the details. My advice, to reiterate, is just to grow comfortable using the HTML editor and Preview, except in rare cases when you want to take advantage of special, time-saving functions on the visual editor such as importing from Word (as mentioned in my post). Do that first, before doing anything else, then switch to the HTML editor and stay there. Until the post is published.
Thanks! — Had noticed that if I stayed in html editor it was okay, but habit of going back to visual editor was too great, so figured that stripping was a bug! Even if I can’t see for the life of me why that should have been intended. Seems pointless, or rather counterproductive. As I say in my second response, using the pre tag works excellently, so i may go with that. Check NOMADICS blog tomorrow when I’ll post a complexly laid out poem by Robert Kelly.
Actually have finally resolved the problem by giving up on the  : tag & started using the mighty “pre” tag — which works, though of course it is a bit more work as it demands re-defining of font & size.
Pierre, doing a little bit of Googling just now has turned up the existence of a WordPress plugin for a souped-up version of the visual editor, which is open-source software called TinyMCE. Thus this plugin is called TinyMCE Advanced. It’s not only being kept very up-to-date, but it was developed by the very person who adapted TinyMCE for WordPress in the first place, Andrew Ozz. I will upload it to Via Negativa and experiment with it as soon as I get a chance — it may do much of what I was fantasizing about for a poetry-friendly WordPress plugin in the piece. If so, I’ll update the guide with a new section. But if you feel like checking it out in the meantime, let us know what you find. I am so used to hacking HTML by now that I might not use such a plugin myself in any case, but it would be great if it solved some of these frustrating formatting issues without requiring users to get elbow-deep in code.
Thanks for this, Dave. I’m apt to get palpitations (and not the good kind) around code, but even I can use some of these.
That’s good to hear! Thanks for commenting.
Thanks so much for this, Dave. I struggle with blog technology, but I will try to improve my poetry posts with some of your tips. I do love using those dotty white dots, though :)
Hi Therese – Glad you found it helpful. You’re exactly the kind of serious poetry blogger I was hoping to encourage.
Dave — have installed TinyMCE Advanced, and it is an improvement over the previous editor. Still, I haven’t been able to find how it could be used to do what we want to do, & which the mighty “pre” tag is able to do. But I am not very handy with a lot of software… Lemme know if you discover any fabulous advances.
Hi Pierre – I did experiment with the plugin a couple days ago. I was most interested in the non-breaking space key, which I’d hoped could be clicked in lieu of using the spacer bar and the spaces would hold after publication. They did hold, as long as they weren’t at the beginning of a line. So it’s useless for indenting. Also, I couldn’t for the life of me figure out how it worked from a technical standpoint — neither the HTML editor nor the page source generated from the draft post showed any HTML for non-breaking spaces. I was flummoxed.
For the other things I talk about in the article, you’d have to write the css and add it to the plugin’s stylesheet, apparently. I didn’t test that funtionality because it seems to me that that kind of technical requirement defeats one of the main purposes of a plugin, which is to simplify things for the average user. Still, I can see a literary magazine making very good use of this plugin.
It does seem like it would be very useful if I were regularly publishing longer articles such as the one above, because of three features: the special characters inserter, the superscript inserter, and the anchor links inserter. (Anchor links are links on the same page, needed for working footnotes or for tables of contents such as the one here: kind of time-consuming to code by hand.)
You have methodically stepped through the various options, but the article is long enough that susceptible people will think each one works. There’s only one approach that does: Valid, semantic markup with correct CSS. You cannot possibly expect the same results in no-CSS view, as that is antithetical to the Web standards on which E-books are based. (E-books are Web pages.)
That’s true. But this article was meant for a much broader audience than just e-book publishers, beginning with my fellow literary bloggers, many of whom are still a bit timid about HTML (to put it mildly), let alone diving into stylesheet editing.
Your piece in A List Apart was very helpful. Thank you. And thanks for the link.
Joe — I tend to agree with what Dave says, and in my small way — a blog I do just about daily but need special indents for poem layouts only every so often — I can get away with the -Pre- tag way of doing things. On the other hand, I would be most interested if you could give us all a sample CSS style sheet for inserting spaces at the beginning of a line of verse and/ or anywhere where needed inside a line.
Please people don’t start your projects in word, it will suck up you abilities and inclination to hand code in html because of the ugliness of it’s saved html files… KISS and start from scratch by copying a favourite layout freely available, called webpages, it’s how we all start.
Anyway, for those moving with the times go read Advanced Poetry XML. Brilliant, all the work has been done, tho one has to check a couple of typos.
And do some revision with Hanging Punctuation.
Thanks for the comment. I discovered that page on advanced poetry xml when I was writing this — very thought-provoking. I hadn’t really considered poetry formatting from the scholarly side of things at all. The suggestions on how to deal with line numbering and notes were very interesting, and the focus on semantics generally.
I must confess I don’t like hanging punctuation. I guess I’m too habituated to the standard web approach, but it just looks wrong to me.
This is only the third (counting my own :)) article I’ve seen that really addresses the correct markup and rendering of poetry for html.
For the most part, it is simply a straight forward process of adding the appropriate semantic tags. Even styling is fairly easy, excepting for IE<8.
I do not address the issues of inserting formatted verse into a blog application with its generic, not suited to purpose editor. To even things out, you don't address the form of centering on the longest line. I invite you to look over Poetry & Verse in the HTML Page. If you find it useful, feel free to use it as you wish (attribution required).
gary
Gary, thanks so much for bringing your page to my attention — I’m sorry I didn’t run across it when I was researching this. Your tip about centering blocks of text on the longest line is indeed very helpful. I’ll update my tutorial to add a link to yours as soon as I get the chance.
Ampersand! http://www.publishersweekly.com/pw/by-topic/industry-news/manufacturing/article/45975-bookmobile-creates-poetry-app.html
Sounds promising! Thanks for the heads-up.
Hallelujah for your article! After spending hours & hours with my WordPress and my Blogger blogs (not that I have that much to say but I am determined to learn) especially with extreme variable left margin poems with many “jump spaces” I call them, I now have yr article to help me out. Poet to poet is a necessity for growth I believe. The Poet As Publisher phenomenon is crucial for our survival if we value any reading audience . . . again, thanks! If you’d like to check out my experiments:
http://larrygoodell.blogspot.com/
http://larrygoodell.wordpress.com/
Hey, glad you found this useful! Yes, the top poem at your Blogspot blog is precisely the sort of poem whose formatting this tutorial was designed to address.
Hey, Dave. Coming back for a refresher as I am helping with an online journal project and want to do better than dot dot dot. :-)
Noticed in the couple of years since that WordPress has a post on the topic now (August 2012). http://en.support.wordpress.com/writing-and-formatting-poetry/, which lists your article here as a reference.
Yes, that link brings a stready trickle of traffic. Automattic takes poetry blogging pretty seriously these days, in fact. It’s one of the first examples of what to do with a WordPress site that you’ll see if you visit wordpress.com without being logged in.
I’d like to hear more about your project, and would be glad to consult on the technical aspects — email me if you like.
Hiya…I discovered the preformatted command that helps with spacing of poetry but the grey highlight box doesn’t get it. How do I remove that? Thanks.
I have been trying to write a four column multi-voice poem in wordpress. I have ended up just using the visual editor. This took hours and does not show correctly if you change monitors. I can adapt codes on the web for excellent html two and three column poems. But none I have used has worked for four part. Have a look at my multi-voice site on wordpress
This is the site, I take it? First of all, you might want to switch to a wider theme. Regardless, though, to get it to behave properly you’ll probably want to use HTML tables in your posts. (Which is of course a total pain in the ass, though you could simplify it by putting the basic code for four columns into a text editor such as Notepad and making a reusable file that you can simply plug new text into.) Or you can purchase the CSS upgrade from WordPress.com, if you haven’t already, and do it the smart way. If you had a self-hosted WordPress installation, there are various plugins you could use, but I don’t necessarily recommend going to that trouble and expense — WordPress.com is a great host for most purposes.
Hi Dave, Thanks for the reply. That is the site. One poem I used this code for and it worked:
https://en.support.wordpress.com/advanced-html/
This site has two and three column code and works. Thanks to them! Ashby
My other Poem- Peace is all over the place. I will look at wider formats. I am just a beginner at HTML and tables. Many thanks for your reply! Ashby
Using div tags as they suggest on that page actually might be a better idea than using tables. Regardless, I’m glad you’re finding an approach that works for you.
Hi Dave, I am still trying to find html that works within wordpress.com-to make 4, 5, and 6 columns of text. I will tell you if I succeed. I am ok with 2 and 3 columns which do work with the codes on the internet.
regards
Ashby
Hi Dave, Can you remove the above comment as it has not pasted properly. All the html code has been removed. I am emailing the WordPress Forum as I cannot post this (the version with html) on WordPress. I wanted others to be able to just cut and paste the code I had given but not so easy.
Yes, you need to escape the code. Try using this tool.
Hi Dave many thanks, I will give it a try. Ashby
https://multivoicepoetry.wordpress.com/
I just posted a bit about how to easily write multi-columns of text for WordPress. Ashby
Good work, and thanks for the link (here’s the direct link), which I may refer to myself at some point if the need arises.
Hi Dave, I am happy for you to mention it. regards
Ashby
I must say it is heartening to read a post 5 years old on the topic of rendering poetic writing online. These days of course the matter has been greatly resolved by the advances in WordPress and the online space in general. It is still damned difficult to produce a literary/cultural magazine style site that attracts genuine people – E.E Cummings would still say it is like trying to push your head through a straw.
Yes indeed. The problem of how to preserve formatting across environments continues to challenge both web and ebook publishers, especially as mobile devices become many users’ first (and often only) portal to the internet. I do feel a bit vindicated by the trend toward minimalism, though; I’ve always preferred simple, one- or two-column sites, with “blog” content on the front page, over fancier magazine-style designs. In part that’s because I’ve always struggled with slow internet connections. What’s good for mobile phone users on a 3G network, design-wise, is also good for us rural folks on DSL or worse.
As an html total beginner I got a WordPress expert to help me write multi-voice in up to six columns (in my website). However, when I tried to write very small text to allow me to put text into these narrow columns then it did not work in WordPress. I tried the poems that worked in Microsoft Expressions Web 4 but none worked in WordPress. Another WordPress expert kindly gave me some code but nothing seemed to work on WordPress. I presume the WordPress text editor alters the CSS or html? Anyway, after two weeks of trying (CSS and html) I gave up and have added a new multi-voice site created on Blogger where the small text columns (using the additional WordPress coding) work fine: multi-voicepoetry.blogspot.com
Ashby
I’m glad you found a solution that works for you. I do worry that Blogger will be killed off by Google some day; I hope I’m wrong about that.
after 6 years your post is still vital.
The tag completely save my ‘long’ poems line formatting.
Just plugged it in as an html file into python ‘Pelican’ –perfect.
Amazing how many experts in ‘everything’ dont even understand the question … sigh!
Thank you from a bloke in the Literature world trying to USE the Web world.
Bob.
So glad you found it useful. Thanks for the feedback.
I was just reading about Pelican last week. Seems as if static site generators might be the wave of the future. (After 11 years of running WordPress sites, I can definitely see the attraction.)
Hi Dave!
Thanks for such a complete article on poetry html. In your words an incomplete guide is this. God knows ……how complete is this!
I will correct all of my poetry related codes in different blogs as per your guidelines. To me, astonishing is your tittle of this post, which has become another poem to those are looking for catchy titles.
Regards
Cindy