Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8960

ブラウザで、縦書き・段組を表示+印刷

$
0
0
ブラウザで、縦書き・段組の文書を表示・印刷することに成功 これまでは、「縦書き・段組」のWeb文書を、ブラウザで表示することまではできていたのですが、印刷がうまくできませんでした。(これまでは、2ページ目以降がうまく印刷できませんでした。) 今回、印刷がうまくできるようになったので、ご紹介します。(ネット上にはなかなか参考になるページがありませんでした。) 理屈はよくわかりませんが、以下の(CSSファィルの)例を参考にすれば、みなさんも再現できると思います。 動作確認できた環境 OS : Windows 10 Home (20H2) ブラウザ1 : Firefox 95.0.2 (64 ビット) ブラウザ2 : Microsoft Edge 96.0.1054.62 (公式ビルド) (64 ビット) うまくいった例 下記のHTMLファイル・CSSファイルの組み合わせで、「縦書き・段組」の「表示+印刷」に成功しました! 次の2つのファイルを同じ場所に同じファイル名で保存すれば、 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>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん <p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ <p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン <p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ <p>12345、67890 <p>ABCDE、FGHIJ、KLMNO、PQRST、UVWXY、Z </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 の画像

Viewing all articles
Browse latest Browse all 8960

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>