Printable unicode emoji

[yhatt]

In pre-released Marp, we have fought against the unicode emoji in exported PDF.

Pre-released Marp + Apple emoji + The old version of Chrome (Electron 1.x)

• Emoji doesn't appear. It already has reported in Emoji's not exported to PDF yhatt/marp#57, Emojis not working when generating PDF yhatt/marp#165.
• The solution was not found for a long time, but we have given a hint from the behavior of prerender directive on pre-released Marp.

Marpit + Windows Segoe UI Emoji + Printing in the latest version of Chrome

• Emoji will render in fallback version. It has not colored.
• This behavior will bring a surprise, and disappoint the user expected to render emoji in colored.

Solution

In this PR, we will process a DOM tree generated by markdown-it and wrap unicode emoji by <span data-marpit-emoji></span> if printableEmoji option is true. We will style it to be able to render the original emoji by creating a stacking context through filter style.

Actually we don't want to change the original DOM structure, but we allowed it because this change will become an unobtrusive change.

ToDo

• Define the default style of data-marpit-emoji in scaffold theme
• Wrap unicode emoji by <span data-marpit-emoji></span> in the plugin
• [ ] printableEmoji Initialize option (false by default)
  • Use printable option to keep colored emoji
• Add test case

[yhatt]

The first implement is committed but currently we deal with trial and error.

Besides this for better emoji support in theme, we are implementing PostCSS emoji font plugin to render colored emoji.

[yhatt]

We are ready for printing the unicode emoji. The example output is here (Outputted on Windows).

# ❤️ Unicode emoji supports ❤️

❤️🧡💛💙💚💜

> The unicode emoji will render in low-resolution if you print slide deck to PDF in Chrome. So we are going to support the shortcode of emoji to render in a vector image.

We have not employed an approach of the @font-face PostCSS plugin because that won't be necessary this time.