Make spaces/tabs/newlines visible with custom font instead of javascript

Question

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?

Answer 1

I don't think you can create a font with characters for special chars such as 'tab' etc.

Instead of replacing those chars with javascript, I would still use javascript to change the style of tabs.

These   are tabs

would become

These<span class="tabs">   </span>are tabs

and the tabs css class could have for example a red background.

.tabs{
background-color: red;
}