Formatting Tips & Tricks

HTML can be difficult for poets to get used to because it’s quite different in how it works from the word processing software we’re used to. Here are some tips for formatting your poems.

Bold and Italics

To make text bold, you can either select it and click the “b” button in the WordPress Visual Editor, or if you’re using the Text Editor, surround it with <strong> and </strong>

To make text italic, you can either select it and click the “i” button in the WordPress Visual Editor, or if you’re using the Text Editor, surround it with <em> and </em>

Tabs

HTML doesn’t have tabs, so we have to fake it. If you’re using the Text Editor, the formatting from your word processor should, in most cases, be kept. If, however, you need to create custom spacing, there is an HTML character that should usually work, the nonbreaking space character. The code for it is this: &nbsp;

UPDATE: I’ve added a button to the Visual and Text editors to implement a tab. The code for it is this:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. The button is called “Tab,” and clicking it adds the code into your text. It will create a tab-like space of about 5 letters’ width. The buttons look like this:tabt (in the Text editor) and tab_space (in the Visual Editor).

Prose Lines

I’ve had to format normal paragraph behavior for verse lines, but what if you want to post a prose poem? I’ve therefore made an HTML class you can use to override that styling. Using the Text Editor, wrap your prose paragraphs in <p class=’prose’> and </p>

UPDATE: I’ve added a button to the Visual and Text editors to implement a prose paragraph. Select the text you want to be “prosified” and then click this button. The button is called “Prose.” The buttons look like this:proset (in the Text editor) and prose (in the Visual Editor).

Double Spaces Between Stanzas

I’ve made an HTML class you can use to insert a stanza break. The code for it is this: <p class=’stanza-break’>&nbsp;</p>

UPDATE: I’ve added a button to the Visual and Text editors to implement a stanza break. Put your cursor between stanzas and click click this button. The button is called “Stanza Break.” The buttons look like this:sbt (in the Text editor) and height (in the Visual Editor).

A Good Pattern For Poem Titles

Using the Text Editor, do something like this before your poem’s first stanza:
<strong class=’title’>My Poem Title</strong>
<p>&nbsp;</p>

UPDATE: I’ve added a button to the Visual and Text editors to implement a title. The code for it is this: <strong class=’title’>My Poem Title</strong>. Select the text you want to be the title and then click this button. The button is called “Poem Title.” The buttons look like this:buttonspt (in the Text editor) and title (in the Visual Editor).

2 Thoughts.

  1. Hi Karen,

    It looks like that’s happening because you’re trying to insert <div></div> in between your couplets, which won’t work. (Perhaps that works on some other site?)

    Try wrapping a paragraph tag around a non-breaking space, like so:

    <p>&nbsp;</p>

  2. Hey, John Paul – I’m having trouble creating line breaks. Thought I’d set my first piece up to do couplets – it even showed couplets in the preview, but now I see it doesn’t read the spaces I inserted. Any tips?

Leave a Reply