Inline emojis

17.12.2019 22:12 UTC+01:00
[ perma(?)link ]
< previous | next >

This page has been edited from the original.

Date

03.08.2023

Changes

removed misleading/irrelevant comments regarding line height
improved JS to introduce line-height, in addition to font-size
added comment on unicode OS emojis
changed accented characters to fully show the extent of font ascender and descender

As I was updating the emojis for this site, I thought about having them scalable to fit within the line, no matter the font size. It's easy enough to scale SVG images nicely, compared to GIF. They are, after all, vectors.

But, how to determine the line height calculated from CSS?

I saw this question being asked several times online, with several different answers. After trying a few, I found one that worked, only to realise that it doesn't work. At least not as I'd intended. And that's partly because I was asking the wrong question in the first place.

The calculated line height as rendered to screen comes with a problem. Its value isn't the height of the text; it's the height of the text plus line spacing (leading). If the height of an inline image is set to the line-height, extra spacing is still added, which blows the line out of whack in comparison to its neighbours.

The obvious alternative would be to use calculated font size. The problem with this is that it sets the emojis too small; smaller than OS-installed ones which are unicode characters, essentially designed with similar metrics to typeface characters. I don't have that level of sophistication. (shrug)

So, line-height is too large, and font-size is too small. The perfect solution would be one of the typographical metrics that are unavailable, or not reliably available, through CSS. Consequently, I looked to the best traditions of bodging it, and took the average of the two values available to me. Job's a good 'un. (thumbup)

How it looks (proud)

Font size 3em: (smile) Ẫņ

Font size 2em: (smile) Ẫņ

Font size 1.5em: (smile) Ẫņ

Font size 1em: (smile) Ẫņ

Font size 0.8em: (smile) Ẫņ

How it works (nerd)

Wrapping it up, the image filename in this example is emojiname.svg, and the code is as follows.

HTML
<span class="emoji">(emojiname)</span>

JS
function swapEmojis() {
  if (document.getElementsByClassName('emoji').length > 0 && document.createElement) {
    var e, els = document.querySelectorAll('.emoji'), i, img;
    for (e = 0; e < els.length; e++) {
      var lineheight = parseInt(window.getComputedStyle(els[e].parentNode).getPropertyValue('line-height')), fontsize = parseInt(window.getComputedStyle(els[e].parentNode).getPropertyValue('font-size'));
      i = els[e].innerText; /* retrieves '(emojiname)' from the SPAN element */
      i = i.slice(1,-1); /* removes parentheses */
      img = document.createElement('img');
      img.src = '../images/' + i.toLowerCase() + '.svg';
      if (!isNaN(lineheight)) {
        img.style.height = Math.ceil((lineheight + fontsize) / 2) + 'px';
        img.style.verticalAlign = 'text-bottom';
      } else {
        img.style.height = fontsize + 'px'; /* in the event that line-height cannot be calculated */
      }
      img.style.width = img.style.height;
      img.alt = 'emoji: ' + i; /* the W3C standard is to apply alt='' to icons, but I consider emojis to convey meaning, so please yourself */
      img.title = i; /* if the emoji is unclear to the viewer, holding the pointer over it will bring its name up as a 'tooltip' */
      els[e].parentNode.replaceChild(img, els[e]);
    }
  }
}

* I set the font size in the CSS in em units—em being the width of the letter m—but the browser converts this to pixels for rendering to screen.