9

We're making an app in phonegap using web-pages in the UIWebView, and in this product we allow apple's emojis, which we apply the AppleColorEmoji font to, making it possible to scale them.

After updating to IOS 7 on both iPad and iPhone, the emoji with font AppleColorEmoji that previously allowed for scaling to whichever size wanted, no longer scales beyond 16px font-size (it can scale smaller). It still scales as intended on the devices with IOS <7

I fear this is something they introduced in IOS 7 intentionally. Have anyone else experienced this problem, and perhaps even a solution to it?

5
  • I know, apple have now completely negated the whole point of having emoji as a scaleable font by making it unscalable! You are, once again, better off using images instead. Nov 4, 2013 at 11:57
  • Problem is, as I understand, I can't use apple's emoji images without aquiring the rights to use them from Apple (not free).
    – AskeG
    Nov 4, 2013 at 15:57
  • Apple have started taking down apps that use emoji so watch out. There are other icons you can purchase but the quality usually is not so good. Nov 4, 2013 at 17:28
  • What I understand is they only act on apps using the image version of the emojis without permission. The unicode characters that the AppleColorEmoji font interprets as a smiley is the iPad itself that handles that.
    – AskeG
    Nov 6, 2013 at 9:56
  • There are other emoji images you can purchase for commercial use. If you want to use the Apple ones then you have to conform to their restrictions - no larger than 16px!!! Nov 7, 2013 at 9:49

7 Answers 7

6

In Webkit, to scale such emoji character in a HTML element:

<span style="-webkit-transform: scale(5); position: absolute;">&#x1f47f;</span>

Downsides to the above include that the positioning will need adjusting for the size, since the transform has to be applied to elements with position absolute. Pixelation could also happen, if the emoji is transformed too large.

2
  • Thanks so much! I used your info to make a nice cross browser solution. font-family: "AppleColorEmoji","Segoe UI Symbol"; font-weight: 100; -webkit-transform: scale(1.9); -moz-transform: scale(1.9); transform: scale(1.9); position: absolute;
    – JakeCigar
    Jul 9, 2015 at 21:01
  • @JakeWolpert How do you make the container of the emoji fit? For example, I have <div id="container"><span style="transform: scale(5)" ...>&#x1f600;</span></div>, how can I make the container fit?
    – Ye Liu
    Mar 29, 2016 at 18:00
2

If this is still interesting for anyone (I forgot that this was still open) then the "solution" was to set the meta tag for iPhones to:

<meta name="viewport" content="width=320"/>

This ensures that the iPhone scales the content up to fit the 640 pixels (or more) the screen has, and the emojis with 16px size will now be twice as big. However, this will only scale them up to a reasonable size. It still doesn't fix it for the people wanting to control the font-size completely.

2

Nowadays, you can use image files from Google Noto, EmojiOne, Twemoji, or Emojidex.

Even if you don't have scaling issues, this ensures that emoji characters display correctly in every browser.

1

iOS WebKit https://trac.webkit.org/changeset/188737 fixes this (but it hasn't shipped yet).

0

Looks like this one is fixed in iOS 10.

0

I have a great scenario here to learn if it's the OS:

  • I have an iPhone 4s, iOS 9.3.5: small emoji
  • I have an iPhone 5s, iOS 9.3.5: small emoji
  • I have an iPhone 6s, iOS 10 GM: big emoji scale from css font-size property
  • I am updating the iPhone 5s from 9.3.5 to iOS 10.0 as I type this, so we'll see if this fixes it.

My initial hypothesis was that it was related to viewport size, but after hooking the 4s/9.3.5 up to the safari browser tools with the 30-pin cable interestingly, the bounding boxes of the emoji scale, just not the glyph on screen. There's no way I was able to effect that with CSS.

¯\_(ツ)_/¯ I'll update this once the 5s updates.

Edit: Once I updated the 5s to 10.0 the emojis were resizing. It looks like iOS version was the issue.

-4

If you want to scale Emoji characters more than 16px, then you'll have to use AppleColorEmoji Fonts. This is the only available font that can scale Emoji beyond 16px.

1
  • 2
    If you re-read the question, you can see that I'm using the AppleColorEmoji font. The issue is that out of the box, Apple no longer supports scaling the font beyond 16px anymore as of iOS 7.
    – AskeG
    Dec 6, 2013 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.