3

I have a textarea with content that displays like this:

textarea

What I want it to show are the non printable characters, too, like white space and new lines (screenshot is taken as an example from libre office):

example from libre office

Is this possible to display the non printable characters like this in a textarea?

Markus
  • 5,667
  • 4
  • 48
  • 64
  • You must detect this using split or explode and seeking for those chars, then replace it properly – JoelBonetR Sep 16 '16 at 07:58
  • 1
    Maybe you could use a custom font that has viewable definitions for those characters? I have no idea though how a font file could work like this... – Joshua Muheim Feb 23 '17 at 21:07

2 Answers2

6

I just came across the same problem while searching for Unicode characters inside a text and was not able to find a solution.

So I made a basic one at https://jsfiddle.net/boppy/3orednps/8/

Please accept this as a starting point only. I made it for being used in chrome and only adopted minor things to be able to run in FF. - At least it adds all the chars OP asked for.

It basically is (respect the order!):

        // _spc ==> Single Space Char chr(32)
        html = html.replace(/ /g, '<span class="_m _spc">&middot;</span>');

        // _tab ==> Tab Stops chr(9)
        html = html.replace(/\t/g, '<span class="_m _tab"></span>');

        // CarriageReturn chr(13)
        html = html.replace(/\r/g, '');

        // _brk ==> NewLine chr(10)
        html = html.replace(/\n/g, '<span class="_m _brk">¶</span><br>');

        // _np  ==> non-printable lower ASCII range chr(0)...chr(31) + personally known char(s)
        html = html.replace(/([\u0000-\u001F\u00AD])/g, '<span class="_m _np">$1</span>');

        // _uc  ==> Upper unicode range starting chr(255)
        html = html.replace(/([\u00FF-\u9999])/g, '<span class="_m _uc">$1</span>');
raviiii1
  • 936
  • 8
  • 24
boppy
  • 1,753
  • 12
  • 10
-4

you must use ASCII to HTML codes to print those chars, it's not a CSS job, nor a textarea.

You can find the codes here: http://www.ascii.cl/htmlcodes.htm

Cheers!

JoelBonetR
  • 1,551
  • 1
  • 15
  • 21
  • I only want to display them so they get noticed (like trailing whitespace). (btw: I cannot simply strip trailing whitespace because sometimes it is on purpose, but sometimes not). I hope there is a more simply solution than replacing them (by JS). – Markus Sep 16 '16 at 09:55
  • you can also replace it with php or some server lang. The solution is this, maybe someone created a script to reach this, but if theres some script, someone had to hand-made it, so there's no easier way to reach this. What do you want? put a keyword on somewhere and let that special chars appear by magic forces? :/ – JoelBonetR Sep 16 '16 at 10:01
  • 1
    "put a keyword on somewhere and let that special chars appear by magic forces" yes! That is exactly how it works in every word processor ;-) I hoped for some CSS rule or already well written JS script I did not find. Looks like there is not. Server side replacement is no solution, because what happens when the user edits the text in the textarea? – Markus Sep 16 '16 at 18:19
  • "That us exactly how it works in every word processor". NOPE. Someone programmed it... If user edit a text on text area, you can raise a jquery function "on key press". Huh? – JoelBonetR Sep 17 '16 at 13:02