質問: 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; } ``` でも駄目でした。
回答: 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: normal` や `line-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; } ``` ``` 指定なし あいうえおーかきく あいうえおッかきく word-break: break-all あいうえおーかきく あいうえおッかきく line-break: strict あいうえおーかきく あいうえおッかきく lang="ja" あいうえおーかきく あいうえおッかきく lang="ja" line-break: strict あいうえおーかきく あいうえおッかきく ```