how display flags unicode html
タイトルは英文として成立していないけれども、これはつまり今回の件でわたし自身が 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進数なら
HHHHHH;
10進数なら
DDDDDD;
と書く。表示結果はどちらでも同じ。
値を調べるやり方としてわたしが重宝しているのはこのサイトで、入力窓に絵文字をそのままコピペし、「 Inspect」を押す。出てくる情報のうち、「 Code」という欄にある値を参照する。デフォルトでは Hexが選択されているので、出てきたそれは 16進数による値。ラジオボタンを Decに切り替えれば 10進数による値が確認できる。
本題の、国旗
たとえばオーストラリアの国旗。🇦🇺
さきほどのサイトでこれを調べると、🇦という文字と、🇺という文字のふたつに分解されて出てくる。🇦の名前は「 REGIONAL INDICATOR SYMBOL LETTER A」、🇺の名前は「 REGIONAL INDICATOR SYMBOL LETTER U」だ。
これだけでもう「なるほど、飲み込めた」という方がなかにはあるかもしれないけれど、つまり、国(または地域)を表すためのシンボル文字というのがまず A〜 Zまで用意されていて、各国の略記(オーストラリアなら「 AU」)をそのシンボル文字でもって 2文字並べると、それが国(=国旗)として扱われるという仕組みになっている。
じゃあ実体参照はどう書くの? という話だけれど、これもそのまま、🇦の実体参照と、🇺の実体参照をつづけて書けばいい。「この 2つをつなげます」といった指定をするための何かも必要なくて、
HHHHHH;HHHHHH;
というふうに並べて書けば認識される。
関連記事
トラックバック(0)
トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/1100