

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

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

### 追記

[code]

    body {
     word-break: normal;
     word-wrap: break-word;
    }
    
[/code]

でも駄目でした。


CC BY-SA 4.0
2017-03-17T03:53:52.083
33378
2020-01-26T03:58:33.137
2020-01-26T03:58:33.137
32986
21089
question
css google-chrome
Chromeで日本語の禁則処理が効かない


[Chrome58以降](https://bugs.chromium.org/p/chromium/issues/detail?id=735539)、`lang="ja"`
属性と `line-break: strict` を付けることで、長音や拗音の前での行分割を抑制することができるようです。

* * *

現在CSSで禁則処理などを規定しているのは [CSS Text Module Level 3](https://drafts.csswg.org/css-
text-3/) という文章なので、これを調べてみました。なお2017年12月現在も Working Draft なので最終稿ではありません。

長音（`ー` U+30FC）や小さいひらがな・カタカナ（例えば `ッ` U+3085）は記号による行分割という枠組みで [`line-break`
プロパティ](https://drafts.csswg.org/css-text-3/#line-break-
property)に記載があります。これはいわゆる禁則処理の強さを指定するもので、英単語内などでの分割を制御する `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](http://test.csswg.org/harness/test/css-text-3_dev/spec/css-
text-3/section/5/alpha/css3-text-line-break-jazh-018/) と見比べたところ、Test Suite では
`lang="ja"` 属性が使われていました。これを指定することで、問題の文字による禁則処理が行われるようになりました。

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

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

と[書かれている](https://drafts.csswg.org/css-
text-3/#languages)ことですし、指定しておくに越したことはないでしょう。

**結論2：`lang="ja"` も指定すべき。**

* * *
[code]

    div { background-color: #afa; width: 5em; }
[/code]

[code]

    指定なし
    <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>
[/code]


CC BY-SA 3.0
2017-03-17T13:30:09.233
33395
2017-12-13T14:28:15.103
2017-12-13T14:28:15.103
8000
8000
33378
answer