How to convert MS Outlook smiley (Wingdings) to something displayable in a browser? - html

Question

In the noble effort to re-invent every wheel, our company has recently rolled our own custom web-based e-mail app, of which I was the primary designer.
One thing I've noticed is that smileys coming in from MS Outlook-based e-mails (sent from third parties) are not appearing correctly. Example: A happy face just displays a J
The HTML of the inbound message comes in like this:
<span style="...;font-family:Wingdings;...">J</span>
I know that Firefox and Chrome do not support the Wingdings font because it is non-standard. However, I am tasked with coming up with a fix.
Is there a good way to either 1) force the browser to load and use Wingdings or 2) otherwise convert the J to a smiley?
I'd rather not do anything crazy like try some wingdings-detection-regex - or even worse, parse the DOM - just to get some stupid emoticons working. Maybe there is already some library out there that already handles this?
For what it's worth, GMail seems to not 'fix' this problem either. iOS doesn't in the message view, but puzzlingly does fix it in the inbox view (replaces the J w/ emoji)
EDIT
To clarify, this question is regarding inbound messages from third parties. Outlook, by default, autocorrects ":)" to the Wingdings smiley. There's nothing I can do to prevent this coming in. What I need is a solution to correct for this.
EDIT 2
Again, the app itself is a web based e-mail client (Gmail, etc.). E-mails go in to here, NOT to users' individual Outlook/phones/other e-mail clients. It only goes into the web app.

Answer 1

To avoid having to parse the HTML or manipulating the DOM, a simple solution would be to use CSS3 web fonts by linking the Wingdings font-family to a copy of the Wingdings font file on your server:
<style>
#font-face {
font-family: Wingdings;
src: url(link_to_wingdings_font_file.ttf);
}
</style>
However, a license is required for this approach.

Answer 2

You could embed the SWEC (Symbola-based Wingdings Emoticons Compatibility) font: https://drive.google.com/open?id=0BwDrnPQfa-aMOEx0bEZCQUNrSGs
It provides basic compatibility with Wingdings emoticons. (In Wingdings, "J" represents a smile, "K" represents a lack of expression, and "L" represents a frown.) Background: certain versions of Microsoft e-mail clients still in use change user-typed expressions such as ":)", ":|", and ":(" into "J", "K", and "L", respectively, and then specify Wingdings as the font family; recipients on systems which do not include a Wingdings-compatible font are not able to see the intended emoticons, which can cause confusion.

Answer 3

You need to manually substitute it prior to sending the email as you have no control over what fonts the reader has installed. You also can't include anything outside bland old html and css (unless you want to mess with VML)
First I would try running your wingding through a html converter to see if there is a html code for it.
Besides that, you could try a webfont wingdings equivalent, however there are issues with Outlook playing nice when webfonts are imported in email (ignores your font stack, falling back to Times New Roman).
Besides that, all that is left is ZephyrusDigital's suggestions of using an image or :).

Answer 4

Against my better judgement I have decided to go for the quick hack and just use a regular expression. Here it is for anyone else that runs into the same problem:
$html = preg_replace('/\<SPAN*?(Wingdings)*?[^\>]*\>J(\<o\:p\>\<\/o\:p\>)*\<\/SPAN\>/i', ' :) ', $html);

Answer 5

use :)
kidding!
why not save the wingdings smiley in photoshop as a png, or make another custom one? you could use <img src="http://something.com/images/smiley.png" style="display:inline-block;"/> and it won't look weird in a text block as long as it isn't taller than your line-height.