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

この記事は2007/5に掲載されたものです。
記事の内容が古くなっている為、現状と異なる可能性があります。

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

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

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

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

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

「あ」→ 「あ」

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

「あ」 → 「\3042」

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

修正前

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

修正後

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

今日のCSSメモでした。

Pocket

コメントを残す