html - How to display whitespace characters using Unicode for debugging/editing -

i want display whitespace characters while debugging or editing text replacing them sensible unicode code points , colouring them grey instead of black.

for example, replace

• space u+0020 middle dot·u+00b7
• no-break space u+00a0 medium small white circle⚬u+26ac
• rightwards arrow→u+2192 tab u+0009.
• and on...

i'm looking sensible glyphs for:

• carriage return u+000d
• newline/line feed u+000a.

i don't want use pilcrow sign¶u+00b6 doesn't intuitively correspond either rather concept of new paragraph. there downwards arrow corner leftwards↵u+21b5 again, seem more combination symbol representing either 1 individually.

when have mixed line endings want able see character being used (or both). displaying output in html in browser.

currently can't think of better symbols than: - leftwards arrow←u+2190 carriage return - downwards arrow↓u+2193 newline.

i aware of symbol carriage return␍u+240d, symbol line feed␊u+240a , symbol newline␤u+2424 detail hard see on them.

i don't want use \r , \n 2 reasons, r , n little similar (not much, little) , takes 2 characters display them instead of one. however, if don't better suggestions might alternatively use downwards arrow corner leftwards↵u+21b5 carriage return , rightwards arrow corner downwards↴u+21b4 newline.

as you've said, u+21b5 (↵) choice carriage return. note symbol on enter key, has been in use since days of electric typewriters. name comes from, since literally return carriage holding paper , moving under ink ribbon head. such think has become ingrained enough in users of keyboards intuitively recognizable.

since you've noted concerns regarding visibility, however, consider u+23ce (⏎). symbol part of unicode standard express purpose of representing return; might interpreted meaning new line in general, combination of carriage return , line feed (depending on system).

u+21b5 (↵) part of unicode arrows block, while u+23ce (⏎) part of "miscellaneous technical" block. second 1 closer seems useful technical considerations yours, rather regular arrow.

that leaves line feed. when start think is, choice return arrow becomes questionable. line feed instruction moving down line. carriage return moves caret ("carriage") start of line. line feed doesn't have combined carriage return, nor carriage return have combined line feed (although senseless not to). on typewriters starts making sense. after typing line swing carriage start, scroll paper upwards. carriage return + line feed. see why "new line" might make sense combination of these 2 historical purposes, , why can used in either order. technically can line feed without carriage return , continue typing in column left off @ previous line. reason brings our ↵/⏎ question symbol seems imply carriage return , line feed. indeed, on electrical typewriters , word processors results in full new line.

so, how represent line feed? arrow pointing down seems intuitive choice, might need rethink our carriage return well. u+21e9 (downwards white arrow, ⇩) visually (likely, given glyphs may vary) congruent ⏎. if we're going that, might use u+21e6 (leftwards white arrow, ⇦) carriage return.

what choose options? well, think choice technically superior characters unicode "control pictures" block. these u+240a (␊) line feed, , u+240d (␍) carriage return. appeal programmer in me because last byte of code point either corresponds ascii code them. understand can hard make out on screen , usability may more important. lots of text editors go variation of when asked show symbols.

so i'd options are...

• ␊ , ␍ being technically correct.
• ⇩ , ⇦ visual clarity, being in same code block , consistent in presentation given font.
• ↵ or ⏎ carriage return being recognizable, , other option line feeds; possibly confusing, since angled arrow kind of implies carriage return + line feed.

also make sure pick shown in majority of browsers, varying default fonts on various browsers , systems. noticed of code points supplemental blocks didn't show when went through utf-8 table.

finally, 1 remark. necessary use unicode symbols? notepad++, favourite text editor, uses big "cr" , "lf" symbols on gray background when symbols visualized. perhaps can use images (preferably scaled according font size in css)?