晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

CSS)ブラウザで縦書き表示&印刷。ChromeでなくFirefoxで印刷がおすすめ。

HTML、CSSで縦書き表示するWebページを作成。任意の文章に、以下のようなCSSを指定したHTMLページを生成する。

<style>
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
</style>

↓↓↓ 「テキスト縦書き表示(PDF印刷用)」Webページ

https://ok2nd.sakura.ne.jp/tategaki/

f:id:art2nd:20200102225154j:plain

文章を、A4横の縦書き文書PDFにして、パソコン画面で見る事を想定している。

タイトル、サブタイトル、本文を入れて、「縦書き表示」ボタンを押すと、縦書きのHTMLページが表示される。サンプル用に「富嶽百景」の文章が入っているので、任意の文章を縦書きするためには、クリアボタンを押して使う。

実際にブラウザで縦書き表示したページをPDFに印刷してみると、うまく印刷できないケースが多い。

● Chromeでは、文字サイズを大きくしないとA4横では文字がかなり小さく印刷される。今回、文字サイズを32ptにして表示した上で印刷。しかし、Chromeでは、文章の頁送りが正しく行われない。ページ左右の文字が切れて印刷される。下の印刷イメージ2ページ目を参照。

f:id:art2nd:20200102224110j:plain
f:id:art2nd:20200102224113j:plain
Chromeで印刷(文字サイズ:32pt)

● Edgeでは、文章の頁送りは正しく行われるが、全ページが印刷できない。先頭の数ページまでしか印刷されない。なお、Edgeではかなり大きな余白が付いてしまうので、設定で余白「狭い」にして印刷。

f:id:art2nd:20200102224142j:plain
f:id:art2nd:20200102224138j:plain
Edgeで印刷(余白「狭い」で印刷)

● 今回の検証ではFirefoxだけが正常に印刷できた。なお、Firefoxではページの左右の余白が小さく印刷されるので、ページ左右に余白を付けて印刷した方が良い。以下の印刷イメージサンプルは、左8mm、右11mmで印刷。

f:id:art2nd:20200102224005j:plain
f:id:art2nd:20200102224001j:plain
Firefoxで印刷(ページ左右に余白:左8mm、右11mm)