Non-breaking spaces appearing as extra-wide spaces
-
I’ve written before about a challenge I’m experiencing where non-breaking spaces are being inserted (rather than regular spaces) in my posts under certain circumstances during typing/editing, all of which I haven’t been able to pin down.
Well, in latest Chrome (47.0.2526.73) every nonbreaking space is now rendering as a wide space. This is not happening in latest Firefox or in the new Edge browser.
I upgraded to Windows 10 last week, leaving 7 behind. I would think that latest Chrome would be the same on 7 or 10 and the OS wouldn’t be a cause of this, but it is an important recent change on my machine. And I only started noticing this behavior difference yesterday, and I am certain I wasn’t seeing this behavior before that upgrade. I don’t have a Windows 7 box easily available to me to test it there.
Screen shot from Chrome: http://screencast.com/t/yuAxSkz7LoXc
From Edge: http://screencast.com/t/eImpX58BMXoc
From Firefox: http://screencast.com/t/x0KvlPGs
Can you help me resolve this? These wide spaces look bad, and I’ve got almost 9 years of blog posts so I’m not eager to go on a nonbreaking space hunting safari.
Thanks,
-JimThe blog I need help with is: (visible only to logged in users)
-
When we need Staff help with issues Volunteers cannot resolve like this one we type modlook into the sidebar tags on our forum threads. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Then we subscribe to this thread so we are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
-
P.S. I also upgraded from windows 7 to windows 10 and I am using Firefox 42 so I had not spotted this issue. I am also subscribed to this thread.
-
-
I have been doing some experimenting with this.
It appears that posts created ground-up with the new editor are free from this problem. It leads me to believe that the new editor also solves the nonbreaking space bug I reported in the other thread, referenced above.
Here’s a screencast showing odd behavior when I type in the classic editor in Chrome. I also click the Preview button and show how there is funky spacing here and there. If you view the text in Inspect, you’ll see nonbreaking spaces there.
http://screencast.com/t/S2zPUF7T5
However, the new editor does not do any of this. It behaves fine in Chrome, with no nbsp’s being inserted, at least in my somewhat limited testing.
Also, the classic editor does not appear to be inserting nbsp’s when I use Firefox. Here’s a screencast of that:
http://screencast.com/t/YXMGKZNAvqId
Here’s the kicker: I’ve created all 1,249 of my published posts in Chrome. However long this bug has existed, I’ve got nbsp’s in the text. And now every nbsp is showing up as a wide space when those posts are viewed in Chrome. That wasn’t happening before.
I’m flummoxed — and quite concerned, as I would like everybody who views my blog not to see those wide spaces. Can I ask you WordPress Happiness Engineers to take a look and see if you can help resolve this?
-
Hi there,
While I can see what you’re talking about when I view your site in Chrome, I’m not able to reproduce the error on either a Mac or Windows 7. I’ve asked a colleague who has Windows 10 to see if she can reproduce it there.
I do notice that I don’t see the nbsp when viewing your post in the text editor, but only when viewing the published post’s source code in my browser. Can you please confirm that it works the same for you?
To rule out other possible browser issues, can you please try creating a post in an incognito window in Chrome and see if it still adds the double spaces? If it doesn’t do this in incognito mode, it could be a browser plugin that’s causing this, so in that case please disable all your plugins and add them back one at a time, checking inbetween when the error returns. That can help identify which plugin is causing this.
I’ll be in touch once I’ve heard back from the person who is testing this on Win10 for me.
-
Thanks for replying, @hokkieh! Good thought about incognito mode. But when I switch to it (and make sure all extensions are disabled), I’m still seeing these wide spaces in existing posts. And post creation in incognito mode is still creating these nonbreaking spaces.
I must have muffed something in my testing yesterday, because when I tried the same thing in the new editor in incognito mode, the nbsp’s were being added. Typing in the new editor looked normal but when I previewed, I saw the wide spaces.
This nbsp problem has been going on since before I upgraded to Windows 10, but the nbsp’s have not been presenting as wide spaces until the last few days, which is within a few days after I upgraded to Windows 10 from Windows 7.
-
Thanks for checking that.
We were unable to reproduce the error in Windows 10, but we’re exploring another possible cause related to the TinyMCE editor. I’ll let you know if I learn anything new.
Is this happening in all your posts, or is there a specific post where it started happening?
-
Hi again,
I just heard back from our TinyMCE (classic editor) expert, and he’s not aware of any issues with the editor itself. The fact that you have the same problem in the new editor also rules that out.
From your screencast it seems like your cursor moves two spaces with one keystroke, correct? Can you perhaps try using a different keyboard so we can rule out a hardware problem? If you’re using any “enhanced” keyboard like a gaming or wireless keyboard, also make sure the drivers for that is up to date. It could very well be that the current drivers aren’t compatible with Windows 10.
Can you also check if you have the same problem in Chrome if you use an editor on other sites, like an email service, an online forum, another blogging platform, etc. That can help us narrow down if this is specifically a WordPress.com issue, or a Chrome issue.
Apparently Chrome is rather inconsistent when it comes to their treatment of nbsp entities, and it changes regularly between updates, so if it’s a Chrome issue it might just go away with their next update. However, if it’s a Chrome issue we won’t be able to fix it from this end.
-
Hi kokkieh, and thanks for your work on this issue. I appreciate it.
I’m at work today, where I run latest Chrome on Windows 7, and I’m seeing this issue here. It behaves identically to what I see on my personal Windows 10 machine, both during editing and when viewing a published or previewed post. So Windows 10 is not in play in this issue.
In the screencast where I’m editing, the cursor is actually *not* moving two spaces, but one very wide space, kind of like an em space vs. a regular space. When you type “blah blah blah <ctrl-b>blah<ctrl-b> blah” and preview, and then select the wide space before the bolded blah, it is just one (wide) space.
How do the two WordPress editors interact with the theme selected for the blog? I just tried this on my other blog, softwaresaltmines.wordpress.com, and I’m not seeing this behavior.
I followed the same steps: created a test post (in the classic editor), typed some text including some boldfaced words, and previewed. Here’s the preview, with no apparent nonbreaking spaces present:
http://screencast.com/t/d70Iy1lQi
So here’s a new thread to investigate: I wonder if this has to do with some interaction between the editors and the Photolia theme, which I use on blog.jimgrey.net/jimgrey.wordpress.com. I use Cubic on my softwaresaltmines blog.
I switched to Photolia in March of 2014.
However, I’m seeing these wide spaces in posts going as far back as 2008, two templates ago (I used the template that evolved into Pilcrow, but forget what it was called then).
So this makes me wonder if this is a problem with the way my theme is rendering nonbreaking spaces. I mean, the nonbreaking spaces shouldn’t be inserted in the first place, that’s a bug somewhere. But could Photolia be rendering nonbreaking spaces incorrectly?
So I just created a test post on my blog that makes this problem happen. Then I went to the theme viewer at https://jimgrey.wordpress.com/wp-admin/themes.php and previewed the site in the following themes: Janice, Button, Venture, Corporate, Independent Publisher, and Lovecraft. All of them rendered the pages without the wide spaces.
Let me know what you think about this line of investigation.
Thanks!
-
Okay. It looks like the theme might be the key. I was able to reproduce the editor behaviour when I applied your theme to a test site. I couldn’t get the wide spaces to display on the published posts, but looking at your site that appears to be happening randomly.
I have submitted a bug report to our theme developers so they can investigate this. I’ll let you know if I hear anything from them.
Thanks for your patience and willingness to help troubleshoot this :)
-
Troubleshooting is what I do – I’m a software tester IRL! Looking forward to hearing more when the theme developer picks this up.
-
P.S. If the theme developer can fix this issue of rendering nbsp’s, there’s still the matter that nbsp’s are being inserted into the text in the first place, as I noted in this thread:
It sure would be great if this could be resolved.
-
That issue might be related to a known TinyMCE bug (see http://stackoverflow.com/questions/12247681/tinymce-is-adding-nbsp-instead-of-the-space-when-using-the-word-paste), but as it only shows up in Chrome, and only in this theme as far as I know, I think we should rule out the theme first.
I’ll keep an eye open for similar reports, though.
-
Hey, yeah, I do know about the bug when pasting from Word. I always type directly into the editor, however.
I’ve created all the posts for my softwaresaltmines blog using Chrome and the classic editor. When I preview that blog on the Photolia theme, those wide spaces show right up. Here’s a screen shot. If you look, you’ll see some wide spaces.
http://screencast.com/t/Euf9Lzuu
But along the way to doing the above, I discovered something very interesting: changing the default body/base font makes nbsp’s render at normal width. Here are three screen shots in the Customizer, the first with the default font, the second with one of the non-Typekit fonts, the third with a Typekit font (as I bought that upgrade).
http://screencast.com/t/Hpk7QFUolEG
http://screencast.com/t/3vlFBe9R7J
http://screencast.com/t/6s62OyriVV -
ps. The reason I have the Typekit upgrade but don’t use it is because when it was enabled on Photolia, some of my readers on slightly older browsers were seeing blank areas where text should be. That issue was never resolved:
So I decided “to heck with it” and reverted to the default theme fonts.
-
Hi, Jim
Sorry I took so long to get back to you. I’ll do some testing with the fonts as well and see if I can reproduce. Thanks for the extra information.
-
No worries. I trust you’re busy. Thanks for hanging in there. I’d surely like to see this spacing issue resolved!
-
Hi, Jim
We’ve been digging into this and found out the following:
If your open the post editor (WP-Admin) and type a new post with the browser inspector open, you’ll notice that each time you pressed space, a & nbsp ; will be added in the HTML in the web inspector and then disappear when you start typing a new word.
I see this behaviour in several themes, which tells me it might be intentional, but the jerky cursor behaviour only occurs in Photolia. The reason for this appears to be the Neuton font it uses by default. The reason you still see this in the editor after changing the font, is because changing the font only affects the front-end, but not the editor.
When testing this, I also noticed that when I accidentally left two spaces between words the & nbsp ; remained in the HTML, and consequently also rendered in Chrome when using the Neuton font, while not rendering in other fonts. That is the best explanation I can find for the random wide spaces that appears in your regular text.
I’m following up whether that editor behaviour of inserting the spaces is intentional, but aside from that the problem is between Chrome and the font.
The developer who has been helping with this has said that it won’t be possible to change the base font for this theme as it’s not one made by us, so the only workaround here is to use a different font on that theme. It won’t prevent the weird cursor behaviour in the editor, but it will prevent the display issues on the front end.
-
Kokkieh,
Thank you for digging deep on this, and pinpointing it to the default body font in Photolia.
I will try changing the body font to one of the Google fonts. I’m hoping that will avoid the bug some of my readers on older (but still supported) browsers were experiencing when I used the Typekit fonts.
I would still like to see the nbsp funkiness addressed in the product. I get this behavior in both the classic and new editors. I have detected three circumstances when I can fairly reliably get an nbsp to remain in the text:
1. After typing a comma
2. After pressing ctrl-i or ctrl-b to itailicize or boldface
3. In existing text, selecting a word and typing a different word in its place.I do all of these things all the time and would surely like it if the editors did not leave those nbsp’s in the text, to avoid any unfortunate rendering around line breaks and such. I hope you all can give this some attention.
Meanwhile, I’m off to choose some new fonts for my blog!
Thanks for your good work!
- The topic ‘Non-breaking spaces appearing as extra-wide spaces’ is closed to new replies.
WordPress.com Forums 