To summarize the problem: in fixed-width fonts on iOS, spaces, question marks, and hyphens/dashes all display wider than letters, numbers, and other symbols. Replacing the dashes with –es fixed them, but there was no HTML entity fix for question marks or spaces (all the special spaces display either wider or narrower than regular characters).
I was experimenting with different ways to try to get the characters the same width, and I was going to try wrapping the “bad” characters in a span so I could style them differently. What I found was that characters wrapped in a span display at a different width than either the “normal” or “bad” characters not in a span, so it didn’t serve my purpose. But, I also noticed that (almost) all characters (both “normal” and “bad”) displayed at the same width when they were placed into spans!
Incidentally, spaces still didn’t display at the right width, nor did any of the special space HTML entities. (It seemed inconsistent–spaces seemed OK on iPad, but not on iPhone.) The best solution I’ve found so far (and it’s not a good one for the sake of copy-pasting text) is to replace the spaces with an underscore, and style the spaces to be non-visible.
So a solution would go through my code to output, take all the text (non-HTML) characters, and wrap each of them in a span. This was easier on the client-side than the server-side, because the browser has already parsed my document into DOM objects, so it’s easy to tell what’s plain text characters.
Another limitation of this setup is that it can’t be used for editing text in textareas–it can only be used for displaying text.
Note: this has been tested very little! No warranty it won’t erase all your data. If you find cases where it doesn’t work, and you can make it better, let me know and I’ll post the updated version here.
Download the source, or check out an example of it in action, which allows you to see the text before and after the fix is applied.