はじめに JavaScript において文字数を String の length で取得すると、期待した値が得られないことがある。この記事では、実際に String の length を使うことによって発生した Prettier のバグを紹介する。 前提 JavaScript の String には length というプロパティが存在する。このlengthプロパティは文字列の文字数を表すものではない。 実際には、文字列中に含まれるUTF-16のコードユニットの数を返す。つまり、ASCIIをはじめとしたBMPに含まれるものであれば我々の期待する文字数が返ってくるが、一部の漢字やemojiなどについてはそうはならない。 たとえば、漢字の𠮟(U+20B9F)はサロゲートペアであり、２つのコードユニットで表される。そのため、length は 2 になる。

絵文字を扱う上で知っておくと良いかもしれないことをまとめてみました。 Ruiさんの記事を見て、「EmojiはSurrogate Pair以外にも、色々とおもしろい技術があるんですよ〜」思って書いてみました。 なお、書いた人はAndroidの人間なので、特に表記していない場合は主にAndroid上での動作のことを書いてます。 またQiita初めてなので読みにくい部分等がありましてもご容赦ください。 サロゲートペア(Surrogate Pairs) このエントリーを書くきっかけにもなったサロゲートペア。なぜこれが導入されたかの経緯は、Ruiさんのブログエントリーに譲るとして、技術的な解説をします。 サロゲートペアは、U+0000..U+FFFFに収まりきらなかった範囲のUnicodeコードポイント(U+10000..U+10FFFF)を、なんとか16bitでエンコードしようとして導入されました

UnicodeのUTF-16エンコーディングではほとんどの文字（コードポイント）は2バイトで表現されるが、Unicodeに後から追加収録された文字の多くは4バイトで表現される。4バイト文字がうまく扱えないプログラムというのはわりとよくある。しかし世界中で広く使われるようになった絵文字がよりによって4バイト文字であるせいで、そのような文字が扱えない問題がよいペースで解決に向かいつつある。それについて少し説明してみようと思う。 Unicodeが80年代から90年代初頭にかけてデザインされたときの目標の一つは、Unicodeに含まれる文字数を65536個以内に収めることだった。現代の文章を実用的なレベルで表すためには、漢字などを含めてもそれだけの種類の文字があれば十分だと考えられたのだ。当然これは1文字を2バイトで表すことを念頭に置いていた。つまりコンピュータの揺籃期から当時に至るまで単純に英語

Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID

先ずはこの『ゟ』という文字がキチンと表示されているかどうかが不安である。 まあよほど古いPC等でない限り大丈夫とは思うが……。 ある程度高い年代の方々や出版・図書・報道などの業界にいる人、一部の研究者や特定分野の趣味人にとっては馴染みがある文字かもしれない。 ※追記：本文中の「ゟ」にもWebフォントで『筑紫明朝』を適用しました。こんな特殊な文字もバッチリ表示される…！ FONTPLUSさんありがたい。 I have a よ. I have a り. そもそも私がこれを全く読めなくて調べたことから始まってしまう。 正直、初見はどこか外国語のアルファベットかサンスクリットの文字か何かかと思った……。 これは、2つ以上の平仮名や片仮名などを組み合わせた文字で、『合字』や『合略仮名』と呼ばれるものの一つである。 読みは「より」であり、そのまま平仮名の「よ」と「り」の合字だ。※1 手紙の差出人名や起

自分の知らないCJK Ideographのバリエーションがまだあったことに戦慄している pic.twitter.com/kUlyRLDDTM— moriyoshit (@moriyoshit) March 9, 2017 などというツイートをしたところ、思ったより反響があったのでまとめておく。 上記ではあいまいに「バリエーション」などと書いたが、Unicodeとそれを扱う環境においては、バリエーションと一口に言っても次のような状況がある。 意味論的に等価な異なる字形の集合 同じ字形で異なるコードポイントの集合 aは結構なじみ深いと思う。 a-1. 異なるコードポイントにそれぞれ異なる字形が割り当てられているもの 例: 「東」(U+6771) ⇔「东」(U+4E1C) 「斉」(U+6589) ⇔「齊」(U+9F4A) 「高」(U+9AD8) ⇔「髙」(U+9AD9) a-2. 同じコードポイ

何言ってんのお前 Unicode コンソーシアムには里親( Adoptation )制度があり、スポンサーになると文字を一つ選択することで里親になることができる。選択した文字は Unicode コンソーシアムのサイト上 に自分の名前とセットで掲載してもらえるのだ。そこで僕は🍣を選び、1年間の期限付きではあるが🍣の里親、ブロンズスポンサーとなったのである。 どうして "はじめに言葉ありき"というように、人間はそれを指し示す言葉がなければそれを認識できない。ただそれを認識したときに人がどうそれを受け入れるかというのはかなり怪しいもので、Unicode という統一を目指す文字コード体系は最終的に言語以上に文化の壁に当たるのではないかと思っている。実際、人アイコンの肌色で揉めたりとかは事実それなりに起きているし、今「犬を食べる」という絵文字や「鯨を捕まえて食べる」みたいな絵文字が入るとしたら、

Macの使い方を文章に残したいとき、「⌘ + C」を操作するのを「コマンド＋C」などと書いたりします。ちょっとかっこわるいし、直感的に分かるように、⌘ と書きたいと思いました。調べてみました。 記号を入力したいときは、まず、各アプリケーションのエディットメニュー (Edit) ＞ 特殊文字 (Special Character...) を選択して文字ビューア (character viewer) を呼び出します。（ATOK でも同様に出来ます） 出てきたビューア、右上の検索フィールドへ下表にある文字（シンボル）のUnicode コードを入力して、望みの文字を表示して、ダブルクリックで確定（Unicode に対応しているアプリのみ） 例えば、リターン（キー）のシンボルを得るには、検索フィールドに 0x23ce として検索すれば、文字が出て、ダブルクリック。 HTML に埋め込みたいときは、&

Unicode絵文字に「オレンジ色の本」（U+1F4D9 ORANGE BOOK）ってあるじゃないですか。 うん。auがソースだっけ。 それが、Lionの絵文字で表示したら、ほら、紫色なんですよ。 ああ、それね。もっと大きいサイズで表示すればオレンジ色になるよ。 えーっ、ホントですか？ いや、ウソだけどさ。 ……。 ま、座れよ。マジレスすると、絵文字の場合、Unicodeの文字名に入ってる色の情報は、そのまま実装しなくてもいいんだよ。文字名と実装の色が一致しない絵文字って、けっこうあるぜ。このあたりとか。 でもそれは、もともとUnicodeに入っていた白や黒の文字に、ケータイ絵文字が統合されちゃった例ですよね。純粋なケータイ絵文字とは違うんじゃないですか。 そうでもないんだな。たとえばこの緑と紫のボタンなんてSoftBank絵文字だけをソースとしてUnicodeに入ったんだけど、文字名は黒