Display formatting symbols (invisible characters) on webpages and text forms

Question

I am using various online tools for translation and proofreading, and I find that it would be very interesting to be able to display the most common formatting symbols in a browser.

(Spaces and non-breakable spaces are be very different and important, as is being able to count line breaks at a glance for example).

I believe that since they are encoded by different HTML codes, there should be a way to display them within a webpage, but couldn't find any way to do this no matter what browser I looked into.

Here's what the difference looks like in the HTML between non-breakable space and regular space:

jusqu'à 19 heures

It seems that it would be so simple to program it into an app or as an add-on (replace regular space with the regular space symbol, replace   with non-breakable space symbol, etc), that I can't understand how there's almost nothing about such a feature online.

Answer 1

After asking this question here, and seeing that this feature wasn't available in browsers that currently exist (natively or through add-ons), I decided to take the matter in my own hands and develop this myself.

I created a small bookmarklet called Interpunkd that displays the invisible characters on a webpage and allows writers to proofread their copy from within their browsers.

This is Interpunkd.

I was asking this question here because in my line of work many of my colleagues use online writing tools, and use different computers or browsers.

After being stumped trying to find a way to do this, and after asking this question here fruitlessly, I remembered of some bookmarklet tools I frequently use (such as Fount, FFFFOUND! or Katamari Hack), and decided to develop this feature as a bookmarklet to allow anyone to display invisible characters on almost any webpage, and on any browser/OS.

_{Note: please let me know if this answer in any way violates the guidelines of this community. I completely understand that it might appear to be self-promotion for something I developed, but please consider that (1) this tool is free for anyone to use, that (2) it didn't exist at the time I asked the question, nor did I know I was going to have to develop it myself back then, and that (3) this is the closest answer possible to this question, to my knowledge. If you disagree, please let me know in the comments rather than down-voting, thanks.}

Answer 2

I don't know of any browsers that will show invisibles, but there are work-arounds. Since you are already "using various online tools for translation and proofreading," I assume you are also copy and pasting between the tools. The easiest solution would to just paste the text into a different text editor as an intermediate step. This should reveal tabs vs. spaces, and different types of line endings.

This will not show the difference between non-breaking spaces and spaces, though. You could view the source and search for " " but that will be hit or miss, because people aren't consistent.

Answer 3

Not sure if this is a solution, but if you are using FireFox, you can highlight the text, right-click, and use 'View Selection Source', assuming its text present in the HTML of the page. For example, your previous comment looks like this:

<span class="comment-copy">There is actually a difference in text editors between breaking and non breaking spaces (cf my pages link), but the reason I ask is that I would gain productivity if I didn't have to copy and paste hundred of strings every day from browser &gt; text editor then text editor &gt; pro correction software...</span>

Another thing that might be useful is to do the same but select 'Inspect Element'. There might be other things you can do with these tools in FireFox, or you might be able to come up with some sort of script that does this.