Troubleshooting: Special Characters in Email
A quotation mark, a dash, a copyright symbol, a registered trademark, a bullet point.
’ “ ” — – © ® •
What do these symbols have in common? They help organize content, they are all over your emails, and chances are, they are not displaying 100% correctly in all email clients. The devil is in the details, as the saying goes. And if you're not careful, those details could have a major negative impact on your message.
Your Browser Can Handle It
Dreamweaver, Visual Studio, Microsoft Word, and Outlook each have their own particular stylization of these symbols, but you might not be aware of that. Modern web browsers are perfectly capable of interpreting these program-specific symbols, and presenting them appropriately on the page.
Email HTML: the Weakest Link
Email HTML has come a long was in the past few years, but its slowness to adapt (largely due to differences in email client display rules) is still a major impediment, and this is a perfect example. While many email browsers will interpret these "special characters" correctly, some just won't (we're looking at you, Outlook!). If the code was pasted into your ESP from another program, these incorrect characters might make their way into the final display for all email clients.
Hidden in Plain Sight
Part of the reason that this problem is not better documented, is that many never notice. Whether they are using an email client that can handle such issues, or they can't tell because the program they are using to code the email is displaying them correctly, it can be hard to detect that there is a problem at all.
Compare how the code looks in Dreamweaver against the end result in Outlook.
Exposing Special Characters
So how can you find these hidden errors?
The easiest way is to Paste as Plain Text (a secondary copy/paste option when right-clicking) into a plain-text code editor program ( eg. CodeWright ). You should be able to easily find them, as they will be laid out in full:
Without a special program, it's possible to look for these characters. If you notice that a quotation mark is curved or stylized in a special way, then you might well be looking at one. If you are serious about 100% universal html rendering, learning your html coding program is critical to unlocking this mystery.
Find & Replace
Ultimately, there is only one way to be sure you are displaying special characters correctly: hard-coding them as HTML symbols (using Hexidecimal code).
Each ond of these characters has an HTML signifier that you can use in it's place. Simply use the Find and Replace functionality of your coding software to locate each character and replace it with it's hard-coded replacement.
Here is a list of common symbols and their HTML representatives:
| Single Quote (left) | ‘ | ‘ |
|---|---|---|
| Single Quote (Right) / Apostrophe | ’ | ’ |
| Double Quote (Left) | “ | “ |
| Double Quote (Right) | ” | ” |
| Dash (Long) | – | – |
| Dash (Extra-Long) | — | — |
| Copyright | © | © |
| Registered (R) Ball | ® | ® |
| TM (Trademark) | ™ | ™ |
| Bullet Point | • | • |
| Accented E (Spanish Language) | é | é |
