Better representation of new line and space characters in the translation-editor textarea

[ib]

Describe the problem

There are five characters whose representation is currently a bit confusing: newline, space, thin space, non-breaking space, and narrow non-breaking space.

First of all, there is an inconsistent display of line breaks and spaces between the source string and the translation-editor textarea (although the line break is not always displayed differently).

Furthermore, spaces are displayed the same as their non-breaking counterparts and are therefore indistinguishable.

Describe the solution you would like

The display should be the same in both textareas and spaces should be distinguishable from their non-breaking counterparts.

Spaces and non-breaking spaces should be the same width, spaces with a dot in them, non-breaking spaces without.

Thin spaces and narrow non-breaking spaces should be smaller (as they already are, but perhaps a little wider, i.e. as wide as the current representation of the space), thin spaces with a dot in them, narrow non-breaking spaces without.

Describe alternatives you have considered

No response

Screenshots

Inconsistency:

Indistinguishability: (showing: space,thin space,non-breaking space,narrow no-breaking space)

Additional context

No response

[nijel]

@meel-hd Any ideas how to make this better?

[meel-hd]

@nijel first they should be at least consistent.

[nijel]

Yes, but how to achieve that? The editor is a standard textarea with an overlay based on Prism.js doing syntax highlighting, so you can not really change the width of characters there as we do in Python based highlighting when showing the source.

[ib]

I don't want to sound like I know anything about implementation, but don't you already do something like this with the newline character? It usually (though not always) appears in the translation-editor textarea as:

[meel-hd]

@nijel maybe we can use a div with contenteditable attr set to true. It will make the div input behave like a textarea, but with the advantage that we can use span tags to style parts of the content as we want (highlight, replace, underline, give custom width, etc). At the end we can get the raw text entered by calling the method innerText or textContent on the div .

[ib]

If there is a way to achieve this, I suggest using ␣ (U+2423) to render non-breaking spaces.