1163271 - Add a "Show Invisible Characters" feature to editor

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: General, enhancement)

Description

[Eric Shepherd [:sheppy]]

What problem would this feature solve?
======================================
Sometimes, pasted content includes stray   characters in the HTML. We almost never actually want these; they have a negative impact on our ability to lay out the content the way we want to.

Who has this problem?
=====================
All contributors to MDN

How do you know that the users identified above have this problem?
==================================================================
We have received complaints in IRC (today one person mentioned this being a problem, and many others piled on as well). It's also an issue I've run into a lot, especially as we get more and more new contributors who don't know about some of the quirks like this that we have learned how to avoid.

How are the users identified above solving this problem now?
============================================================
Source mode, then copying and pasting into other tools to find and correct these.

Do you have any suggestions for solving the problem? Please explain in detail.
==============================================================================
I checked and there are not yet any CKEditor plugins for this; there is a CKEditor bug for this issue (http://dev.ckeditor.com/ticket/5592) which reveals the complexity of a generalized solution.

I have a proposal, though. We know what fonts are being used, so there is no reason we can't build a customized version that replaces the   (and any other characters we might want to support making visible) with a subtle glyph of some kind which occupies the same width but isn't, you know, invisible.

Then we just have a button that, when clicked, tweaks the page's CSS to switch between the two fonts, and there you go!

It's a pretty easy solution to the problem. Not zero work, by any means, but certainly a workable solution as far as I can tell. I'm pretty sure this is a better solution than stuffing <span class="showInvisibles"> blocks around every single instance of these in the page.

Of course, maybe there are even better ways.

Is there anything else we should know?
======================================

Comment 1

[Sebastian Zartner [:sebo]]

The problem is not only related to contributors but also users, which copy the code from the samples on the pages. If they contain non-printable characters, it's very hard to find out why the copied code isn't working.

I like the idea of toggling the fonts, btw., which seems to be the easiest and a clean solution, as it has no side effects.

Sebastian

Comment 2

[Eric Shepherd [:sheppy]]

Yeah, the more I think of it, the more I like the font switching idea. It's easy to do and in fact could probably be a quick volunteer patch; a little customization of the font and a CKEditor plugin that toggles the font, and boom.

And I hadn't thought of the sample code copying problem. Agreed, that's a major issue.

Comment 3

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.