晴歩雨描

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

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

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/

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

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

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

 


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


 

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)

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

f:id:art2nd:20210103104452j:plain
f:id:art2nd:20210103104449j:plain
Braveで印刷(余白:最小)

縦書き表示 JavaScript版 ↓↓↓。