HTML、CSSで縦書き表示するWebページを作成。任意の文章に、以下のようなCSSを指定したHTMLページを生成する。
<style>
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
</style>
↓↓↓ 「テキスト縦書き表示（ＰＤＦ印刷用）」Webページ
https://ok2nd.sakura.ne.jp/tategaki/
文章を、A4横の縦書き文書PDFにして、パソコン画面で見る事を想定している。
タイトル、サブタイトル、本文を入れて、「縦書き表示」ボタンを押すと、縦書きのHTMLページが表示される。サンプル用に「富嶽百景」の文章が入っているので、任意の文章を縦書きするためには、クリアボタンを押して使う。
実際にブラウザで縦書き表示したページをPDFに印刷してみると、うまく印刷できないケースが多い。
● Chrome では、文字サイズを大きくしないとA4横では文字がかなり小さく印刷される。今回、文字サイズを32ptにして表示した上で印刷。しかし、Chromeでは、文章の頁送りが正しく行われない。ページ左右の文字が切れて印刷される。下の印刷イメージ2ページ目を参照。
● Edge では、文章の頁送りは正しく行われるが、全ページが印刷できない。先頭の数ページまでしか印刷されない。なお、Edgeではかなり大きな余白が付いてしまうので、設定で余白「狭い」にして印刷。
● Firefox は正常に印刷できる。なお、Firefoxではページの左右の余白が小さく印刷されるので、ページ左右に余白を付けて印刷した方が良い。以下の印刷イメージサンプルは、左8mm、右11mmで印刷。
● Brave も正常に印刷できる。余白は最小がおすすめ。
