Support

Writing & Editing

Writing and Formatting Poetry

WordPress.com is a great community for poetry writers and enthusiasts – check out the Poetry topic page for just a small taste of our community of poets.

Given the unique formatting that poetry often involves, publishing poetry on the web can present some challenges.

This guide includes some tips and shortcuts to help you ensure your poems appear just the way you want them.

Summary

You don’t have to read this whole thing to start publishing poetry on your blog. Two tips are especially handy in publishing your poetry on WordPress.com:

  • To add line breaks instead of paragraph breaks, press Shift + Enter while in your Visual Editor.
  • To preserve extra spaces that would otherwise be ignored, apply the Preformatted style from the style selector in the second row of tool in the Visual Editor, or use the <pre> tag in the Text editor.

↑ Table of Contents ↑

The language of poetry and the language of the web

When the web was first put together in the ’90s, it was not set up with poetry in mind. HTML, the special markup language used to add links, images and headings to web pages, doesn’t do a great job with the irregular lines and unexpected indentations that are typical of poetic verse.

For example, HTML ignores extra spaces by default. If you use the Visual Editor to add extra spaces between two words, they will be automatically truncated to a single space when you publish the post. The same goes for extra line breaks – if you enter multiple blank lines after a stanza, when the poem is published you will end up with just one.

However, HTML is flexible enough to let you get around these limitations. And with WordPress.com’s Visual Editor, you don’t even have to know HTML to do it.

↑ Table of Contents ↑

Line breaks

If you hit the Return key in the Visual Editor, you’ll probably notice a lot of extra space between the previous line and the new one. That’s because whether you hit the Return key one time or twelve, the Visual Editor will interpret that to mean that you want to start a new paragraph.

But sometimes you don’t want to create a new paragraph, and want to start a new line instead. You can begin a new line by pressing Shift+Return.

The next line after the line break will start immediately below the previous one, with no extra white space, so you can easily create clearly defined blocks of verse inside your poem.

You can add as many line breaks as you want; the Visual Editor will never ignore them. Each time you hit Shift+Return, you’ll get an extra empty line, so you can also use this technique to add really big sections of white space to your poems.

For example, this famous Haiku was formatted using Shift+Return to add line breaks:

old pond …
a frog leaps in
water’s sound

Emily Dickinson’s If Those I Loved Were Lost has two blocks, separated with a small section of white space. You can do the same thing by using Shift+Return inside each block, and Return between the two blocks:

If those I loved were lost
The Crier’s voice would tell me –
If those I loved were found
The bells of Ghent would ring –

Did those I loved repose
The Daisy would impel me.
Philip — when bewildered
Bore his riddle in!

↑ Table of Contents ↑

Word spacing

Using Shift+Return is a quick and dirty way to force your blocks to stick together, but what if you want to push them apart?

Sometimes you want to add extra spaces before certain lines, or between words, to illustrate the form and structure. The Visual Editor will ignore extra spaces if you just hit the Space key a few times, but there’s an easy way to force it to preserve your spaces exactly as you type them.

First, you have to make sure you can see both rows of tools in the Visual Editor’s toolbar. The first row starts with the “B” button, for bold text. The second row should start with the Style Selector, by default set to “Paragraph“. If you only see the first row, click on the last button on the right. This button is called “The Kitchen Sink“, and it toggles the second row of tools.

Now, select your poem in the editor, and from the style selector (the first tool in the second row), choose the Preformatted style. This will make the Visual Editor preserve all the spaces you add, exactly as you add them, so you can literally go crazy with it.

For example, Poe’s Lenore is often printed with extra spaces before the lines, so lines cascade over each other. The following excerpt recreates this effect using the Preformatted style:

AH, broken is the golden bowl!
     The spirit flown forever!
 Let the bell toll! — A saintly soul
     Glides down the Stygian river!
         And let the burial rite be read —
             The funeral song be sung —
         A dirge for the most lovely dead
             That ever died so young!
                 And, Guy De Vere,
                 Hast thou no tear?
                     Weep now or nevermore!
                 See, on yon drear
                And rigid bier,
                    Low lies thy love Lenore!

Note that the Preformatted style also changes the font, and on some themes also makes it smaller – if you don’t like this new font, see how to change it back under Advanced Techniques.

↑ Table of Contents ↑

Highlighting Poems

In this guide, all the example poems are indented and italicized, and have a subtle background color to separate them from the rest of the text. If you want, you can easily add this same effect to your own poems, using the Blockquote button in the Visual Editor. In the first row of buttons, it’s the sixth button from the left, with a single quote mark as it’s icon.

Note however that the way this will actually look on your blog depends on the theme you’re using. Not all themes will apply the same kinds of styles as you see here. If you want to customize the styling of Blockquotes on your blog, read on in the Advanced Techniques section.

↑ Table of Contents ↑

Advanced techniques

The tips above should keep you covered for almost everything you write, but you may want to do some more tweaking. To do this, however, you will have to leave the comfort of the Visual Editor and venture into the plain-text realm of HTML. If you already know a bit about HTML, you can skip further down to the examples. If not, read on, and consider it an adventure – you may even get inspired.

To get started, click on the Text tab above the editing area (next to the Visual Editor tab). Try this first with a post you already wrote, so you can see what the HTML looks like. Just make sure you switch to a draft post before you start experimenting.

In the Text editor, as you will plainly see, everything is text – a link is just text, a quote is just text, even an image is just text. But there are two kinds of text here. Some of the text is the actual content of the post you wrote, but some looks different. This “different” text is the HTML code.

