🤔
ブラウザごとで改行位置が異なるようなので調べた

2025/03/08に公開1件
ChromeとFirefoxで改行位置が違う！となったことがあったので、調べてみることにした。

 line-break以下MDNより、[1]
line-break は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則（禁則）を設定します。
初期値はauto。値によって禁則処理の強さを変えることができる。

それぞれの値の違いによる表示の違いはMDNに表示例がある。

autoについて深堀をしてみる。

MDNの説明より、
auto

既定の改行規則を使用してテキストを改行します。
W3C Editer's Draftの「CSS Text Module Lvel3」を見てみるとautoについては以下のように記載がある。[2]
auto

The UA determines the set of line-breaking restrictions to use, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines.
Google翻訳すると、

「UA は使用する改行制限のセットを決定し、行の長さに基づいて制限を変更する場合があります。たとえば、短い行には制限の少ない改行ルールのセットを使用します。」

どうやらUAが改行制限のセットを決めているらしい。判断するUAが違えば違う改行制限を選ぶ可能性があるということだろうか。

その後の文章では、loose、normal、strictそれぞれに適用されるルールの正確な改行規則のセットはUA次第であると記述があった。

 検証
 環境各ブラウザのバージョン
Chrome v134.0
Edge v134.0
Firefox v136.0
テキスト、コードは「MDNのline-breakの例」に記載のものを使用した。各テキストごとにwidth: 10em;、white-space: normal;が設定されている。

 表示▼Chromeでの表示結果

▼Edgeでの表示結果

▼FIrefoxでの表示結果

autoの時、ChromeとEdgeは改行位置は同じであったが、Firefoxのみ改行位置が異なった。Firefoxは「美しい/なぁ～」で改行され、文頭に小さい「ぁ」がこないようになっている。

3ブラウザとも繰り返し文字については分割・分離せず、また行頭に句読点がこない点は共通していた。

その他の値の時は各ブラウザで改行位置は同じであった。

 どの文字の前で改行する・しないのかW3C Editer's Draftの「CSS Text Module Lvel3」のline-breakに関する項目のloose、normal、strictの違いの仕様に書かれていることが参考になると思った。組版における禁則処理でも対象文字として出てくる拗促音（「っ」、「ぁ」、「ゃ」など）や繰り返し文字（「々」や「ゞ」など）、分離できない文字（「…」など）などの文字の前でルールによって改行する・しないが起こるようだ。

該当する文章をGoogle翻訳したものを以下に載せる。
以下の改行は、厳密な改行では禁止されていますが、通常の改行および緩い改行では許可されています:

日本語の小文字の仮名またはカタカナ・ひらがなの長音記号、つまり Unicode の改行クラス CJ の文字の前での改行。 [UAX14]

次の改行は、表記体系が中国語または日本語の場合、通常の改行および緩い改行で許可されますが、それ以外の場合は禁止されています:

特定の CJK ハイフンのような文字の前での改行:

〜 U+301C、゠ U+30A0

次の改行は、先行する文字が Unicode 改行クラス ID  [UAX14] に属する場合 (word-break: break-all により先行する文字が ID として扱われる場合を含む)、緩い改行で許可されますが、それ以外の場合は禁止されています:

ハイフンの前での改行:

‐ U+2010、- U+2013

次の改行は、通常の改行および厳密な改行では禁止され、緩い改行では許可されます:

繰り返し記号の前での改行:

々 U+3005、〻 U+303B、ゝ U+309D、ゞ U+309E、ヽU+30FD、ヾ U+30FE

分離不可能な文字（例： U+2025、… U+2026）間の改行、つまり Unicode 改行クラス IN の文字。  [UAX14]

以下の改行は、書記体系が中国語または日本語の場合、loose に許可され、それ以外の場合は禁止されます。

特定の中央揃えの句読点の前での改行:

・ U+30FB、： U+FF1A、； U+FF1B、 ･ U+FF65、‼ U+203C、⁇ U+2047、⁈ U+2048、⁉ U+2049、！ U+FF01、？ U+FF1F

接尾辞の前での改行:

Unicode の改行クラス PO [UAX14] および東アジアの幅プロパティ [UAX11] があいまい、全角、またはワイドである文字。

接頭辞の後での改行:

Unicode の改行クラス PR [UAX14] および東アジアの幅プロパティ [UAX11] があいまい、全角、またはワイドである文字。

 おわりに既定の改行規則を使用してテキストを改行させる「line-break: auto;」による改行位置はUAごとで異なるようだ。大まかにChrome・Edgeは同じであることが多いが、Firefoxでは改行位置が他2ブラウザと異なるときがある。

SafariやAndroid端末のChromeなども検証してみたいと思った。

備考として他のテキストでの表示も下に掲載する。

 備考（他テキストでの検証）意味があるかはわからないが他テキストでの表示をスクリーンショットしたものを以下に掲載する。

CSSは先ほどの検証と同じとする。

 検証 1-2句読点が文頭に来ないかを検証。

▼Chromeでの表示結果

▼Edgeでの表示結果

▼FIrefoxでの表示結果

 検証 2テキストは宮沢賢治の「注文の多い料理店」（青空文庫より引用[3]）

違いとして、
文末に句読点が来る・来ない
小文字（今回だと「っ」）前で改行あり・なし
文末に小文字（今回だと「ょ」）が来る・来ない
<p class="wrap-box auto">
      auto:<br>二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲をかついで、白熊のような犬を二疋つれて、だいぶ山奥の、木の葉のかさかさしたとこを、こんなことを云いながら、あるいておりました。<br>
      「ぜんたい、ここらの山は怪しからんね。鳥も獣も一疋も居やがらん。なんでも構わないから、早くタンタアーンと、やって見たいもんだなあ。」<br>
      「鹿の黄いろな横っ腹なんぞに、二三発お見舞もうしたら、ずいぶん痛快だろうねえ。くるくるまわって、それからどたっと倒れるだろうねえ。」<br>
      それはだいぶの山奥でした。案内してきた専門の鉄砲打ちも、ちょっとまごついて、どこかへ行ってしまったくらいの山奥でした。
    </p>
表示

左から順にChrome、Edge、Firefoxの表示を並べた。

 参考MDN 「line-break」　https://developer.mozilla.org/ja/docs/Web/CSS/line-break
W3C Editer's Draft「CSS Text Module Lvel3」https://drafts.csswg.org/css-text/#line-break-property
モリサワ　ブログ - Morisawa DTP Lab.「「そこにその文字はNGです」禁則処理について」　https://www.morisawa.co.jp/blogs/MVP/8760

脚注
https://developer.mozilla.org/ja/docs/Web/CSS/line-break ↩︎
https://drafts.csswg.org/css-text/#line-break-property ↩︎
https://www.aozora.gr.jp/cards/000081/card43754.html ↩︎
Discussion

juner
それぞれのブラウザに不具合として報告すれば通りそうな案件………？