Multiple Spaces After Period in WordPress

It’s bugged me for a while that my WordPress posts would often have an extra space at the beginning of a line. It would only happen when it was a new sentence, and after a while I realized it was related to my habit of typing two spaces after a period.

Fear my drawing skills...

I finally got grumpy enough to try to find a solution for it today. The obvious “edit every old post to remove double-spaces” seemed inefficient, and frankly I’m not likely to retrain myself to use only one space for future posts.

I assumed this would be a well known issue and there would a tuneable or a plugin to address it, but it turned out to be really hard to Google the right terms. I have actually decided not to change anything on my system based on my findings, but I wanted to document what I learned.

First, I did find a few plugins, but nothing that looked especially well-made. I never even installed one, because they all looked so suspect that I assumed they would reformat all my code snippets also. I care much more about the formatting in those code snippets than I do the double-space issue.

Next, after looking at the page source and seeing that there were two spaces present and not, say ‘ ’ characters (*foreshadowing*), I tried to reproduce the problem outside of WP, mimicking the WP CSS. No luck.

I finally managed to Google up this WP support page where the reporter is describing the exact issue I am having. What’s interesting to me is that this is a relatively new ticket and he’s told that there’s no solution. It does point out what’s actually happening though:

What happens is that when you put two spaces in a row in the visual editor, wordpress converts it to “space + unicode_nbsp”

Ah. That’s right, always use tools that won’t lie to me. Of course view-source is just translating that unicode character (correctly) to a space. That’s what the character is supposed to look like. I can confirm that’s what’s happening though. I grabbed a copy of a post with wget and looked at the output with xxd:

"20" is the real space, "c2a0" is U+00A0, the Unicode non-breaking space.

While that page itself doesn’t offer a solution, it mentions WP bug 19936, and that bug actually contains the solution. Essentially, the root of the problem is the TinyMCE editor that is used to provide the WYSIWYG functionality of the WP “Visual” editor. TinyMCE was the component translating trailing spaces into non-breaking spaces. That ticket is actually closed because the 3.4 release will include a newer version of TinyMCE which employs slightly better logic about which space to make non-breaking.

Again, none of that really helps me right now, and I suspect that it won’t help old posts in the future either because, once it’s been saved that way in the DB, the trailing space has already been translated to a non-breaking space (it just looks like a regular space in the text editor). Also, 3.4 isn’t released yet, so that’s not a help on newer posts.

What does work, though, is just using the HTML editor instead of the Visual editor. Normally I would say that this is a poor solution, but I had already sworn off the Visual editor in the past week after getting too fed up with how it irreparably mangles code snippets.

I still don’t have a solution for old posts that I created in the visual editor. I toyed with the idea of creating some javascript to do it dynamically but I don’t really care enough to. I may go back and edit the articles that still show up on the main page, but in the end just knowing the cause of the problem and how to avoid/fix it in the future is enough for right now.

Update: I actually went back and edited the last 10 posts, replacing the unicode_nonbreak with a regular ASCII space character. I wasn’t going to, but I figured out a relatively easy way to do it. I had feared I wouldn’t be able to do a bulk find and replace for fear of harming other formatting. I found that a good text editor (I used Notepad++) can do a find and replace on the specific U+00A0 character very quickly. I couldn’t figure out how to type that character, but I could copy it from the post and paste it into the search box, then type a regular space into the replace box. Since the find/replace box stays open all the time, I could copy the text out of the post, paste it into n++, replace all, copy out of n++, and paste into WP very quickly. Once I figure out what I was doing it took about 3 minutes to fix those 10 posts. If I had a very large site I would probably write a tool to do a find/replace against the DB directly, but this solution worked fine for me.

Update 2, 2013-01-21: John Girdwood suggests a filter in the comments. I can’t vouch for it and won’t be testing it (because it’s not an active aggravation for me anymore) but if anyone else does and wants to comment on it I’d love to hear about it.

8 thoughts on “Multiple Spaces After Period in WordPress

  1. OMG! I hate that! That single space at the beginning of the left margin drive me nuts. It didn’t always used to do that. That’s how we were all taught in typing class back in the day… use double spacing between sentences. I now write all my posts with single spaces so it doesn’t do that, but I don’t like it one bit.

    Another thing that bugs me is WordPress stripping out HTML when you switch back to the Visual editor. Are you kidding me? The purpose of the HTML tab is to write raw code so why in the heck defeat that function by stripping it out?

    Some updates just don’t make any sense.

    • I know your comment is basically an SEO play, but good on you for actually being a human being writing a meaningful comment =).

  2. My buddy just helped me migrate my site over to his hosting provider and noticed my tendency to double space between sentences too. Said it borked the import/export and told me to stop writing like that

    I googled it, trying to defend what I thought was my educated writing style, and it turns out my whole world of writing was flat in this regard. Like you, don’t know how I am gonna change, but if you ever write a db tool to go in and update that %^&* on a WP site, let me know! :-)

  3. Thank you so much for this post! I was going nuts searching Google, just as you had been too, apparently. I know from many years of experience that normal HTML ignores my old-fashioned tendency to double space at the end of sentences, but not WordPress. Most of the “solutions” out there were as you said — just don’t do double space. Great. That’s not going to happen with me. Been doing it since before Noah. Now I can probably create some function to find and replace these accursed extra spaces. As you say, just understanding what’s causing the issue is enough for now.

  4. Dude, it took me literally 2 hours to find your post and then 10 more minutes to find the following code. This drove me crazy but, for my purposes, this function fixes it for me and what I need. Check this out and put this in functions.php
    – – – Start (don’t include this) – – –

    function remove_spaces($the_content) {
    return preg_replace( ‘/[\p{Z}\s]{2,}/u’, ‘ ‘, $the_content );
    }

    add_filter(‘the_content’, ‘remove_spaces’);

    – – – END (don’t include this) – – –

    Credit: I got it from…

    http://wordpress.org/support/topic/force-one-space-between-periods

    • Thanks for the suggested filter John. I’m not going to test it because it’s not a going-forward problem for me (and because I’m afraid it would mess with the formatting of my code snippets), but if anyone else tests it and wants to comment on how well it works I’d love to hear it.

  5. Does the latest version of WP eliminate the issue you posted about double spacing at the beginning of a sentence? This issue is enormous for me since I’m a photographer who needs to use double spaces to separate photos in my WP blog. I won’t bore you with the details, but it’s a must. In my old posts, using the visual editor, I had to use two periods (..) between my photos to separate them. So with my mobile version, those periods all get moved and clumped together after all my photos. On my latest post after updating WP, I didn’t have to use two periods to separate photos. Is it related to the issue you posted about?

    • As I said in the post, I decided to only ever use the “text” editor, so I don’t see this any more, but I just did a quick test using WP 3.8.1 and as far as I can tell it’s still doing it. When I entered “. ” in the “visual” editor the resulting bytes were 2E 20 C2 A0 (period, space, unicode_nbsp), which is the character string which caused the problems described in this post. When I did it in the “text” editor I got “2E 20 20″, which is the character string I expect to see. I may be missing nuance to my test, but that seems to show that the behavior hasn’t changed.

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>