It’s easy to tell the two apart – HTML code always starts and ends the same way. For example, look for angled brackets – < and >. Everything inside angled brackets like these is called HTML tags. Tags are predefined HTML commands that specify how your post will look and behave. To add a link, for instance, we use the <a> tag – short for Anchor. To emphasize a section of text, we use the <em> tag, which is short for Emphasis.

You’ll notice that some tags have slashes before them. This is an easy way to know where a tag starts to work, and where it stops. If you want to emphasize two words, you add the start tag just before the first word: <em>. Then, just after the second word, you add the stop tag, also known as the closing tag: </em>.

If we translate the HTML tags above to literal commands in plain English, it means “Start applying Emphasis here”, and then “Stop the emphasis here”. HTML is really just a set of rules and shortcuts that make it relatively simple for people to write commands like these, and really simple for computers to understand them. It’s a gross oversimplification, but this is how 99% of the web works.

↑ Table of Contents ↑

Line breaks, Blockquotes and Preformatted text in HTML

Now, let’s see how to apply the previous techniques using the Text editor – they have pretty simple HTML tag equivalents. To define a section of Preformatted text, we use the <pre> tag. This next example is what you would see if you were editing the HTML code on this page, and you were looking at the section where the excerpt from Poe’s Lenore was:

AH, broken is the golden bowl!
     The spirit flown forever!
 Let the bell toll! — A saintly soul
     Glides down the Stygian river!
         And let the burial rite be read —
             The funeral song be sung —
         A dirge for the most lovely dead
             That ever died so young!
                 And, Guy De Vere,
                 Hast thou no tear?
                     Weep now or nevermore!
                 See, on yon drear
                And rigid bier,
                    Low lies thy love Lenore!

Notice that the opening and closing <pre> tags surround the whole section. This is actually what would happen if you select this text in the Visual Editor and set the Preformatted style – behind the scenes, the Visual Editor goes and adds the <pre> tag.

The Blockquote works just like the <pre> tag – except it starts like this: <blockquote>, and ends like this: </blockquote>.

Adding line breaks is even easier. Because line breaks exist on their own, you only need one tag (that is to say that they’re not “applied” to any text, like the <pre> tag is). The Line Break tag opens and closes itself, so it has the slash inside of it: <br />.

For example, the above Haiku would look like this in the Text editor:

old pond ...


a frog leaps in


water’s sound

↑ Table of Contents ↑

Customizing appearance with the Style attribute

Now that we got the basics down, we can start to play around with it. For example, we promised to show you how to change the font you get when you use the Preformatted style (or, more to the point, the <pre> tag).

As we mentioned before, everything in HTML is text – so changing fonts is also done by typing plain text in the editor. Specifically, it is done by adding an Attribute to the <pre> tag.

HTML tags are like predefined sets of instructions. For example, one of the instructions in the <pre> tag is “Preserve all extra spaces inside this tag”. Another one is “Show text in a weird font”. But you don’t have to settle for the instructions the tag comes with – attributes let you change the default instructions, or add new ones of your own.

An attribute lives inside the start tag. For example, this start tag includes an attribute that makes it use the Arial font:
<pre style="font-family:Arial">

 


This next tag also increases the font size:
<pre style="font-family:Arial; font-size: large;">

 


The closing tag doesn’t change – it would still be just </pre>.

There are many attributes you can use, and each one has many settings. You can really go far with these: you can set indentation, letter and word spacing, line height, and more, and you can do all this to a pixel-perfect degree of accuracy. We won’t get into every single available feature, but you can check out the links under More Information to learn more. For now, we’ll stick to a few useful examples.

HTML has a very specific syntax you have to stick to – everything has to be just right, including all the quote marks, colons, etc. If you’re not comfortable with it, you can just copy the examples from this page.

↑ Table of Contents ↑

Examples for the Style attribute

This example includes attributes that ensure that the <blockquote> tag will have a light grey background and show italicized text, like the previous examples on this page (note that you only have to add these attributes if this isn’t already the default on your theme):

<blockquote style="background-color:Gainsboro; font-style: italic;"></blockquote>
Text this will be applied to…
</blockquote>

Note that the end tag is always the same – regardless of whether you use an attribute or not.

The next examples change the default font for the <pre> tag, and make it slightly bigger. See if you can tell which font you’ll get with each one:

<pre style="font-family:Georgia;font-size:13px;">

 


Text this will be applied to…
</pre>

<pre style="font-family:'Times New Roman';font-size:13px;">

 


Text this will be applied to…
</pre>

<pre style="font-family:<">Tahoma; font-size: 13px;">

 


Text this will be applied to…
</pre>

<pre style="font-family:Arial;font-size:13px;">

 


Text this will be applied to…
</pre>

To use these code snippets, just copy them to your post (in Text view) and change the part that says “Text this will be applied to…”.

↑ Table of Contents ↑

Customizing appearance with the Custom Design upgrade

It’s easy to customize the appearance of your tags with the Style attribute, but it can be tedious to do it for every tag you add.

To make permanent customizations to your theme, we offer the Custom Design upgrade. It allows you to choose different fonts and text sizes, change layout, hide unwanted elements on the page, and much more. However, this would require much more tinkering than what we covered in this guide. The Custom Design upgrade costs $30.00 per blog, per year. Learn more about it on the Custom Design support page.

↑ Table of Contents ↑

More information

For more about the Text editor in WordPress.com, see the Editors page.

For more insight on working with HTML and poetry, see the following links:

For more help with working with HTML in general, try these:

Still confused?

Contact support.