CSS）ブラウザで縦書き表示＆印刷。PHP版。

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

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

↓↓↓ 「テキスト縦書き表示（ＰＤＦ印刷用）」Webページ

A4横のPDFやDocuWorks等の電子文書にして、パソコン画面で見る事を想定している。

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

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

※ 以下の情報は、この記事を書いた当時のもの。その後、Chromeの印刷は改善され、 Firefoxは改悪され印刷できなくなった。今後もブラウザのバージョンによって、印刷が正常に行えない可能性あり。

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

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

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

● Brave も正常に印刷できる。余白は最小がおすすめ。

縦書き表示 JavaScript版 ↓↓↓。

晴歩雨描