別ブログのCSSの改造過程で文字を挿入したかったのだけど、方法がちょっと特殊だったので備忘録的なメモを。

今回利用したのは以下のコード

ins { text-decoration: none; }
ins:before {
	content: " ( " attr(datetime) " 修正 ) ";
}

del { text-decoration: line-through; }
del:before {
	content: " ( " attr(datetime) " 追記 ) ";
}

この修正と追記の2byte文字を文字化け回避などの目的で数値文字参照を使って表示してみた。

CSSの場合、10進数の数値文字参照では文字化けを起こしてしまったので16進数の数値文字参照を利用した。
数値文字参照を使うと "追記" は "追記" になる。
同様に "修正" は "修正" となる。
前後に半角スペースを入れたかったので、今回は半角スペースを示す " " も使用した。

CSSで数値文字参照を利用する場合、このままでは使えないので以下の手順を踏む必要がある。

1. &を\に置換
2. #xを00に置換、もしくは削除
3. ;を削除

修正の修の字にあたる修であれば、 "修" なので、リスト1-3の処理を行って "\004fee" となる。

• 修正 →  修正  → \0020\004fee\006b63\0020
• 追記 →  追記  → \0020\008ffd\008a18\0020

完成したものは以下。

ins { text-decoration: none; }
ins:before {
	content: " ( " attr(datetime) "\0020\008ffd\008a18\0020 ) ";
}

del { text-decoration: line-through; }
del:before {
	content: " ( " attr(datetime) "\0020\004fee\006b63\0020 ) ";
}

数値文字参照の文字列変換には 数値文字参照変換スクリプト を利用した。
利用したサイトのURLへのリンクを埋め込んでいたけど、閉鎖して別サイトになっているようなのでGoogle検索に変更した。