和文組版

和文には、単語のあいだの空白がありません。欧文の作法をそのまま持ち込むと、その一点でほころびます。

図を大きく見る

図の中身を文字で読む

• 禁則処理　句読点や閉じ括弧を行頭に置かない
• ✕　これは和文組版の話です　○　これは和文組版の話で
• 。次の行がこうなる　す。次の行はこうなる
• ルビ　読みを小さく添える。行送りに余裕が要る　縦組み　和の文脈・短い見出しに限定して使う
• ときわの　見出しの例　物理プロパティは意味が変わる。
• 常盤野　初出の固有名詞で読みを確定させる　margin-inline-start を使う。
• ✕ 行送りを詰めたままルビを使うと、上の行と接触する　数字は縦中横の指定が要る。
• 漢字かな比率　文章ブロックの濃さが変わる
• 御相談承ります　硬く重い　補助動詞・形式名詞・副詞は「ひらく」と軽くなる。
• ご相談承ります　柔らかく軽い　ただし開きすぎると語の切れ目が読めなくなる。
• 行送りは和文で 1.7〜2.0。欧文の目安（1.5）では窮屈になる。

ひと目で#

和文は欧文と構造が違います。単語間に空白がなく、文字が正方形に収まり、上下への突出がない。 この差が、行送り、折り返し、字間のすべてに効きます。

禁則処理

句読点や閉じ括弧を行頭に置かず、開き括弧を行末に置かない制御

ルビ

読みを小さく添える。行送りに余裕が要る

字取り

文字数の違う項目名を、同じ幅に収めて揃える

縦組み

上から下へ、右から左へ。短い見出しや引用に限るのが現実的

漢字かな比率

文章のかたまりの濃さを決める。「御相談」と「ご相談」では印象が違う

使い分け#

図を大きく見る

約物のアキ・数字と単位・欧文混植の組み方は、和文の組み実例集 に完成コードごとまとめました。

間違えやすいところ#

• ✕和文にイタリックをかける和文にイタリックは存在しない。合成の斜体になり、字形が崩れる
• ✕text-align: justify を和文の本文に使う禁則と組み合わさって、字間が不揃いになる
• ✕word-break: break-all を指定する禁則処理が効かなくなり、句読点が行頭に来る
• ✕行送りを詰めたままルビを使う上の行とぶつかる
• ✕縦組みで margin-left を使う意味が変わる。margin-inline-start を使う
• ✕縦組みで数字をそのまま置く横倒しになる。縦中横（text-combine-upright）が要る

とくに多いのが break-all の事故です。あふれ対策のつもりの1行が、禁則処理を丸ごと無効にします。

図を大きく見る

図の中身を文字で読む

• ✕ word-break: break-all
• 「どの文字の間で折ってもよい」＝禁則ごと壊れる
• 営業時間は10時から18時までです
• 。定休日は火曜です。詳しくは h
• ttps://example.com/menu をご覧
• ください。
• 句点が行頭に落ちる。英単語も途中で割れる
• ○ line-break: strict ＋ overflow-wrap: anywhere
• 禁則は守り、収まらない長い語だけを折る
• 営業時間は10時から18時までです。定休日は火曜です。詳しく
• は https://example.com/menu
• をご覧ください。
• 句読点は行頭に来ない。URLはあふれるときだけ折れる
• break-all は禁則処理そのものを無効にする。URLのあふれ対策には overflow-wrap: anywhere を使い、
• 行頭・行末の約物は line-break: strict に任せる。2つは役割が違うので、組で書く。
• 確認は幅375pxで。行数が増えるほど、禁則の破れは現れやすい。

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

介護施設のお知らせページです。本文に text-align: justify と word-break: break-all が指定されていて、幅375pxで見ると句点が行頭に落ち、英単語が途中で切れています。禁則を効かせるつもりの指定が、逆に禁則を壊していました。break-all は「どの文字の間で折ってもよい」という宣言だからです。

指定を line-break: strict と overflow-wrap: anywhere の組に置き換え、両端揃えをやめます。長いURLは折れたまま、句読点は行頭から消えます。約物・数字・欧文が交ざる組みの実物は 和文の組み実例集 にあります。

確認する#

• 幅375pxで、行頭の句読点・閉じ括弧と行末の開き括弧が出ていない
• 長いURLと英単語が枠を突き抜けていない（word-break: break-all は使っていない）
• 和文の強調と引用が斜体になっていない

使えるパターン#

• 和文本文段

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は文字を読ませるにまとめてある。逆引きには全188件。

折り返しを試す#

約物・英数字・長い URL が交ざる段落で、折り返しの制御を切り替えます。幅を動かすと折り返しの位置が変わるので、句読点が行頭に来るか、URL が枠を突き抜けるかをその場で確かめられます。

body {
  line-break: strict;
  overflow-wrap: anywhere;
}

この道具は JavaScript で動きます。無効の場合は、上の表と既定値のコードを使ってください。

出典#

• JIS X 4051 日本語文書の組版方法
• W3C 日本語組版処理の要件（JLReq）

関連#

• 和文の組み実例集約物・数字・欧文混植の完成コード
• 字間と行間行送りの目安
• 書体の選び方明朝とゴシック
• 平易な言葉漢字をひらく判断