縦書きの句読点・小書き字・長音の組版ルール

1. 行頭禁則: 句読点・閉じ括弧は列頭に置かない

日本語の縦書き組版には、特定の文字を列の頭（行頭）に置いてはならないという「行頭禁則」の慣習があります。対象文字は句読点「、。，．」、感嘆符・疑問符「！？!?」、閉じ括弧「）」』】〉》」」」、繰り返し記号「ゝゞ々ヽヾ」、長音「ー」、補助記号「”’」など。なぜ禁則かというと、これらは前の文字に「くっついて」意味をなす文字で、列頭に単独で置くと意味の流れが切れて読みにくくなるためです。組版ソフトは禁則対象文字が列頭に来そうなとき、前列の末尾に「ぶら下げ」るか、前列の文字を1文字繰り上げて回避します。本ツールは「ぶら下げ方式」を採用し、前列の高さが規定値±1字の範囲で伸びる形にしています。

2. 縦組句読点の右上配置

横書きの「、」「。」は字面の下中央（ベースライン上）に置きますが、縦書きでは伝統的に字面の右上に寄せて配置するのが日本語組版の慣習です。これは活版印刷の時代、句読点活字を字の右上に配置して縦の流れを止めない設計を引き継いだもの。CSS Writing Modes Level 4 の仕様にも縦組み時の句読点配置についての記述があり、フォント側で OpenType 機能の vert / vrt2 / vpal が定義されていればブラウザは自動で適切な位置に配置します。本ツールはCanvasで描画するため OpenType 機能に依存せず、句読点を字幅の35%右上に明示的に寄せて描画。これにより、どのフォントでも一貫した縦組句読点位置が得られます。

3. 「ー」「〜」「…」「（）」「「」」の90度回転

長音記号「ー」、波ダッシュ「〜」「〰」、三点リーダ「…」「‥」、ダーシ「―」「‐」「－」「—」、丸カッコ「（）」、カギカッコ「「」」、二重カギ「『』」、隅付きカッコ「【】」、山カッコ「〈〉」「《》」、角カッコ「［］」、波カッコ「｛｝」、矢印「→」「←」「↑」「↓」、等号「＝」など、横書きで横向きに伸びる文字は、縦書きでは90度回転して縦向きになります。CSS Writing Modes Level 4 で text-orientation: mixed（縦書き時のデフォルト）にしておけば、ブラウザが Unicode の Vertical_Orientation プロパティを参照して自動回転しますが、フォントによって挙動が異なるため見え方が安定しないことがあります。本ツールは Canvas で明示的に context.rotate(90°) を呼んで描画し、フォント差を吸収しています。

4. 小書き字（っ・ゃ・ゅ・ょ）の縦位置調整

小書きひらがな・カタカナ「ぁぃぅぇぉっゃゅょゎヵヶ」「ァィゥェォッャュョヮ」は横書きでは文字の下半分に配置されますが、縦書きでは字面の右上に微寄せして配置するのが整った組版です。これは仮名の「小書き＝抜けた音・拗音」を視覚的に示すための慣習で、右上に小さく置くことで前の音とのつながりが分かりやすくなります。本ツールはこれらの小書き字を検出し、x座標を字幅の10〜15%右にずらして描画。長音記号と同じく、ブラウザ標準の vertical-rl 任せだとフォントによって位置がバラつくため、Canvas で明示的に補正しています。

5. text-orientation: mixed と半角英数の横倒し

CSS Writing Modes Level 4 の text-orientation プロパティは縦書き時の文字の向きを制御し、mixed（デフォルト）・upright・sideways の3値を取ります。mixed は「漢字・かなは正立、横書き由来の文字（半角英数・記号）は90度横倒し」という挙動で、和文と欧文が混在する文章の自然な見え方を作ります。upright は「全ての文字を正立させる」もので、住所表記や数字の縦書き組版で使われるが、半角英数が縦に細長く伸びるため読みにくい。sideways は「全ての文字を90度横倒し」で、欧文を縦書きにしたいときに使う。本ツールは mixed 相当の挙動を実装しており、半角英数（A-Z, a-z, 0-9）は90度右回転で描画され、漢字・ひらがな・カタカナは正立します。全角英数（Ａ-Ｚ, ａ-ｚ, ０-９）を入力すれば正立できるため、ID・年号などを縦書きで正立させたい場合は全角に変換してください。

6. フォントによる縦書きの差・解決法

縦書きの見え方はフォントが OpenType の vert / vrt2 / vpal 機能をどこまで実装しているかで変わります。Hiragino Mincho ProN / Hiragino Sans / Yu Mincho / Yu Gothic / Noto Serif JP / Noto Sans JP は縦組み機能を持っていますが、句読点の位置・小書き字の縦位置・カッコの回転対応にはバラつきがある。Webフォントを @font-face で読み込んで縦書きする場合、unicode-range や OpenType 機能が落ちることがあり、結果が崩れます。本ツールは macOS / iOS 標準の Hiragino 系を基本フォントスタックに置き、Yu Mincho・Noto Serif JP をフォールバックとして指定。さらに句読点位置・回転・小書き字位置を Canvas 上で明示的に補正しているため、OS・ブラウザを問わず同じ縦組結果が得られます。Web ページに縦書き CSS で表示するときは本ツールで画像にしてからの方が崩れません。

関連ツール

• ・全角半角変換 半角英数を全角化して縦書き正立に
• ・漢数字変換 アラビア数字を漢数字で縦書き表記
• ・文字数カウント 縦書きの列あたり字数の目安に