ほんっとにはじめてのHTML5とCSS3：【41】句読点などが行頭に来るかどうか決める line-break

【41】句読点などが行頭に来るかどうか決める line-break

最終更新日：2018年09月25日　（初回投稿日：2018年09月25日）

line-breakプロパティは、改行ルール（禁則処理）の厳密さを指定するプロパティ。

「line-break（ライン　ブレイク）」とは「改行」の意味です。

このプロパティは CJK（中国語、日本語、ハングル）のみが対象だそうです。

各ブラウザにはあらかじめデフォルトの改行ルールが設定されていて、自然改行した後の行頭に「句読点」「記号」などの約物が来ないようになっています。
日本語の場合は、撥音・拗音・促音（んゃゅょっ など）も対象です。

自然改行とは、ボックスの端にテキストが達した時に自然に次の行に流れること。
<br>で強制改行した場合は、この改行ルールは適用されません。

この改行ルールを「ゆるい（loose）」から「厳密（strict）」まで設定できるのが今回の line-breakプロパティです。
改行直後の行頭にくるテキストの制御のためのプロパティってかんじ。

このプロパティは、CSS 2 で IE の独自仕様だったのですが、W3C の CSS 3（Text Module Level 3）で草案に入っています。

完全対応しているブラウザは、IE11, Edge, Chrome, Safari（iOS Safariも）です。
（IE 8 はベンダープレフィックス「-ms-」が要るようですけど、もうこれはいいか）
Android標準ブラウザ・Android Chrome・Android Opera はベンダープレフィックス「-webkit-」が必要。
Firefox だけはなぜか未対応だそうです。（2018年9月記）

本日のINDEX

参考：
・CSS Text Module Level 3 | W3C Working Draft
・line-break - CSS | MDN

line-breakプロパティの値

line-breakプロパティの値はキーワードだけです。

line-breakプロパティの値
キーワード	auto がデフォルト値。 loose、normal、strict、anywhere
グローバル値	line-break: inherit; 親の値を継承（コレ書かなくても継承するけど） line-break: initial; 継承した親の値を解消しデフォルト値に戻す line-break: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	すべての要素

それぞれのキーワードは、以下の意味があります。

auto: ブラウザにおまかせ。ブラウザデフォルトの改行ルールで改行します。
loose: 最もゆるい改行ルールで改行します。短い行（新聞など）で使われるんだそうです。
normal: 一般的な改行ルールを使います。
句読点（ , . 、。）や反復記号（々ゞ）、記号（... .. ・；：！？ !? ?! ?? !! ）が行頭に来ない規則です。
strict: 最も厳しい改行ルールを使います。
撥音（ん）、「じゃ」などで使う拗音（ゃゅょぁぃぅぇぉゎ）、「はっ」などで使う促音（っ）、ハイフン（ - = ）、長音記号（ー〜）、閉じ括弧（」』））なども行頭に来ない規則です。
anywhere: 改行ルールを無視して、どの文字でも改行します。
＊この値は W3Cで「リスクがあり、勧告候補時に削除される可能性がある」とされています。実装しているブラウザも無いようです。

line-breakプロパティの指定サンプル

line-breakプロパティの値をぜんぶ使ってみます。
（未実装のFirefox以外のブラウザで見てください）

<textarea>要素で作っていますので、ボックスの幅を変えて行頭にどんなテキストが来るか確認してみてください。

サンプルの文面がアレですが、auto, loose, normal は同じように表示しますね。
strict は、記号や拗音などが行頭に来ません。

ちなみに、このプロパティに対応していない Firefoxで見ると、すべての値が「strict」の表示でした。まあそれでイイんだけどさ。

サンプルのソースコードは、ざっとこんなかんじです。

<textarea rows="8" disabled style="-webkit-line-break:auto; line-break:auto">
【 line-break: auto 】
きゃ.きゅ,きょ々しゃゞしゅ？しょ？じゃ.じゅ,じょ、ちゃ。ちゅ々ちょゞにゃ〜にゅーにょ-ひゃー=
ひゅ？ひょ！みゃ：みゅ；みょ・くゎ...ね!?...んっきゃ.きゅ,きょ々しゃゞしゅ？しょ？じゃ.じゅ,じょ々
ちゃ。ちゅ々ちょゞにゃ〜にゅーにょ!!-ひゃ??ひゅ?ひょ！みゃ：みゅ；みょ・くゎ...ねぇ。
</textarea>
<textarea style="-webkit-line-break:loose;line-break:loose">（テキストは同じです）</textarea>
<textarea style="-webkit-line-break:normal;line-break:normal">（テキストは同じです）</textarea>
<textarea style="-webkit-line-break:strict;line-break:strict">（テキストは同じです）</textarea>
<textarea style="-webkit-line-break:anywhere;line-break:anywhere">（テキストは同じです）</textarea>

word-break は line-break に影響を与えない（Firefox以外）

line-breakプロパティ のほうが word-break: break-all よりも優先。
word-break は line-break に影響を与えないようになっています。

word-breakプロパティも、改行の禁則処理を扱うプロパティ。
word-break: break-all は、CJK以外のテキストを1文字単位で改行させる指定。ただし CJKはもともと1文字単位で改行できるので無関係。
詳しくは、【35】改行の禁則処理を解除するか決める word-breakプロパティをご覧ください。

同じ文言を word-break:break-all でも指定してみます。
（まずは、できれば Firefox以外で見てください）

サンプルのソースコードです。

<textarea style="word-break:break-all">（テキストは同じです）</textarea>

word-break:break-all の指定も「line-break: auto」と同じようになっています。（行頭に役物や拗音は来ていません）
上のサンプルは line-break を指定していないので、デフォルト値（line-break: auto）になっているんです。この指定が優先されるので、「ょ」や「.」などが行頭に来ないんですね。

約物なども行頭に来ていいくらいの改行をしたければ、 line-break: anywhere を使うんだそうです。（その anywhere は削除されるかもしれない...んですけどね）

で、ココで一つ問題が！（笑）
line-breakプロパティに未対応の Firefox では、line-breakのデフォルト値が働かないので、word-break :break-all を指定すると、なんでもお構いなしに切ります。
こんなかんじで↓

Firefox だけが他のブラウザと表示が違うので困っちゃいますね。
が、line-break も word-break も正直あんまり使わない（ブラウザデフォルトで十分な場合が多い）ので、まいっかってかんじですかね。

整理します→ word-break と line-break

word-break と line-break、ややこしいので整理してみます。
どっちも自然改行の禁則処理に関するプロパティです。

word-break
CJK以外（英語とか）では「単語の途中で自然改行するかどうか」決める。
CJK（中国語・日本語・ハングル）では「自然改行しないようにするか」を決める。

line-break
CJKだけ。自然改行の行頭に役物や撥音・拗音・促音などが来ないようにする。

ざっくり表にまとめると、こんなかんじ↓

次回予告

さて次回は、hanging-punctuationプロパティを使ってみよう。
これは、句読点の「ぶら下がり」表示をします。「ぶら下がり」とは、ボックスの外側に句読点（, . 、。）や括弧（「（ " ' ）を出して表示することです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2018-09-25（Tue）│
投稿日：2018-09-25（Tue）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