ブラウザで、縦書き・段組の文書を表示・印刷することに成功
これまでは、「縦書き・段組」のWeb文書を、ブラウザで表示することまではできていたのですが、印刷がうまくできませんでした。（これまでは、2ページ目以降がうまく印刷できませんでした。）
今回、印刷がうまくできるようになったので、ご紹介します。（ネット上にはなかなか参考になるページがありませんでした。）
理屈はよくわかりませんが、以下の（CSSファィルの）例を参考にすれば、みなさんも再現できると思います。
動作確認できた環境
OS : Windows 10 Home (20H2)
ブラウザ1 : Firefox 95.0.2 (64 ビット)
ブラウザ2 : Microsoft Edge 96.0.1054.62 (公式ビルド) (64 ビット)
うまくいった例
下記のHTMLファイル・CSSファイルの組み合わせで、「縦書き・段組」の「表示＋印刷」に成功しました！
次の２つのファイルを同じ場所に同じファイル名で保存すれば、
HTMLファイルをダブルクリックしてブラウザで表示させ、
さらに印刷コマンド（印刷プレビュー）で確認できます。
どちらも、文字コードは「UTF-8」で保存するようにしてください。
HTMLファイル
tategaki.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="tategaki.css">
<title>たて書き</title>
</head>
<body>
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
</body>
</html>
CSSファイル
このCSSファイルは、必ず上のHTMLファイルと同じ場所に同じ名前（tategaki.css）で保存してください。
tategaki.css
html{
font-size:14px;
width:97%; /* 段の幅 */
height:40vh; /* 段の高さ */
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl; /* horizontal-tb */
margin:1em 0;
padding:1em;
column-count:1; /* 段の数 */
column-rule:solid 3px black; /* 区切り線のスタイル */
line-height:1.5;
/* text-orientation:upright; /* 文字の向き mixed upright sideways*/
}
p{text-indent:1em}
@media print { /* 印刷の指定 */
html {
width:auto; /* 段の幅 */
height:auto; /* 段の高さ */
column-count:4; /* 段の数 */
}
}
@page {
size: A4 portrait; /* A4 縦書き */
/* size: A4 landscape; /* A4 横書き */
/* margin: 15mm; /* 印刷マージン */
}
Microsoft Edge の画像
↧