Reader Question: Why Does My Blog Post Have Big Gaps Between Paragraphs?

Big gaps between paragraphsToday’s reader question is one I get often and maybe it’s something you’ve experienced yourself when you’ve written & published a new blog post.

Why does my blog post have big gaps between paragraphs?

The written word needs white space

When reading (whether that be physical printed material or digital print), we expect to see “gaps” or white space of a certain size in between words, sentences and paragraphs. These writing conventions are ingrained unconsciously from the time we learn to read as children.

When everything in writing looks as it should, we read freely and concentrate on what we are reading (this is what you want your readers to do).

When a piece of writing (e.g. your blog post) doesn’t look as it should because it has big gaps between paragraphs, the flow of reading is interrupted and the reader will either scan the page erratically, not really taking in what they’re reading or may even leave the page altogether.

To keep readers on your page, you need to make sure your writing looks as it’s expected to look.

Where do you write your articles?

Where you write your articles will impact how the finished article looks once published.

visual editor

Visual and Text editor tabs

I write my articles directly into the post area on my WordPress websites – the visual tab is selected in my post editor.

This allows me to see approximately how my article looks. Other than colour and font styling (which I’ll only see once I publish my blog post), what you see as you type your post in the visual editor is an accurate representation of what the finished product will look like in terms of spacing.

Where the stumbling block comes in is when an article is written in word processing software like Microsoft Word, Google Docs or Pages and the text is then copied and pasted into the visual editor.

When I select the “text” tab this is what I should see for the words I’ve written for this article:

Text view of what I've written

Clean code visible in the Text editor tab

If I had written that same text into my word processing software of choice (I use Pages on my Mac) and then pasted it directly into the visual window of my post, it looks like this in the finished article:

Published view of pasted text

Published view of pasted text showing big spaces between paragraphs

And like this when I view it in the “text” window:

Code view of pasted text

Code view of the pasted text with extra (unnecessary) styling

You can see that the pasted version, when published, has a heading that is styled differently and extra space between the paragraphs.

When you look at the two code views, you’ll see in the pasted version that around the heading there are the tags <b> </b> which just applies bold styling whereas in the directly typed version, the heading has the correct tags <h2> </h2> surrounding the heading text (which applies the styling defined in your website style sheet). You’ll also notice there are extra characters included between the paragraphs ¬†“&nbsp;” What this code does is insert an extra space into your writing and that code has come from your word processing software.

When you type in your word processing software, it’s creating hidden code that you don’t see, to style the text you’re typing. When you copy directly from your word processing software and paste that directly into the WordPress dashboard visual editor, the hidden styling comes across and conflicts/over-rides the styling of your website.

In the example I’ve shown, the extra styling is fairly easy to pick out and delete if necessary. Depending on how much you’ve styled the text in Word, you could see errors such as:

  • embedded styles that alter the colour of the text,
  • hyphen styling that WordPress doesn’t recognise (which will either disappear altogether or be replaced with an empty box,
  • other characters (like an ampersand (&) may also be replaced with an empty bounded box,
  • I’ve even seen an entire extra style sheet inserted in a blog post that impacted the styling of the website’s navigation on that blog post page.

How to paste text from your word processing software without the extra characters

To get rid of this extra styling, there is a handy little button located in the visual editor toolbar:

Visual editor toolbar

The visual editor toolbar

Do you see in the second row the two little clipboards with the “T” and “W”? If you don’t see the second row, just click on the “Show/Hide Kitchen Sink” button at the right end of the first row. When you click on either of those buttons, you’ll get an empty text box pop up where you can paste in your text.

Paste as plain textI’ve found the “T” button works best – if you uncheck the box “keep line breaks”, all the styling added by the word processor will be stripped out and you’ll be left with plain text. All you need to do then is apply headings and add paragraph spaces where necessary.

I know adding the styling back in (when you’ve already typed it & styled it in Word) seems like extra work, but for the sake of having a finished blog post that’s easy for your visitor to read, and consistent with the rest of your site, I think it’s well worth it.

P.S. Have you joined B-School yet?

Enrolments close  March 5th 2014

Want more articles like this?

Join over 1000 Tech-Savvy DIY-ers and get the Free Web Starter Series + fortnightly insider tips direct to your inbox.

StudioPress Premium WordPress Themes

Comments

  1. says

    Oh thanks so much for this. I have had this problem since the very beginning and never been able to figure it out . Do you know if you can change the English settings to uk English . This is the reason I’ve been writing my articles in word .

    • says

      Hi Janet,

      There is actually an English (UK) version of the core WordPress files (& other languages too).

      You can download that version of WordPress here for future websites/blogs you might create – http://en-gb.wordpress.org

      For your current site, there are instructions here to manually install the language files if you’re up for a little challenge.

      Otherwise, it might just be a case of manually changing the US spelling of words back to their (correct ;) ) UK format.

  2. says

    Hi,

    I really thought you had my solution, and, maybe you do and I am just not implementing it correctly. My issue may be slightly different. I was fine until a few days ago, when I must have done something to throw things out of whack. When I am in my Edit Page area, there is a HUGE space after the end of my Home Page text. The gap does NOT show on my actual Home Page, just in the edit area. I DID write my text in Word and then pasted it in WordPress. I tried your “T” solution, but, to no avail. If you have a solution for me, I will be your best friend!!! :O)

    Thank You Much!!! Tom

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>