青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

CSSで禁則処理のおすすめ

手動で文章に改行を入れたくない。

wemo.tech

禁則処理、例えば句読点(,や.)が文章の先頭に来ないようにとか。
どこまでを禁則にするかによりますが、単語レベルで単語中では改行しないように、とかも出来ます。これらを改行調整することなく良い感じに自動でやってくれるんですね。

今回は日本語限定の話。英語と日本語ではどうやら挙動が違うらしい。厳密にはCJK(中国語、日本語、韓国語)が挙動が違うらしい。

word-break
developer.mozilla.org

keep-allは改行を許可しない。結果箱から溢れる。
ただ句読点とか記号入れると箱から溢れそうなら記号で改行。
break-allはCJKには関係ない。CJKはもともと単語途中でも改行されるから。
つまり、こいつの指定いらない。keep-allの使い所どこなんだろう。

しかも。禁則処理に関しては、強さの順序があるらしい。

ja.stackoverflow.com

その中でword-breakは上位の指定。あんま使わないほうが良さそう。

line-break
developer.mozilla.org

line-break: strict;

line-breakはそもそもCJKのみに効く指定らしい。
strictを指定すると、日本語の「ー」や「っ」でも単語の一部として効くようだ。
これ必要そう。
ちなみにlang="ja"も必要らしい。 (ブラウザによる)

overflow-wrap
developer.mozilla.org

overflow-wrap: break-word;

単語途中で改行入る。 (英語でも) 句読点で文章始まらない。
え、でもそれって日本語ならなにも指定しないのと普通じゃない…?
でも見た感じIEとかだと禁則処理が効いてなくて句読点が文頭に来てる場合がある気がするので、その場合は必要。ちなみにもともとはword-wrapという指定だったので古いブラウザ対応のためにそちらも必要。


結論

HTMLにlang="ja"を指定した上で、

line-break: strict;
overflow-wrap: break-word;
word-wrap: break-word;

かな。結局単語ごとの良い感じのところでも改行は自分でやるしかなさそうだ…不毛だ…