Entries
外部スタイルの文字化けを回避
MacOSXの標準ブラウザであるSafariには外部スタイルシートでcontentプロパティの値に日本語を含む多バイト文字を指定すると文字化けして表示されるというバグがあります。
対策としては指定する値をバックスラッシュ（日本語では¥記号）を用いたエスケープを行うことで文字化けを回避出来ます。外部スタイルシートの文字コードをUCS-2にする事でも回避出来ますが、それ以外の文字コードを使用した場合には@charsetを明示していてもエスケープ処理が必要になります。
今回取り上げたcontentプロパティ部分ではありませんが、ウチのテンプレに関しては多バイトの値を指定している部分には既にエスケープが施してあります。font-familyで指定しているフォント名などがそうです。
font-family : "\30D2\30E9\30AE\30CE\20Pro\20W3","Osaka","Verdana","Helvetica","Arial","\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",sans-serif;「\30D2\30E9\30AE\30CE\20Pro\20W3」とか「\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF」など文字化けしていると思われていた方もいたようですが、「ヒラギノ角ゴ Pro W3」と「ＭＳ Ｐゴシック」をエスケープしてあります。
人の手で文字列を16進数に置換するのは面倒ですので、そういった変換スクリプトを用意して下さる方もいらっしゃいます。私はbe Strictさんで提供されている文字参照変換スクリプトを利用しています。
やはりというか、ウェブは1バイト文字圏の文化であって、日本語を含む多バイト文字圏は冷遇されている気がしてなりません。
2件のコメント
[C69] Safariのバグ
こんばんわ。
貴重な情報ありがとうございます。CSSに2バイト文字を使っていたので、記事を参考に修正しました。
content:before/after や属性セレクタ
がもっと認知されて、対応UAを使う人が増えるといいのですけどね･･･
貴重な情報ありがとうございます。CSSに2バイト文字を使っていたので、記事を参考に修正しました。
content:before/after や属性セレクタ
がもっと認知されて、対応UAを使う人が増えるといいのですけどね･･･
- 2005-02-08
- 編集
[C70] こんにちは
CSSデザインは便利ですが、ブラウザ毎にクセがあって感覚として覚えるまでが少し大変ですね。
contentプロパティや属性セレクタなど、IEが実装してくれれば装飾の為の無駄なspanやdivが減らせて更にアクセシブルなHTMLになるんですけどね。
IE嫌い…。
contentプロパティや属性セレクタなど、IEが実装してくれれば装飾の為の無駄なspanやdivが減らせて更にアクセシブルなHTMLになるんですけどね。
IE嫌い…。
- 2005-02-09
- 編集
コメントの投稿
0件のトラックバック
- トラックバックURL
- http://cfdn.blog1.fc2.com/tb.php/46-f5e2955b
- この記事に対してトラックバックを送信する（FC2ブログユーザー）
あのロリポップが運営する次世代レンタルサーバー「チカッパ！」
ブログ・CGI・PHP・MYSQLが使えて容量500MB〜1GBまで選択出来ます！
貴重な情報ありがとうございます。CSSに2バイト文字を使っていたので、記事を参考に修正しました。
content:before/after や属性セレクタ
がもっと認知されて、対応UAを使う人が増えるといいのですけどね･･･