Safariでのcontentプロパティが文字化けするバグの対策

caramel*vanillaさんを見ていて気づいたのですが、Safariでcontentプロパティに日本語を使うと文字化けします。

そこでweb creatorsの6月号を確認してみると、文字列をエンコードして設定してあげると良いと判りました。

エンコードをするにはJavaScriptで作られたツールを使うと良いです。

数値文字列参照変換スクリプト

ここで日本語を「16進数のhtml数値文字参照」に変換します。すると、文字列がJavascriptで使用できる状態にエンコードされます。

「あ」→ 「あ」

この状態のままでは使えないので、もう少し変換をかけます。
「&#x」を「\」に、「;」を削除して下記の形式に変換します。

「あ」 → 「\\3042」

こうやってできた文字列参照を使ってcontentプロパティを記述します。

修正前

ins:before {
    (略)
    content: "追記";
}

修正後

ins:before {
    (略)
    content: "\\8ffd\\8a18";
}

今日のCSSメモでした。