2

The problem

When viewing the HTML output from my website using the code inspector within Google Chrome, I get the spurious character ​ being injected in my code (snipped screen capture below).

enter image description here

It looks like &#8203 is a zero width space, but what is causing it?

To check it is not Google Chrome, I tried it in Firefox, and I get red dots, which if hovered, they show a caption of \u200b(snipped screen capture below).

enter image description here

I don't understand what is going on here because when, instead of visual mode, I view the block in HTML mode within WordPress (click the three dots on top of the block and click 'Edit as HTML') I have the following...

<p>Because it suggests something is being presented as science inaccurately or even deceptively, the term pseudoscience is often considered defamatory (<a href="https://plato.stanford.edu/entries/pseudo-science" target="_blank" rel="noreferrer noopener nofollow" aria-label=" (opens in a new tab)">Hansson, 2008</a>)​​. Accordingly, those termed as practising or advocating pseudoscience often dispute the characterization (<a href="https://en.wikipedia.org/wiki/Pseudoscience" target="_blank" rel="noreferrer noopener nofollow" aria-label=" (opens in a new tab)">“Pseudoscience,” n.d</a>.)​.</p>

No extra spaces or weird characters

What I have tried so far

  • Jetpack's spell checking facility adds code bloat which I had to manually remove so I disabled that and used Microsoft Word for spelling and grammar checking. This may have caused the issue, as suggested in comments, so I tried the suggestion to "put it in Notepad, then copy it again to the clipboard, and paste it on your WordPress", but the spurious injections are still there.
  • The same goes when adding a new article with the same information, but the notepad content pasted into the WordPress article content.
  • I have checked that it is not a plugin injecting the code by deactivating them one by one.

What is going on? How do I stop these spurious character codes being injected?

In case you need to see the full coding on the live site, go to http://www.whatstheproblem.co.uk/psychology/pseudoscience-in-psychology/ and it is in the last paragraph of the section "What is Pseudoscience?"

Improve this question
7
  • 3
    Was the content composed in WordPress, or in another program such as Microsoft Word? My experience with these odd characters is that they typically come from a word processing program, and since they are invisible you don't notice them until they start doing strange things to your HTML.
    – Reve
    May 14, 2019 at 15:40
  • Ah, you may have hit the nail on the head here @Reve For spelling and grammar checking I copied the preview text into Microsoft Word (Jetpack spell checking added spurious code itself, which I had to edit out manually), then after corrections, I pasted it back into WordPress. Is there a way I can sort this out?
    – Chris Rogers
    May 14, 2019 at 16:47
  • 1
    Put it in Notepad, then copy it again to the clipboard, and paste it on your wordpress.
    – Luis Alberto Barandiaran
    May 14, 2019 at 16:51
  • "it adds a == $0 at the end of the line" - that is irrelevant to your current issue. That is just how Chrome's object inspector works. If you select any element on any page you get that and allows you to interact with the element using the console (as the message suggests).
    – MrWhite
    May 14, 2019 at 17:59
  • 1
    I found this thread about this zero width space character. Apart from the definition, there are some suggestions and possible solutions there that might help you determine the cause: stackoverflow.com/questions/2973698/…
    – Luis Alberto Barandiaran
    May 17, 2019 at 15:13

1 Answer 1

Reset to default
1

I have finally found the problem and an easy solution.

The culprit

Even though when trying to narrow down any plugins causing the problem, I worked out that the offending plugin was a plugin I no longer use (Academic Blogger's Toolkit) because of other issues with it.

The zero width spaces were added wherever inline citations were added into the content, and were left behind after the plugin was deleted.

Frustration with removal without having to completely retype the article

Now the plugin has been removed, the problem has been resolved (no more zero width spaces will be injected). However, there are some left behind, the article is long, and copying and pasting the article code from the HTML mode editor into Notepad or Microsoft Word will copy the zero width spaces. Copying and pasting from Notepad will copy the zero width spaces back into your code.

Frustration free easy resolution

Download and use Brackets (Free). When pasting the code into brackets, the zero width spaces are shown up as red dots.

screenshot from Brackets

Delete the red dots, and you will have code clean of the zero width spaces. You are then safe to copy and paste the code back into WordPress.

To make editing them out quicker, search and replace is available in Brackets (Ctrl + H in Windows) copy one of the red dots and paste it into the search box.

Improve this answer
2
  • Glad you found an answer. You can also do a search and replace using regular expresssions/pattern matching with one of the better text editors.
    – Trebor
    May 18, 2019 at 15:03
  • Search and replace is available in Brackets @Trebor (Ctrl + H) copy one of the red dots and paste it into the search box
    – Chris Rogers
    May 18, 2019 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.