As designed Emoji and default smilies are different sizes

[Jake B.]

Affected version

2.1.0

For example:

Input:



Output:



This only occurs if you're using a different font size than XenForo does by default since the EmojiOne icon renders at 1.467em, which ends up being 22px. If you change the default font size to something smaller (such as 14px instead of 15) it'll have a smaller icon and it looks weird if you mix regular emoji in your post with smilies from the smilie drawer. May be worth having .smilie.smilie--emoji be 22px to match the default smilies

 

[Mike]

The use of ems here is an intentional change as it is more consistent with direct emoji when used in contexts where the font size is changed (such as in a header). Though you're right, that the size was chosen to be consistent with smilies.

Arguably we could change the default smilie size to be sized in ems, though this would only apply to new installs as I don't think we'd try to change this retroactively.

Leaving this open, though I'm not sure whether anything will change.

 

[Mike]

Currently, this will remain as designed with regards to emoji for the reason I mentioned above.

In terms of smilies, we don't currently support the necessary sprite options that would be required to size smilies in ems. So if you're changing the base font-size, you would need to change the smilie sprite sizes and positions as well (which I appreciate is tedious).

 

[Jake B.]

Since the only way you'll get default emoji (or the EmojiOne/Twemoji replacements) is inside rich text areas couldn't the default size of emoji be set to 22px to match the default smilies inside of .bbWrapper?

This would resolve the same thing happening if you change font size using the size bb code:


As it stands if you open the smilie picker and just click two random options and you've adjusted font size they'll look completely different (even if they appear identical in the picker), which is probably more confusing than emoji not matching the font size

 

[Mike]

This would resolve the same thing happening if you change font size using the size bb code:

That is exactly what I'm saying is intentional, as this matches the behavior emojis themselves exhibit if no replacement happens. When I was referring to headers, I didn't necessarily mean something like the <h1> (though it does apply there and you can translate emoji there), I was mostly referring to size-based in-message changes. If that's not something that you feel is desirable, then changing the default size to be hard coded would resolve that.

IMO, the real thing here is that smilies should be em based so that they automatically scale with the text, rather than emojis being hard coded to a specific size. (If you take your text down a couple pixels in size, the smilies become disproportionate as is.) We just don't really have the scope to do that at this point.