改行

テキストを次の行に折り返す処理。CSS の word-break や overflow-wrap で制御する。

改行とは、テキストを現在の行から次の行へ折り返す処理です。Web 開発においては、HTML の <br> タグによる明示的な改行と、ブラウザが行幅に応じて自動的に行う折り返し (ソフトラップ) の 2 種類があります。CSS の word-breakoverflow-wrapwhite-space プロパティを組み合わせることで、自動改行の挙動を細かく制御できます。

日本語テキストは単語間にスペースがないため、原則としてほぼ任意の文字位置で改行できます。一方、英語テキストは単語の途中で改行しないのが基本ルールです。CSS の word-break: break-all を指定すると英語でも任意の位置で改行されますが、可読性が低下するため注意が必要です。overflow-wrap: break-word は、コンテナからはみ出す長い単語に限って途中で改行する、より穏やかな制御を提供します。overflow-wrap にはもう 1 つ anywhere という値があり、単語の途中で改行する見た目の挙動は break-word と同じですが、その改行機会を min-content (最小内容幅) の計算に含めるかどうかが違います。anywhere は含めるため要素の最小幅が 1 文字分まで縮み、break-word は含めないため最も長い単語の幅が下限として残ります。グリッドやフレックスの中で長い URL がレイアウトを押し広げてしまう場合は、この差が結果を左右します。

禁則処理は日本語組版における重要な改行ルールです。行頭に句読点 (。、) や閉じ括弧 (」)) が来ないようにする「行頭禁則」、行末に開き括弧 (「() が来ないようにする「行末禁則」があります。CSS の line-break プロパティで禁則の厳密さを制御でき、指定できる値は autoloosenormalstrictanywhere の 5 つです。厳密さの段階を表すのは前の 4 つで、loose は新聞のように行幅が狭い組版を想定して禁則を最も緩め、strict では小書きの仮名 (っ、ゃ) も行頭禁則の対象になります。残る anywhere は段階ではなく別枠の値で、句読点の前後や連続する空白の中、さらには単語の途中も含めてあらゆる文字の境界に改行機会を作り、禁則を一切無視します。ハイフンも挿入されないため、狭い枠に何としても収めたい表組みやコード表示に限って使う値と考えておくとよいでしょう。

プログラミングにおける改行コードの違いは、実務で頻繁にトラブルの原因になります。Unix/Linux 系は LF (0x0A)、古い Mac OS は CR (0x0D)、Windows は CRLF (0x0D0A) を使用します。Git でのファイル差分が意図せず大量に出る、CSV パーサーが正しく動作しないといった問題は、改行コードの不一致が原因であることが少なくありません。.editorconfig や Git の core.autocrlf 設定で統一するのが実務上の定石です。

よくある誤解として、HTML の改行と改行コードを混同するケースがあります。HTML ではソースコード中の改行は空白文字として扱われ、表示上の改行にはなりません。表示上の改行には <br> タグを使うか、CSS の white-space: pre-line を指定して改行コードを反映させる必要があります。

文字数カウントの観点では、改行コードは目に見えない制御文字ですが、文字数としてカウントされます。LF は 1 文字、CRLF は 2 文字として扱われるため、同じ内容のテキストでも改行コードの種類によって文字数が変わります。ただしこれはコードユニットやコードポイントを 1 単位として数えた場合の話です。Unicode の書記素分割規則では CR と LF の並びを分割しない決まりになっているため、書記素クラスタ単位で数えるカウンタでは CRLF が 1 つになります。「a」+ CRLF +「b」を実際に数えると、コードユニットは 4、コードポイントも 4、書記素クラスタは 3 という結果になります。改行を含むテキストで複数のツールが違う値を出すときは、まずどの単位で数えているかを疑ってください。

入力欄の側にも落とし穴があります。textareamaxlengthminlength は UTF-16 のコードユニット単位で判定されるため、サロゲートペアで表される絵文字は 1 つで 2 を消費します。さらにフォーム送信される値の改行は、wrap 属性の値にかかわらず送信時のシリアライズ規則によってすべて CR+LF のペアに揃えられます (既定値の soft でも同様です)。手元では LF で入力していても送信時には改行 1 つが 2 コードユニットになるため、行数の多い文章では画面に表示された文字数とサーバー側で検証される文字数がずれます。改行を含む入力に上限を設けるときは、どの単位で・どの時点の値を数えるのかを先に決めてから実装してください。

この記事を共有