In a web page textarea or div, I want to make whitespace visible, i.e., show spaces as little dots ∙, tabs as “⇥”, and newlines with another character as well. So that:
These are spaces
These are tabs
will show up as:
These∙are∙spaces↵
These⇥are⇥tabs↵
This can be done with javascript that replaces the ” ” characters with “∙” and so forth, though that is a bit of a messy solution and you have to deal with catching the user typing spaces or pasting. Moreover if the user does a find (ctrl-f) for the text “These are” she will not find the text because the spaces are actually ∙ chars.
Instead, I have found what seems to be a cleaner solution: create a custom font in which the space is simply a visible character. It works great for spaces — no messy javascript required! However, I was not able to figure out if I could edit the tab character or the newline character in a font using the pretty bad free font editing software I found.
Does anyone know if it is possible to edit the tab and/or newline characters in a font, and if so, can you recommend a font editor program that would be easiest for me to do this in?
Intuitively, I would expect that replacing spaces by some glyphs works, with the usual caveats (downloadable fonts don’t work absolutely universally), but tabs and newlines are a different issue. They are not rendered so that a glyph is picked up from a font and displayed. Instead, they cause formatting actions, like leaving horizontal space and moving to start of next line.
A quick experiment supports this analysis. Using FontForge, I replaced the space glyph in a font with a graphic glyph, and it gets displayed instead of the space. But doing the same for tab does not change anything. The tab just causes spacing, which depends on its position on a line, as defined in HTML specifications.