JavaScript の正規表現で複数文字からなる絵文字を扱えるようにする提案 ― 2021年12月04日 23時31分

この記事は JavaScript アドベントカレンダーの 4 日目の分です。

今やあちこちで使われている絵文字ですが、その中には 1 文字に見えるのに複数の文字 (符号位置) から構成されるものがあります。例えば「👨‍👩」という男女が並んだ絵文字は、U+1F468 MAN、U+200D ZERO WIDTH JOINER、U+1F469 WOMAN の 3 つの符号位置からなります。

JavaScript の正規表現でこのような絵文字にマッチさせようとすると正規表現パターンが長大になってしまいます。また、文字クラス [...] 内にこのような絵文字を記述すると、「U+1F468、U+200D、U+1F469 という符号位置の並び」ではなく「U+1F468、U+200D、U+1F469 のいずれかの符号位置」にマッチしてしまいます (/u フラグが有効な場合)。

これを解決するための提案が ECMAScript proposal: support properties of strings (a.k.a. “sequence properties”) in Unicode property escapes です。Unicode において符号位置の並びに対して定義されているプロパティを、正規表現パターンで扱えるようにしようというもので、2021 年 12 月現在は stage 2 となっています。

これが実現すれば、\p{RGI_Emoji} という正規表現パターンが「👨‍👩」という符号位置の並びにマッチするようになります。さらに、このパターンは文字クラス [...] の内部で使うこともできます。ひとつの文字クラスにマッチするのはひとつの符号位置 (/u フラグが無効な場合はひとつの符号単位) というこれまでの常識が覆されるのです。

個人的には、将来的に JavaScript 組み込みの機能で Unicode の書記素クラスタを扱えるようにならないかと期待しています。

参考文献

by nanto_vi [JavaScript] [コメント(2)｜トラックバック(0)]

HTML の dl 要素内のグループを明示する ― 2021年12月04日 23時34分

この記事は HTML アドベントカレンダーの 4 日目の分です。

HTML の dl 要素 (説明リスト、いわゆる定義リスト) は、名前と値 (用語と説明) からなるグループの連なりを表します。ひとつのグループには dt 要素と dd 要素がそれぞれひとつ以上含まれます。

よく見るのは dl 要素の直下に dt 要素と dd 要素が来る形でしょう。以下の例では dl 要素にふたつのグループが含まれます。

<dl>
  <dt>琥珀</dt>
  <dd>寒天を使い透明感のある菓子の総称。</dd>
  <dd>琥珀糖のこと。</dd>

  <dt>琥珀糖</dt>
  <dt>干琥珀</dt>
  <dd>寒天を煮て固め表面を乾燥させた菓子。シャリっとした表面とプルっとした中身の対比が癖になる。</dd>
</dl>

スタイルシートを適用したり、マイクロデータの項目を作成したりするために、グループひとつずつを表す要素が欲しくなるかもしれません。そのときは div 要素を使ってグループを明示できます。

<dl>
  <div>
    <dt>琥珀</dt>
    <dd>寒天を使い透明感のある菓子の総称。</dd>
    <dd>琥珀糖のこと。</dd>
  </div>
  <div>
    <dt>琥珀糖</dt>
    <dt>干琥珀</dt>
    <dd>寒天を煮て固め表面を乾燥させた菓子。シャリっとした表面とプルっとした中身の対比が癖になる。</dd>
  </div>
</dl>

dl 要素に含まれるグループを明示したいという要望は昔からあり、XHTML2 では di 要素が定義されていました。HTML5 に対しても di 要素 (または dli 要素) が何度も提案されましたが、スタイルに関することはスタイルシートで解決すべきという意見、および新要素を導入すると従来の HTML パーサでは意図しない結果になるという問題から、そのたびに見送られてきました。

最終的に、div 要素を使えば従来の HTML パーサでも問題なく、またブラウザのデフォルトスタイルシートの影響も受けづらいということで、div 要素を使う案が採用されました。

参考文献

by nanto_vi [Web 関連技術] [コメント(0)｜トラックバック(0)]