« ちいさき神の、つくりし子ら | トップページ | 飯田線のバラード »

2008/04/19

Safariの禁則処理

Appleのウェブブラウザ、Safariがバージョン3になってから、ときどき日本語の禁則処理が働いていないページを見かけることがある。文末の句読点とか括弧とかが行頭に送られてしまったりするのだ。そうしたページも、Safari以外のブラウザでは正常だし、自分で制作しているサイトではそんなことが起きたこともないので、気にはなっても調べもしないで放ってあったのだが、今日もたまたまそういうサイトを見かけて、この機会に検証してみた。

[環境設定...]結論を言えば、スタイルシートに "word-break: break-all" が指定されているページでは、Safari 3が禁則文字まで折り返してしまうらしい。
今のところ "word-break" プロパティはCSS3で策定中のものとはいえ(もとはIEの独自拡張だそうだ)、欧文ばかりでなく和文にまで適用してしまうSafariの仕様にも問題ありだろうな。

サイト制作者に "word-break" を使うのをやめてもらうのが良いのだが、そうもいかないなら、Safariで閲覧する側としては、ユーザスタイルシートを設定しておくという手もある。とりあえず下記のように書いたテキストファイルに適当な名前( xx.css )を付けて保存し、Safariの環境設定で読み込むようにしておけば良い。これで "word-break: break-all" の指定を打ち消せるので、禁則処理が乱れたページを見ることはなくなるはず。

* { word-break: normal !important; }
* { word-break: normal !important; word-wrap: break-word; }
ただ、こうすると今度は、Safariがアルファベットや数字の長い文字列を折り返さないために、レイアウトが崩れたりはみ出したりすることがあるかも。例えば文中に長ーいURL長ーい地名が書かれている場合とかにね。
そんなときは、環境設定ダイアログを呼び出して( command + , )、ユーザスタイルシートを一時的にでも外してやれば良いだろう。

追記:クマデジタルさんから、"word-break" の値は "normal" より "break-word" が良いと教えていただいた。なるほど、これなら両立するようだ(上記のユーザスタイルも修正した)。感謝!

追記2:この "break-word" という値を、SafariのCSSリファレンスは "word-break" の値としているので、Safari用のユーザスタイルに書くぶんにはかまわないだろう。しかしこれはW3CのCSS3ワーキングドラフトにはないものだ。こちらに従うなら、長い文字列を折り返すためには "word-wrap" プロパティを使った方が良いかもしれない。上記ユーザスタイルも再度修正しておこう。

|

« ちいさき神の、つくりし子ら | トップページ | 飯田線のバラード »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/10582/40920221

この記事へのトラックバック一覧です: Safariの禁則処理:

» Safari 禁則処理問題 解決(クマデジタルだけ) [クマデジタル]
Safariで禁則処理が効かない件、田畑倫晶氏に示唆いただいたのだが(ありがとうございます)、 「サイト制作者に "word-break" を使うのをやめてもらうわけにいかないなら、Safariで閲覧する側としては、ユーザスタイルシートを設定しておくという手もある。」 いやー、l...... [続きを読む]

受信: 2008/04/19 11:06

» Safari 禁則処理CSS設定 決定版 [クマデジタル]
昨日のSafariの禁則処理問題の仮解決のあと、実は 田畑氏がさらに良い方法を編み出してくれた。 (またもやありがとうございます。) 今回の方法は、  word-break: normal;  word-wrap: break-word; というもの。 この方法なら確かにトラックバック欄が溢れ...... [続きを読む]

受信: 2008/04/20 09:03

« ちいさき神の、つくりし子ら | トップページ | 飯田線のバラード »