---

Many in the email community were surprised when Gmail for iOS started to replace the copyright HTML symbol and other symbols such as registered and trademark with an equivalent blue-hued image. The above image shows that this even affects Google's own email! I can't figure out why the folks at Google would want to do this other than to bring grief to email designers and developers.

The Gmail Goomoji

Looking at the code it appears that Gmail bundles a set of emoji's called "goomoji" and when it encounters matching characters it converts them to the equivalent Goomoji image.

&corp;

to

<img goomoji="00a9" data-goomoji="00a9" style="margin:0 0.2ex;vertical-align:middle;max-height:24px" alt="©" src="cid:00a9@goomoji.gmail">

The problem with this is that the Goomoji is 24px tall, so not only does your copyright symbol now look blue, it also looks weirdly large. Other characters that are affected include the trademark (TM) and registered (R) symbol. Also, it doesn't matter if you're using the HTML encoded version or Unicode version, Gmail will replace all variants of it. Fortunately, this issue appears to only appear in Gmail for iOS.

Fixes

If this is an unintentional Gmail bug, it may be reverted shortly, so you may not want to go through huge lengths to address this. Here are several options, from simplest to most involved.

Convert your symbols to plain text equivalents

Upside: Simplest fix to rid your email of Goomojis. Downside: Lack of symbols may not work with your brand guidelines. The simplest way to avoid the Gmail Goomoji is to change symbols such as ©, ® and ™ to (C),(R) and TM. They may not be elegant but they are universally recognized.

Resize the Gmail Goomoji to fit your text size

Upside: Makes the Goomoji less obvious. Relatively straightforward. Downside: Blue symbols disappear on text with blue backgrounds. Potentially confusing to readers. If you don't mind the blue hue, you can make the Goomoji less jarring by sizing the image to the size of your text. This can be done by wrapping the symbols with a class (ie. "goomoji") and then targeting any images within it with a CSS selector. By using the em unit the height of the image will correspond to your font size. Place this in the head:

<style>
.goomoji img{
  height:0.9em!important.
}
</style>

Wrap this around your copyright, registered and trademark symbols.

<span class="goomoji">&copy;</span>
or
<span class="goomoji">©</span>

Use an alt text trick

Upside: Symbols will inherit font colors, size and background colors. Downside: Faint grey border around symbols. You can make Gmail render the copyright symbol by placing it as an alt text in an image tag that does not reference an actual image.

<img alt="&copy;">

You can place this next to your symbols and only selectively display it when Gmail converts your symbol to an image by using a sibling selector that targets the first image. Since other clients would not convert your symbol to an image, there will be no first image to target. Note that the height and width of the image are sized so that there is space to display the alt text. If there is insufficient space to display the alt text, Gmail will display a blank space. The code below will hide Gmail's Goomoji image and display the alt text of the following image. The alt text image will initially be hidden so it will not appear in any other client. Place this in the head:

<style>
.goomoji img{
  display:none!important;
}
.goomoji img + img{
  display:inline-block!important;
  height:1.3em;
  width:1.2em!important;
  font-size:0.9em!important;
}
</style>

Convert your copyright text to the following.

<span class="goomoji">&copy;<img alt="&copy;" style="font-size:0px;width:0px"></span>

Use a styled text input field

Upside: Best result visually Downside: Font colors, size and backgrounds must be applied individually to the input fields. A lot of extraneous markup. One other option is to use a text input field. By putting the symbol in the value attribute, Gmail will display the symbol unchanged in the email. However, we need to style the input to hide the borders and apply font sizes and colors (if needed). We also need to add conditional comments to hide the input field from Outlook clients. All this extra markup makes this more trouble than its worth. However, this technique will make your symbols look very similar to the text around it which would be a good thing if you absolutely need the symbol to look like its original design. Place this in the head:

<style>
.goomoji input{
  display:none;
}
.goomoji img{
  display:none!important;
}
.goomoji img + input{
  font-size:inherit!important;
  line-height:1em!important;
  display:inline-block!important;
  border:none;width:1em;
  margin:0;padding:0;
}
</style>

Convert your copyright text to the following.

<span class="goomoji">&copy;<!--[if !mso]><!-- --><input value="&copy;" style="font-size:0;line-height:0;display:none;"><!--<![endif]--></span>

Unlike the alt text example, if you change your text color or background color, you need to set those attributes on the input element itself.

<span class="goomoji">&copy;<!--[if !mso]><!-- --><input value="&copy;" style="font-size:0;line-height:0;display:none;background-color:#000000;color:#ffffff;"><!--<![endif]--></span>

Test your fixes

I hope this article is helpful to you. If you discover some other ways to deal with Gmail on iOS' Goomoji, please share in the comments below. Hopefully this issue gets resolved quickly by Google but if you're looking to use one of these techniques, Email on Acid's code editor will come in handy, as it allows you to see how incremental changes in your design render on dozens of email clients, with Gmail on iOS one of them. Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!

Start testing today!