« | »

2013.12.19

ブラウザ(FireFox)の禁則処理をCSSで指定。

普段使用するブラウザにはFireFox(投稿時はVer. 26.0)を使用していますが、先日投稿したポケモンICOCAのblogを見なおしているとなにやら違和感を感じました。

kinsoku-1

そう、日本語の禁則処理が正しく機能していないのです。

 

IE10で表示してみると正しく処理されていることから、どうもFireFoxの問題のようです。

ブラウザで表示される日本語の禁則処理はサーバーで処理するのではなくてブラウザ側で使用している言語の制約に合わせて処理しないといけないようで、つい最近まで知りませんでした。 考えてみればブラウザ側でデフォルトのフォントや大きさを指定しているわけですから、行の右端にどの文字が来るなんてのはサーバー側では知り様がないわけで、禁則処理がブラウザの責任というのも納得です。

以前はFireFoxは正しく禁則処理されていたと記憶していたので、ここ最近バージョンアップが頻繁だからでしょうか?

この辺りの認識というか処理がうまく行ってないようです。

 

このままでは文章としてまずい状態になるので、WordPressテーマのstyle.cssに禁則処理に関するCSSを記述してみました。

禁則処理に関するCSSはもともとIE独自実装のプロパティでしたが、CSS3から禁則処理に関するプロパティとして “word-break” が定義されています。

早速この”word-break”プロパティを設定してみましたが、なぜかFireFoxは禁則処理が反映されません。

色々ググってみると、同じような問題に対処されている方が居らっしゃって、”word-break”だけではいけないようで、”word-wrap”プロパティも指定する必要があるようです。

 

この条件になるよう、style.cssを編集したのがこちら。(すべての基本設定となる “all” で定義しています)

/* all */
* {
    margin: 0;
    padding: 0;
/*    font-family: Verdana, Arial, sans-serif;*/
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
    word-break: normal;
    word-wrap: break-word;

}

 

そしてこのCSS設定を反映してFireFoxで表示してものがこちら。

kinsoku-2

正しく禁則処理がされるようになりました。

 

Trackback URL

Comment & Trackback

No comments.

Comment feed

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">