blue

how display flags unicode html

  • Posted by: SOMA Hitoshi
  • February 2, 2017 9:50 PM
  • mt web

 タイトルは英文として成立していないけれども、これはつまり今回の件でわたし自身が Google検索したさいの検索文字列。同じような調べ物をしている方の一助となればさいわいだ。

 話題の中心は Unicodeに定義されるようになった emoji(絵文字)。これを HTMLの実体参照形式で記述する方法。わけてもちょっとだけ特殊で、まごつかされる国旗の場合について。

まず、ふつうの絵文字

 たとえばこんなの。😱
 これには「 FACE SCREAMING IN FEAR」という名前が付いていて、この絵文字を打てば、各プラットフォームごとにテイストは異なるものの、FACE SCREAMING IN FEARという名前に見合う絵として各プラットフォームが用意したものが表示される、というのが最近の絵文字事情。なにせ Unicodeに定義されている「文字」なので、環境さえ対応していればコピペでどこへなりとも運ぶことができ、基本的にはそれで済む──わざわざ実体参照で書く必要はない──話である。たとえば WordPressならそれで問題ない。が、たとえば Movable Typeだと問題がある。

 Movable Typeの本文入力欄に絵文字をそのままコピペした場合、直後のプレビューなどでは支障がないように見えるが、保存し、ふたたび編集画面を開き直すとその絵文字からあとのデータがすっぽり消えてなくなっている。こういったことを回避するために、実体参照で書く必要が出てくる。

 Unicodeの文字を実体参照で指定するやり方には 16進数での記述と 10進数での記述とがある。仮に、その文字を指定するための 16進数による値が「 HHHHHH」、10進数による値が「 DDDDDD」だったとして、16進数なら

&#xHHHHHH;

10進数なら

&#DDDDDD;

と書く。表示結果はどちらでも同じ。
 値を調べるやり方としてわたしが重宝しているのはこのサイトで、入力窓に絵文字をそのままコピペし、「 Inspect」を押す。出てくる情報のうち、「 Code」という欄にある値を参照する。デフォルトでは Hexが選択されているので、出てきたそれは 16進数による値。ラジオボタンを Decに切り替えれば 10進数による値が確認できる。

本題の、国旗

 たとえばオーストラリアの国旗。🇦🇺
 さきほどのサイトでこれを調べると、🇦という文字と、🇺という文字のふたつに分解されて出てくる。🇦の名前は「 REGIONAL INDICATOR SYMBOL LETTER A」、🇺の名前は「 REGIONAL INDICATOR SYMBOL LETTER U」だ。

 これだけでもう「なるほど、飲み込めた」という方がなかにはあるかもしれないけれど、つまり、国(または地域)を表すためのシンボル文字というのがまず A〜 Zまで用意されていて、各国の略記(オーストラリアなら「 AU」)をそのシンボル文字でもって 2文字並べると、それが国(=国旗)として扱われるという仕組みになっている。

 じゃあ実体参照はどう書くの? という話だけれど、これもそのまま、🇦の実体参照と、🇺の実体参照をつづけて書けばいい。「この 2つをつなげます」といった指定をするための何かも必要なくて、

&#xHHHHHH;&#xHHHHHH;

というふうに並べて書けば認識される。

関連記事

トラックバック(0)

トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/1100