vivliostyle/vfm

spec: Emoji annotation

Opened this issue · 2 comments

spring-raining commented

Goals

This issue proposes the spec that notates Emoji annotation (ex: :+1: :innocent:). For some Markdown users, it would be helpful to support this familiar notation.

Prior Art

There are no written specifications in GitHub-Flavored Markdown, but we can use this notation in GitHub. And many editors and chat tools also provide it (but implicitly...)

Discussion

Actual output as HTML is different among their services, so we need more discussion.

My suggestion 1

Converting to valid Unicode points.

:smile:
<span data-emoji="smile">😀</span>
  • Pros
    • Easy to use, easy to understand
  • Cons
    • We have to maintain the Emoji mapping tables in the future
    • We cannot guarantee that converted HTML will display correctly in all environments. To achieve this, we have to provide the same emoji fonts in all environments.

My suggestion 2

Not converting emoji annotations, but we denote it by span or something. If users would like to display them by icon, provide CSS that actual emoji texts or images.

:smile:
<span data-emoji="smile">:smile:</span>
[data-emoji] {
  font-family: SomeAwesomeEmojiFont;
  font-size: 0;
}
[data-emoji="smile"]::before {
  content: "😀";
  font-size: 1em;
}
  • Pros
    • Converted HTML can keep semantic content in any environment
  • Cons
    • CSS replacing emoji annotations may become too big
    • Substantially, there is no difference between managing CSS and managing emoji tables :P
akabekobeko commented

Vivliostyle Slack ログを vivliostyle/community へ公開するために開発した akabekobeko/npm-slack-log2md では絵文字機能を joypixels/emoji-toolkit で変換している。この npm は

に対応する記法を文字化してくれる。

const emoji = require('emoji-toolkit')
console.log(emoji.shortnameToUnicode(':smile:'))

npm-slack-log2md ではこんな感じで変換。

/**
 * Replace Emoji to Unicode char. e.g. `:flag-gb:` -> `🇬🇧`.
 * @param text Text.
 * @returns Replaced text.
 */
const replaceEmoji = (text: string): string => {
  return text.replace(/\:["']?([a-zA-Z0-9_\-]+)["']?\:/g, (match) => {
    // On Slack `-` but the short name is` _`, e.g. `:flag-gb:` -> `:flag_gb:`
    const str = match.replace('-', '_')
    return emoji.shortnameToUnicode(str)
  })
}

Slack は国旗関連の記法が - になっているので _ にしているが、これを流用すれば本 issue に対応できるかもしれない。

akabekobeko commented

議論が途中で止まっています。v2.0 で改めて対応を検討しましょう。ちなみに v2.0 で remark 13 対応する際に remark plugins へ掲載された emoji 系を利用可能になります。これらはすべて remark 13 対応されているようです。

  • 👍1