Unicode 記号で Glyphicon みたいなフラットアイコンを表示したかった

Twitter Bootstrap の Glyphicon とか Font Awesome とかみたいな、フラットな記号文字を、標準的な記号文字だけでできないものかなぁ〜と思っていた。

こういうのはパイフォントと呼ばれるようで、Symbols や Dingbats といった修飾文字をまとめたフォントということになる。

古くは Webdings や Wingdings みたいなモノがあって、Unicode の中でも記号文字が登録されていることから、コレを使えないかなーと思って色々調べた。

Wingdings などは font-family に指定してもうまく使えない

Wingdings などの古くからあるパイフォントは、文字のマッピングが Unicode に沿っていない。Chrome だと font-family を指定して利用できるが、Firefox だとフォントが適用されず、イマイチ使えない。

Wingdings のアイコンに対応する Unicode のコードを指定すれば、必ずしも Wingdings などを使う必要はない。しかし、Wingdings の見た目を利用したい時は使えないが…。

• 参考 : Webdings character set and equivalent Unicode characters … フォントの文字と Unicode の対応表。
• 参考 : Wingdings character set and equivalent Unicode characters
• 参考 : Wingdings 2 character set and equivalent Unicode characters
• 参考 : Wingdings 3 character set and equivalent Unicode characters
• 参考 : Wingdings - A "Way More" Complete List of HTML Escape Codes
• 参考 : Wingdings & Webdings Font Icon Character Map (Printable Cheat Sheet) — The Spreadsheet Guru … 画像化したチートシート。
• 参考 : Wingdings - Wikipedia

  • 「2014年6月に規格化されたUnicode 7.0においてこれらの文字が全て含まれるようになり、特殊なパイフォントや外字を用いなくても表せるようになった

• 参考 : 謎の絵文字みたいなフォント「Wingdings」はなぜ存在しているのかという知られざる歴史 - GIGAZINE

Unicode 記号は絵文字になる？

Unicode 記号を � のように HTML に入力すると、色の付いた絵文字になってしまう。何か良いフォントを指定したらフラットなテキストスタイルになるかなぁと思ったが、どうもそういうフォントはないようだった。

• 参考 : 絵文字のショートカット・ファミリー - Hail2u
  • @font-face でクロスプラットフォームに絵文字フォントを指定する
• 参考 : 絵文字😇を含むテキストを表示する @font-face 設定（Unicode 10.0対応版） | ダーシマ・ヱンヂニヤリング
  • もう少し細かく指定した場合と、その他の話。

  • Unicodeの規格によると、「テキストで出す」「絵文字で出す」を明示する方法がある

    本来は、CSSで絵文字のためにがんばるべきではない、という結論となります。すべてはOSとブラウザの処理に任せるべきで、テキストで表示したいか、絵文字で表示したいかはユーザー側で制御すべきである

    とはいえ、どうやら絵文字バリエーション・シーケンス（規格上はEmoji Presentation Sequences）はまだOSやブラウザのサポートが十分ではないようで

• 参考 : 絵文字バリエーション・シーケンスとは何か - Mac OS Xの文字コード問題に関するメモ

  • 「テキスト・スタイル」で表示したければ、「☎」の直後にU+FE0E（VS-15）を入力する。
    逆に「絵文字スタイル」で表示したいなら、U+FE0F（VS-16）を入れればいい。

    「絵文字スタイル」側はすべてAppleカラー絵文字でカバーできるが、「テキスト・スタイル」側の表示はインストールされているフォントに依存する。また、「テキスト・スタイル」を指示するU+FE0E（VS-15）が付いていても、Appleカラー絵文字でしか表示できない文字は、Appleカラー絵文字で表示される。

• 参考 : 🔣 Symbols Emoji Meanings
  • プラットフォームごとのアイコンが画像でプレビューできるサイト。

…というワケで、テキストスタイル表示と絵文字スタイルを選ぶための文字コードがあるのだが、まだ対応するフォントがかなり少ないようだ。

記号を選べば、絵文字ではないテキストスタイルの記号もあるが、Glyphicon や Font Awesome ほどの自由度はなく。

絵文字を CSS で白黒表示して誤魔化す

予め色の付いた絵文字を使うとなると、Glyphicon のように自分で色を決めたりできない。これでは自由度が低いので、もう少し誤魔化し方を考えてみる。

CSS の filter プロパティを使うと、要素をモノクロ化したりできる。コレが絵文字テキストにも効くので、コレで絵文字を白黒化してみようということ。

.monochrome-emoji {
  /* サンプルのため絵文字フォントを確実に適用させる */
  font-family: "Apple Color Emoji", "Android Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Noto Sans Emoji", "Noto Sans Symbols", "Noto Emoji", "Gecko Emoji";
  /* 少しコントラストを上げてからグレースケール化する */
  filter: contrast(110%) grayscale(100%);
}

単に filter: grayscale(100%) でも白黒にはなるが、contrast() で少しコントラストを上げておくと、グラデーションな部分をもう少しフラットにできるかなと思う。

• デモ : Monochrome Emoji
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

…ウーンイマイチ。

やっぱりフォントファイルに容量食ったとしても、Glyphicon とか Font Awesome とか使うのが手っ取り早いか…。