Blog

※ブログ移転しました。 → hamashun.me

よく解るかもしれないバックスラッシュエスケープ

ふと気になって、バックスラッシュハックでググッたら、以前書いたエントリが一番目に出てきました。 やったね!
なので調子に乗って、関連した記事を書いてみようと思います。 The・2匹目のドジョウ。

内容は、バックスラッシュハックのバックスラッシュハックたる所以でもある、バックスラッシュエスケープです。
そうです。 ウンチクです(またかよ)。
いやでも、技術を使うなら、「なぜそうなるのか」という理由は知っておいた方が良いと思うんですよね。

まず基本として、CSSにおけるバックスラッシュの効果は、『その直後の文字が持つ特殊な役割を無効にする』という物です。

サンプル

CSS2 syntax and basic data typesの 4.1.3 文字及びその大小 を引用します。

プロパティや値の途中で改行

第1に,文字列内では,改行が続くバックスラッシュは無視される。すなわち,文字列は,バックスラッシュ又は改行のいずれも含まないと考えられる。

サンプルの一つ目がこれです。 これは理解が比較的簡単だと思います。
プロパティや値の途中にバックスラッシュを記述すると、その直後で改行する事ができます。
つまり、バックスラッシュの後に改行をする事によって、改行という効果が無かった事にされる、みたいに考えると解かりやすいでしょうか(見た目ではもちろん残る)。
それ故に、(見た目の)改行後にタブや半角スペースは入れる事ができません。

もし実用するとしたら、うーん・・・・・・。
超長くなったfont-familyくらい?

クラス名に.(ドット)などを含める

次に,バックスラッシュは特殊なCSS文字の意味を無効にする。16進数字を除く任意の文字は,いずれもバックスラッシュでエスケープでき,その特殊な意味を除去できる。例えば,"\""は,一つの2重引用符から成る文字列とする。スタイルシートの意味が変更されるので,スタイルシートプリプロセサは,これらバックスラッシュをスタイルシートから除去してはならない。

サンプルの二つ目がこれです。 これも割りと簡単かな。
例えばサンプルでクラス名に使っている.(ドット)はCSSにおいて、『クラスを表す為に使う記号』です。
しかし、.(ドット)の直前にバックスラッシュを置く事で、『クラスを定義する』という特殊な役割を失います。
つまり、バックスラッシュ直後の.(ドット)は、役割を持った記号ではなくただの文字列になります。

ISO 10646文字参照を使用する

3番目に,バックスラッシュエスケープによって,文書作成者は,簡単には文書の中に置くことができない文字を参照できる。この場合には,バックスラッシュの後に多くとも六つの16進数字(0..9A..Fのいづれか)が続くが,これは,その数字をもつISO 10646([ISO10646])文字を表す。16進数の後に一つの数字又は字が続く場合は,その16進数の終わりを明確に示す必要がある。それには次の2通りの方法がある。

1.スペース又はその他の空白文字を用いる。例えば,"\26 B" ("&B")。
2.ちょうど六つの16進数字を提供する。例えば,"\000026B" ("&B")。

実際には,これらの二つの方法を組み合わせてもよい。16進数エスケープの後では,ただ一つの空白文字だけが無視される。これは,エスケープシーケンス後に"本当の"スペースを入れるためには,そのスペース自体をエスケープするか又は2重とするかのいずれかをしなければならないことを意味する点に注意すること。

さて、三つ目のコイツがやっかいです。 て言うか長文です。
まずシンプルに結果を言うと、ISO 10646による文字參照を使用する事ができます。

もう少し詳しく説明します。
サンプルでは、colorプロパティの値に『r\65 d』と指定してあります。
で、ISO 10646では『65』は『e』になります。
つまり、『r\65 d』は『red』となります。

これには書き方が2種類あって、『65』は『000065』とする事もできます。
そしてその際には、参照直後の半角スペースは不要です。

まとめ

どれも実用には程遠い知識ですが、バックスラッシュエスケープはハックによく使われます。
動作の理屈を知っていれば、そのハックが(いわゆる)良いハックか悪いハックかを判断する事もできます。
CSSの仕様について考える時などに、使える知識なのではないでしょうか。

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive