meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Archive: 15 January 2014

Unicoding Font Styles

Last night, Kris Straub of webcomic fame, most recently the excellent Broodhollow, did something that I’d always suspected might be possible, but hadn’t figured out where to go to make it happen.  He showed me the way, and so I (once again) bow to him in reverence.  I’ll illustrate what he did with the following image of a two-item list (more on why I used in image in just a moment).  The first item in the list uses markup and CSS.  The second does not.

A rendering of the test case, to which this image is a link.

The first list item, as I said, uses elements and CSS: em and strong, plus all the styles that apply to them.  The second item uses Unicode symbols from the Mathematical Alphanumeric Symbols range of Unicode, U+1D400 through U+D7FF.  (See also a PDF from the Unicode Consortium, if you’re into that kind of thing.)

You can see the test file that was used to produce the image, and you definitely should see it if you’re thinking about using this technique.  It’s not as straightforward as might first appear.  For example, the reason I have an image with a link to a testcase is that some combination of WordPress, PHP, or MySQL refuses to allow me to put the raw Mathematical Alphanumeric Symbols into this post.  Every time I tried, everything from the first such symbol onward was just dropped completely when I saved a draft of the post.

The fun part is that any service that supports Unicode and doesn’t have those sort of glitches—say, Twitter or Facebook—can serve up those symbols in a tweet or a post, thus allowing you to add italics, boldfacing, fraktur, and other “faces” to your social networking.  At that point, it’s up to the user agent and OS to render the symbols, if they can.

And lots of them can, at least on the desktop.  My limited survey revealed that most Windows 7 and 8 browsers are fine, though not Chrome; Windows XP, on the other hand, saw broad failure.  OS X browsers, no problems; ditto various flavors of Linux.  On the other hand, iOS and Android mostly saw failures, but apparently some clients were okay, so the failures might be problems with individual clients and not the OS.  Nobody let me know how Opera Mini did.  If you’re inclined to report your results for the test file, feel free in the comments, though please check to see if your browser/OS combo has already been reported before you do (and if you got a different result that someone with the same combo, definitely report your result!).

The real problem likely comes in accessibility, as Chris Lilley pointed out: “Chance of screen reader understanding, near zero.”  Could someone test that theory and report the results in the comments?  I’d be very interested to know what happens.

I’m not recommending that people do this, to be clear.  The Unicode support issues alone are enough to discourage use, and if the accessibility problem holds, that’s an even stronger disincentive.  But who knows?  Maybe in a few years, both problems will have been resolved and social media clients will let us boldface, italicize, fraktur, and even double-stroke our little e-missions.

January 2014
SMTWTFS
November February
 1234
567891011
12131415161718
19202122232425
262728293031  

Archives

Feeds

Extras