Nov 29 Replace:
Gmail has mounted this subject.
Many within the e mail neighborhood have been stunned when Gmail for iOS began to interchange the copyright HTML image and different symbols equivalent to registered and trademark with an equal blue-hued picture.
The above picture reveals that this even impacts Google’s personal e mail! I can’t determine why the oldsters at Google would wish to do that aside from to convey grief to e mail designers and builders.
The Gmail Goomoji
Wanting on the code it seems that Gmail bundles a set of emoji’s referred to as “goomoji” and when it encounters matching characters it converts them to the equal Goomoji picture.
&corp;to
<img goomoji="00a9" data-goomoji="00a9" model="margin:0 0.2ex;vertical-align:center;max-height:24px" alt="©" src="https://www.emailonacid.com/weblog/article/email-development/gmail-ios-replacing-copyright-symbols-with-blue-emoji-and-how-to-fix-it/cid:00a9@goomoji.gmail">The issue with that is that the Goomoji is 24px tall, so not solely does your copyright image now look blue, it additionally seems weirdly massive.
Different characters which can be affected embody the trademark (TM) and registered (R) image. Additionally, it doesn’t matter when you’re utilizing the HTML encoded model or Unicode model, Gmail will exchange all variants of it. Fortuitously, this subject seems to solely seem in Gmail for iOS.
Fixes
If that is an unintentional Gmail bug, it could be reverted shortly, so it’s possible you’ll not wish to undergo large lengths to deal with this.
Listed below are a number of choices, from easiest to most concerned.
Convert your symbols to plain textual content equivalents
Upside: Easiest repair to rid your e mail of Goomojis.
Draw back: Lack of symbols could not work together with your model tips.
The best technique to keep away from the Gmail Goomoji is to alter symbols equivalent to ©, ® and ™ to (C),(R) and TM. They will not be elegant however they’re universally acknowledged.
Resize the Gmail Goomoji to suit your textual content dimension
Upside: Makes the Goomoji much less apparent. Comparatively simple.
Draw back: Blue symbols disappear on textual content with blue backgrounds. Doubtlessly complicated to readers.
In case you don’t thoughts the blue hue, you may make the Goomoji much less jarring by sizing the picture to the scale of your textual content. This may be completed by wrapping the symbols with a category (ie. “goomoji”) after which focusing on any photos inside it with a CSS selector. Through the use of the em unit the peak of the picture will correspond to your font dimension.
Place this within the head:
<model>
.goomoji img{
top:0.9em!necessary.
}
</model>Wrap this round your copyright, registered and trademark symbols.
<span class="goomoji">©</span>
or
<span class="goomoji">©</span>
Use an alt textual content trick
Upside: Symbols will inherit font colours, dimension and background colours.
Draw back: Faint gray border round symbols.
You can also make Gmail render the copyright image by putting it as an alt textual content in a picture tag that doesn’t reference an precise picture.
<img alt="©">You possibly can place this subsequent to your symbols and solely selectively show it when Gmail converts your image to a picture by utilizing a sibling selector that targets the primary picture. Since different shoppers wouldn’t convert your image to a picture, there will probably be no first picture to focus on.
Observe that the peak and width of the picture are sized so that there’s house to show the alt textual content. If there’s inadequate house to show the alt textual content, Gmail will show a clean house.
The code beneath will disguise Gmail’s Goomoji picture and show the alt textual content of the next picture. The alt textual content picture will initially be hidden so it is not going to seem in some other shopper.
Place this within the head:
<model>
.goomoji img{
show:none!necessary;
}
.goomoji img + img{
show:inline-block!necessary;
top:1.3em;
width:1.2em!necessary;
font-size:0.9em!necessary;
}
</model>Convert your copyright textual content to the next.
<span class="goomoji">©<img alt="©" model="font-size:0px;width:0px"></span>
Use a styled textual content enter area
Upside: Finest end result visually
Draw back: Font colours, dimension and backgrounds have to be utilized individually to the enter fields. Quite a lot of extraneous markup.
One different possibility is to make use of a textual content enter area. By placing the image within the worth attribute, Gmail will show the image unchanged within the e mail. Nevertheless, we have to model the enter to cover the borders and apply font sizes and colours (if wanted). We additionally want so as to add conditional feedback to cover the enter area from Outlook shoppers. All this further markup makes this extra hassle than its value.
Nevertheless, this system will make your symbols look similar to the textual content round it which might be a very good factor when you completely want the image to seem like its authentic design.
Place this within the head:
<model>
.goomoji enter{
show:none;
}
.goomoji img{
show:none!necessary;
}
.goomoji img + enter{
font-size:inherit!necessary;
line-height:1em!necessary;
show:inline-block!necessary;
border:none;width:1em;
margin:0;padding:0;
}
</model>Convert your copyright textual content to the next.
<span class="goomoji">©<!--[if !mso]><!-- --><enter worth="©" model="font-size:0;line-height:0;show:none;"><!--<![endif]--></span>
In contrast to the alt textual content instance, when you change your textual content shade or background shade, it is advisable set these attributes on the enter ingredient itself.
<span class="goomoji">©<!--[if !mso]><!-- --><enter worth="©" model="font-size:0;line-height:0;show:none;background-color:#000000;shade:#ffffff;"><!--<![endif]--></span>
Check your fixes
I hope this text is useful to you. In case you uncover another methods to take care of Gmail on iOS’ Goomoji, please share within the feedback beneath.
Hopefully this subject will get resolved rapidly by Google however when you’re trying to make use of considered one of these strategies, E mail on Acid’s code editor will come in useful, because it permits you to see how incremental modifications in your design render on dozens of e mail shoppers, with Gmail on iOS considered one of them.
Attempt us free for 7 days and get limitless entry to e mail, picture and spam testing to make sure you get delivered and look good doing it!
Begin testing right this moment!
