CSS の content プロパティで Unicode 記号を使う

ココログから独自ブログへの移行をすすめてます。

動機はいくつかあって、

    ・ココログの更新処理（リビルド）が遅くて嫌
    ・ココログの有料プランもやめたい
    ・独自ドメインに移行したい
    ・WordPress で遊んでみたい

というわけで、とりあえず、VPS に WordPress を入れてトライアル中。
テーマとかいろいろいじって遊んでます。

せっかくだからブログ本文のフォーマット（HTML タグの使い方）も
見直そうと思って、過去の投稿を１個１個チェックしながら検討中。

そんな中で、ひとつノウハウを得たので、メモ。



CSS の content プロパティを使うと、好きな文字列を生成できます（画像の挿入も可能）。
一般的には疑似要素 :before や :after で使われることが多いです。

この content プロパティで指定できる文字列はちょっとわかりにくくて、

    ・HTML の実体参照 (""" とか）は解釈してくれない
    ・JavaScript 風な Unicode 記述 "\u0123" は解釈してくれない

さらに、WordPress のテーマのカスタム CSS （？）を使おうとすると、
WordPress のルーチンが勝手に HTML エスケープしてくれちゃうので、

    ・不等号が素直に書けない（"<" も "&lt;" もダメ）

というのもあります。



で、Unicode 記号とかを使いたいときにどうすれば良いかというと、


content:    "\21D2";  /* implication operator */


みたいに「バックスラッシュ（円マーク）＋ Unicode コード」とすれば OK.


ただし、ちょっと罠があって、

    ・バックスラッシュ（円マーク）の直後に数字のゼロが来てはダメ
    　（文字コードの頭のゼロは省く）

    ・半角スペースは無視されるっぽい

    ・直後に「16進数の文字と解釈可能な文字」 (0-9, a-f, A-F) が続くと
    　正しく解釈されないので、半角スペースを空けておくのが安全

ということがわかりました。特に1個目は気づくまで時間がかかりました・・・


いくつか例を挙げておきます：


content:    "xyz \A abc";   /* "xyz" + 改行 + "abc" */
content:    "xyz \A0 abc";  /* "xyz" + space + "abc" */




Unicode 記号の文字コードは W3C の HTML5 仕様書をご参照ください。


HTML5
A vocabulary and associated APIs for HTML and XHTML

8.5 Named character references

http://www.w3.org/TR/html5/named-character-references.html



例によってブラウザ依存なところがあるかもしれませんが、
とりあえず、Google Chrome と IE9 では確認済みです。

ご参考まで。