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メモでした。 

関連記事が見つかりません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>