俳句や短歌をSNSに投稿する前に、横書きのまま眺めていて「なんだかしっくりこない」と感じたことはないでしょうか。 日本語の詩歌や年賀状の文面は、長い歴史の中で縦書きで読まれることを前提に作られてきました。 横書きのテキストエディタで書いた文章を、投稿・印刷の前に実際の縦書きの見た目で確認できれば、 行の折り返し位置や余白の印象を事前にチェックできます。 この記事では、ブラウザで縦書きを確認する方法と、縦書きにすると変わる表記のポイントを解説します。
縦書きが必要になる実務・趣味のシーン
縦書きの確認が必要になる場面は、思っているより日常的にあります。
- 俳句・短歌・詩の投稿：X（旧Twitter）や投稿サイトに作品を載せる前に、 伝統的な縦書きレイアウトでの見た目・行の切れ目の印象を確認したいとき。
- 年賀状・暑中見舞いなどの挨拶状：Word・一太郎で印刷する前に、 文面がどの位置で改行されるか、全体のバランスがどう見えるかをブラウザで下書き確認したいとき。
- 伝統的な日本語文書のレイアウト検討：式辞・案内状・掛け軸に添える言葉など、 縦書きで読まれることが前提の文書を作成する際の構図確認。
- SNSでの縦書き風投稿演出：改行ごとに1文字ずつ縦に並べる「縦書き風」フォーマットで X・LINEに投稿し、視覚的なインパクトを出したいとき。
ブラウザで縦書きが表示できる仕組み — CSSの writing-mode
「なぜ普通のWebページの中で縦書きが表示できるのか」と疑問に思うかもしれません。 答えはシンプルで、CSS（Cascading Style Sheets）のwriting-modeプロパティにvertical-rlを指定するだけで、 文字の流れる方向を横（左→右）から縦（上→下・列は右→左）に切り替えられるためです。
/* CSS */
.vertical-text {
writing-mode: vertical-rl; /* 縦書き・右→左 */
text-orientation: mixed; /* 英数字は横向きのまま混植 */
}
あわせて指定するtext-orientation: mixedは、日本語の文字は縦向きのまま、半角英数字だけは横向きに回転させて読みやすくする指定です。 つまり縦書き変換ツールは、入力されたテキストを加工しているわけではなく、 表示側のCSSを切り替えることで縦書きの見た目をその場で再現しています。 書籍や新聞の組版と違って特別なフォントやレンダリングエンジンを必要としないため、 ブラウザだけで手軽に縦書きプレビューが実現できるわけです。
縦書きにすると変わる表記 — 句読点・カギ括弧・数字の向き
横書きの文章をそのまま縦書きに切り替えると、文字そのものだけでなく記号や数字の向きも一緒に変わります。 あらかじめ知っておくと、プレビューを見たときに違和感の正体がわかります。
| 要素 | 横書きでの向き | 縦書きでの向き |
|---|---|---|
| 句点「。」読点「、」 | 文字の左下寄り | 自動的に右上寄りへ回転 |
| カギ括弧「」 | 左右に開く | 自動的に上下に開く向きへ回転 |
| 半角数字・アルファベット | そのまま横向き | 1文字ずつ縦に並ぶ（縦中横は別途対応が必要） |
| 長音符「ー」 | 水平線 | 垂直線へ自動回転 |
句読点・カギ括弧・長音符の向き変更はブラウザが自動で処理してくれるため、入力側で気にする必要はありません。 一方で「令和6年」「1000円」のような複数桁の数字を横向きのまま美しく収める縦中横（たてちゅうよこ）という日本語組版特有の技法は、標準的なブラウザ表示だけでは再現されません。 年賀状や正式な文書で縦中横の仕上がりまで確認したい場合は、 ブラウザでのプレビューを構図・行の折り返し確認に留め、最終的な体裁はWord・一太郎などの印刷用ソフトで整えるのが確実です。
縦書き変換 と 縦読み — 名前が似ていて混同しやすい別機能
「縦書き」と「縦読み」は文字が上下に並ぶ点で似ているため混同されがちですが、目的は全くの別物です。
- 縦書き変換（/tools/vertical-text）： 入力した文章のレイアウトの向きを横書きから縦書きへ変換する機能。 文章の内容は一切変わらず、見た目だけが変わります。俳句・詩・年賀状の文面確認が主な用途です。
- 縦読みジェネレーター（/tools/tate-yomi-generator）： 複数行のテキストを用意し、各行の先頭文字を上から下に読むと隠しメッセージが浮かび上がる言葉遊びの文章を作る機能。 いわゆる「縦読み」で、サプライズメッセージやSNSでの遊び心のある投稿に使われます。
つまり「縦書き」はレイアウト方向の変換、「縦読み」は文章に仕込む言葉遊びという違いです。 俳句や年賀状の文面を伝統的な見た目で確認したいなら縦書き変換ツール、 友人へのサプライズメッセージを仕込みたいなら縦読みジェネレーターというように、目的に応じて使い分けてください。 縦読みの仕組みと作り方は縦読みとは — 隠しメッセージの作り方とSNSでの使い方で詳しく解説しています。
SNS投稿用の一文字改行フォーマット
縦書き変換ツールの「縦書きでコピー」ボタンを使うと、CSSの縦書き表示に対応していないSNSやメモ帳でも縦書き風に見せられる、 特殊なテキストフォーマットでコピーできます。仕組みは、入力の改行ごとに1つの列を作り、 列を右から左の順に並べ替え、短い列は全角スペースで高さを揃えるというものです。 結果としてテキストエディタ上でも縦書きに近い見た目を再現でき、SNS投稿で目を引く演出として使えます。 投稿前に文字数を確認したい場合は文字数カウンターを合わせて使うと、各SNSの文字数上限に収まっているかをすぐに確認できます。
まとめ
- 縦書きの確認は俳句・短歌・詩の投稿、年賀状などの挨拶状、伝統的な日本語文書のレイアウト検討で頻出する
- ブラウザの縦書き表示はCSSの
writing-mode: vertical-rlとtext-orientation: mixedで実現されており、 テキスト自体は加工されず見た目だけが切り替わる - 句読点・カギ括弧・長音符は縦書きにすると自動で向きが回転するが、数字を横向きのまま収める「縦中横」は別途対応が必要
- 縦書き変換＝レイアウト方向の変換、縦読み＝隠しメッセージの言葉遊びという別機能なので、名前が似ていても目的で使い分ける
- 「縦書きでコピー」を使えば、縦書き非対応のSNSやメモ帳にも一文字ずつ改行した縦書き風フォーマットで貼り付けられる
- 処理はすべてブラウザ内で完結し、入力したテキストはサーバーに送信されない