CSS 3におけるテキストの自動改行と禁則処理の定義

エ・ビスコム・テック・ラボ
2008-09-26 21:17:01
  • このエントリーをはてなブックマークに追加

禁則処理に関する設定

 前回紹介したように、ブラウザで日本語のテキストを表示すると、標準で禁則処理が行われる。禁則処理とは、句読点や小さい「っ」などの文字が行頭にこないようにする処理だ。

 しかし、SafariChromeは日本語のテキストに対して「word-break:break-all」と指定すると、禁則処理を無効にすることができる。

 たとえば、次のサンプルではテキストの禁則処理を上は有効に、下は無効に設定している。禁則処理を無効にしたテキストでは、小さい「っ」や「。」が行頭にきていることがわかる。

Safariでの表示。Chromeでも同じ表示になる Safariでの表示。Chromeでも同じ表示になる
div#text01{
word-break: normal;
}

div#text02{
word-break: break-all;
}
こんにちは、今日はとてもいい天気です。ずっと雨続きで、久々にいい天気になりました。Weather Newsでは「降水確率は20%」と発表されています。
こんにちは、今日はとてもいい天気です。ずっと雨続きで、久々にいい天気になりました。Weather Newsでは「降水確率は20%」と発表されています。
ブラウザで表示を確認する

 一方、Internet Explorerの場合、word-breakプロパティの指定は禁則処理には影響しない。Internet Explorerではline-breakプロパティで禁則処理に関する設定を行うようになっている。

 line-breakプロパティでは禁則処理の有効・無効ではなく、厳密さを指定する。指定できる値は「normal」と「strict」の2種類で、「normal」では緩い禁則処理が、「strict」では厳密な禁則処理が行われる。

 たとえば、「normal」では小さい「っ」や長音符「ー」は禁則処理の対象にならないが、「strict」では禁則処理の対象となる。一方、句読点や閉じ括弧はline-breakプロパティの指定とは関係なく、常に禁則処理の対象となる。

 次のサンプルはテキストの禁則処理を上は「normal」に、下は「strict」に設定したものだ。上のテキストでは小さい「っ」が行頭にきているが、下のテキストではきていないことがわかる。一方、どちらのテキストでも句点「。」は行頭にこないように処理されている。

Internet Explorerでの表示 Internet Explorerでの表示
div#text01{
line-break: normal;
}

div#text02{
line-break: strict;
}
ブラウザで表示を確認する

CSS 3における自動改行と禁則処理の定義

  • 新着記事
  • 特集
  • ブログ