3

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.

Community
  • 1
  • 1
DOOManiac
  • 6,066
  • 8
  • 44
  • 67

5 Answers5

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.

user3746044
  • 11
  • 1
  • This approach is interesting, but it doesn't seem to work. For evaluation purposes, can I not just use the wingding.ttf included in Windows? Or must the TTF be specially formatted? (It seems to work if I use the DroidSans.ttf instead...) – DOOManiac Jun 16 '14 at 20:11
  • 1
    Hmm you're right... With Chrome on Windows, specifying Wingdings uses the correct font, but when loading the ttf manually via the @font-face approach (I mapped a dummy font-family name on wingding.ttf) it doesn't work. Very strange, since I would expect both approaches to use the same ttf font file... Other fonts seem to work just fine – user3746044 Jun 29 '14 at 14:54
0

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 :).

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • This is for *inbound* e-mails from third parties - nothing I can do to stop people from using Outlook's :) autocorrect – DOOManiac Dec 04 '13 at 15:40
0

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);

DOOManiac
  • 6,066
  • 8
  • 44
  • 67
0

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.

LoreneJGoodwin
  • 16
  • 1
    Forgive my skepticism, but I did some research and can't find this font referenced anywhere else except for an identical copy & paste from other 1-post usernames across StackExchange, TechNet, and some other sites. Because font files can be attack vectors, I'm going to err on the side of caution and not use your binary. That said, your approach is a fantastic idea: Just make my own font! That is what I ended up doing using some free online tools and then using the CSS `@font-face` declarations to include it in my spreadsheet. In the event that you are not a virus author, thank you! – DOOManiac Apr 07 '16 at 17:25
-1

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.

zazzyzeph
  • 1,727
  • 1
  • 12
  • 19
  • you may have to edit your png to vertically correct for your font's baseline as `vertical-align` isn't supported in outlook. – zazzyzeph Dec 03 '13 at 22:39
  • This does not answer the question. I need to detect when to do something with the Wingdings content - I know what to do once I get it (replace it w/ a unicode smiley or do what you are suggesting) – DOOManiac Dec 03 '13 at 22:40
  • 1
    Right. Well my suggestion came because to me you are trying to accomplish the impossible. How would you use RegEx in an html file for email once it's in someone's inbox? You can't use ` – zazzyzeph Dec 03 '13 at 23:12
  • 1
    Sorry for the confusion. The web app *is* the inbox. We re-created our own proprietary web mail client. – DOOManiac Dec 04 '13 at 15:42