Custom emojis in AnkiMobile

[miguelgdonoso]

I am currently embedding custom emoji fonts via @font-face.

The approach works without fault in Anki Desktop, but fails in some cases in AnkiMobile.

Attempt 1

When using seguiemj.ttf, all emojis render correctly except composite emojis that use ZWJ or VS16 which instead fall back to default iPhone emojis.

Attempt 2

When using twemoji.mozilla.ttf, all emojis render correctly but VS16 gets rendered as a blank whitespace, which adds unwanted space after composite emojis that use it.

Color spill

In both cases, a line breaking after an emoji or a new line element after one that ended with an emoji will result in the text following it being rendered with the last color used to render the emoji.

I believe these could be Webkit isssues but wanted to confirm here before reaching out to them.

Thanks for the help!

[dae]

I’m afraid it’s likely to be an iOS webview issue. I’d recommend trying to reproduce the problem in Safari using https://codepen.io/ or similar - if it happens in Safari too, this is something only Apple would be able to fix.

[miguelgdonoso]

Thank you! It seems to be an iOS webview issue yes…

Not too elegant, but removing the variante selector 16 unicode character via javascript somehow allowed proper rendering in both cases:

  function replaceVS16(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      node.nodeValue = node.nodeValue.replace(/\uFE0F/g, "");
    } else {
      node.childNodes.forEach(replaceVS16);
    }
  }
  document.querySelectorAll('.card').forEach(replaceVS16);

I have not been able to solve the color bleeding… but it’s good enough for now