Context: My app has a phone number input field that does not restrict the input characters. That was the easiest way to allow input of (, ., -, which are the only characters that I was expecting users to enter (yes, I know, not best practice ). I noticed that a user entered (123) 5550123 -- which was invalid for my (naive) logic because it contains a non-printable "soft hyphen" character (0x00AD). If the soft hyphen were made visible, it would look like (123) 555[0x00AD]0123.
Question: I do realize that I really just need to sanitize my text inputs better. However, I'm curious to know whether it is possible, using only CSS, to force all non-printable Unicode characters to be visible in a particular DOM element (such as an input field)? I'm wondering, for example, if there's a specific font I could use that maybe only has the 128-symbol ASCII character set, and shows everything else (as well as all the ASCII control characters) as a box or other "warning" symbol?