【CSS】縦書きレイアウトにすると全ページ印刷できない

前提・実現したいこと

文章を横書きで公開している。
印刷時に縦書きレイアウトを適用したいが、印刷プレビューで1ページ目しか表示されない。
全ページ印刷できるようにしたい。

試したこと

float:none;やoverflowの指定など
@media print以外を削除しても同様のエラー発生

該当のソースコード

html
1<!DOCTYPE html> 
2<html lang="ja">
3	<head>
4		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
5		<link rel="stylesheet" href="css/style.css" type="text/css" />
6		<title></title>
7
8	</head>
9	<body>
10		<div id="main">
11本文
12		</div>
13	</body>
14</html>

css
1@media print {
2	#main {
3		-ms-writing-mode: tb-rl;
4		-webkit-writing-mode: vertical-rl;
5		writing-mode: vertical-rl;
6		position: absolute;
7		right: 0;
8		top: 0;
9	}
10}

追記

確認環境はWin10にてChromeとEdge
メインユーザーはiOS、safari
PC環境からの印刷を想定

AbeTakashi

2021/01/22 03:37

まず対応すべきOSやブラウザなどの環境が書かれてないので、こちらを記載すべきかと思います。あと、質問の答えではなくて申し訳ないですが、縦書きの印刷ってかなり難しいですよね。 https://tategaki.github.io こういうサイトもありますが、このサイトですらChromeだと縦書き印刷はまぁまぁですが、MacのSafariだとグチャグチャになります。縦書き印刷についてはあまり根詰めてやっても現状では満足できるところまでたどり着けない可能性があると思います。