In testing new content for our site on mobile platforms, we discovered an unexpected but understandable context stressing the continuing importance of En Dash.  Some pages on our site include a date range listing a span of years, such as 1887 to 2010.  When viewing these on an iPad or iPhone, the text style looked wrong, which was confusing.  Upon closer examination, it was clear what was going on:  mobile Safari recognized these patterns as numbers with a specific semantic context.  Interestingly, iPhone saw them as a phone number, and iPad saw them as contact data.  Perplexed at first, I looked at the code and realized that the date range should properly be listed with an En Dash, not a hyphen.  The Wikipedia entry on Dash explains the difference between the two.  For web designers, the best piece explaining things is: The Trouble With EM ’n EN (and Other Shady Characters), from the site A List Apart. 

Here are screen shots from the test pages showing mobile Safari's treatment of dates with a hyphen and the correct view of them listed with an En Dash.  Just one more reason to remember to care about the semantic context of your code, down to every single character.


Hyphen iPad
En Dash iPad Screen Shot

This entry was posted on March 16, 2011 at 4:50 PM and has received 23509 views. Print this entry.