5

Firefoxやsafariでは長音や短い"ッ"などの禁則処理が効いているのに、Chromeではきちんと処理されません。Word-break: break-strict;bodyに適用しても改行されてしまいます。Chromeできちんと禁則処理を適用さすにはどのように(どこに?)記述すればよろしいでしょうか。

Chromeのバージョンは56.0.2924.87 (64-bit)、Windows 10で使用しています。

追記

body {
 word-break: normal;
 word-wrap: break-word;
}

でも駄目でした。

0

1 件の回答 1

14

Chrome58以降lang="ja" 属性と line-break: strict を付けることで、長音や拗音の前での行分割を抑制することができるようです。


現在CSSで禁則処理などを規定しているのは CSS Text Module Level 3 という文章なので、これを調べてみました。なお2017年12月現在も Working Draft なので最終稿ではありません。

長音( U+30FC)や小さいひらがな・カタカナ(例えば U+3085)は記号による行分割という枠組みで line-break プロパティに記載があります。これはいわゆる禁則処理の強さを指定するもので、英単語内などでの分割を制御する word-break プロパティよりも下位の指定です。

The following breaks are forbidden in strict line breaking and allowed in normal and loose:

  • breaks before Japanese small kana or the Katakana-Hiragana prolonged sound mark: i.e. characters with the Unicode Line Break property CJ. (See LineBreak.txt in [UNICODE].)

これらの文字は line-break: strict では分割禁止、line-break: normalline-break: loose では分割可とあります。省略した場合の line-break: auto ではUAが自由に禁則文字を決めていいとあるので、Firefoxでは含まれていたのがChromeでは含まれていない、で納得できます。

結論1:長音や小さいカナを禁則文字に含めたければ line-break: strict を明示すべき。


しかし line-break: strict を指定してもChromeでは解決しません。期待通りに禁則処理が行われている Test Suite と見比べたところ、Test Suite では lang="ja" 属性が使われていました。これを指定することで、問題の文字による禁則処理が行われるようになりました。

lang="ja" の場合にのみ前述の禁則文字が適用される、という記述は見つけられませんでしたし、実際 Firefox は lang 属性に関わらず適用するようです。とはいえ、

Authors should language-tag their content accurately for the best typographic behavior.

書かれていることですし、指定しておくに越したことはないでしょう。

結論2:lang="ja" も指定すべき。


div { background-color: #afa; width: 5em; }
指定なし
<div>
あいうえおーかきく<br>
あいうえおッかきく
</div>
word-break: break-all
<div style="word-break: break-all">
あいうえおーかきく<br>
あいうえおッかきく
</div>
line-break: strict
<div style="line-break: strict">
あいうえおーかきく<br>
あいうえおッかきく
</div>
lang="ja"
<div lang="ja">
あいうえおーかきく<br>
あいうえおッかきく
</div>
lang="ja" line-break: strict
<div lang="ja" style="line-break: strict">
あいうえおーかきく<br>
あいうえおッかきく
</div>

1
  • ご丁寧な回答、どうもありがとうございました。他のブラウザでは動作するようなので、Chromeについてはしばらく待ってみます。 2017年3月18日 12:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。