LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Qiibow

ブラウザで、縦書き・縦スクロール（段組）を表示＋印刷、PDF化

Last updated at Posted at 2021-12-29

1. ブラウザで、縦書き・縦スクロール（段組）の文書を表示・印刷することに成功

今回、「
iPadOS, iOS でも、Windows, Android でも、ブラウザで、縦書き・縦スクロール(段組)の表示
」という記事を書きました。
ただし、印刷・PDF化については検証できていません。どなたか検証結果を教えていただければ加筆します。

なお、iPadOS, iOS では、端末に保存した HTML ファイルをブラウザで開くことはできない仕様になっていることが判明しました。今回の確認例は、ブラウザとサーバーとの接続による HTML （オンライン）表示に限られ、端末に保存した HTML ファイルを正常に（オフライン）表示することはできません。

ですが、ブラウザで閲覧した Web ページ（HTML ファイル）については、例えば、iPad のSafari ブラウザで閲覧した Web ページ（HTML ファイル）については、「リーディングリストへ追加し、かつ、オフライン用に保存」した場合には、後からオフラインで読むことができることがわかりました。

詳しくは、こちらをご覧下さい。
Web ページをリーディングリストに追加する

Chrome ブラウザの場合は、こちら。
ページを後からオフラインで読む

これまでは、「縦書き・縦スクロール（段組）」のWeb文書を、ブラウザで表示することまではできていたのですが、印刷がうまくできませんでした。（これまでは、2ページ目以降がうまく印刷できませんでした。）

今回、正常な印刷が可能になったので、ご紹介します。（ネット上にはなかなか参考になるページがありませんでした。）

今回、Firefox でも、正常な（表示が崩れない） PDF ファイル化に成功しました！
また、Edge で作成した正常な（表示が崩れない） PDF ファイルでも文字列検索ができなかったのが、
今回、可能になる方法が見つかりました！

理屈はよくわかりませんが、以下の例を参考にすれば、みなさんも再現できると思います。

動作確認できた環境 【OS】 Windows 10 Home (20H2) 【ブラウザ】 Firefox 96.0.1 (64 ビット) Microsoft Edge 97.0.1072.62 (公式ビルド) (64 ビット)

2. うまくいった例

下記のHTMLファイル・CSSファイルの組み合わせで、「縦書き・縦スクロール（段組）」の「表示 ＋ 印刷」に成功しました！

さらに、「文字列検索が可能な PDF 」を作成する方法が見つかりました！

Firefox 、Edge ともに、PDFドライバーの種類によって、表示・検索ともに正常にできる場合もあれば、表示が崩れる場合や、表示が正常でも文字列検索がうまくできない場合もあることがわかりました。（最後の方に一覧表を掲載しています。）

次の２つのファイルを同じ場所に同じファイル名で保存すれば、
HTMLファイルをダブルクリックしてブラウザで表示させ、
さらに印刷コマンド（印刷プレビュー）で確認できます。
どちらも、文字コードは「UTF-8」で保存するようにしてください。

2.1. HTMLファイル

今回、背景色や、content 文字列（::before , ::after で指定した要素に対して、{content:～} によって追加表示する文字列）の表示・検索を検証するため、ファイルの内容を一部変更しました。

xxxtategaki.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"	content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="xxxtategaki.css"><!--CSSファイル名を変更しています-->
<title>XXX 縦書き・縦スクロール（段組）</title>
</head>
<body>
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>アイウエオ、カキクケコ、サシスセソ、タチツテト、ハヒフヘホ、マミムメモ、ヤユヨ、ラリルレロ、ワヲン
<p>ガギグゲゴ、ザジズゼゾ、ダヂヅデド、バビブベボ、パピプペポ
<p>１２３４５、６７８９０
<p>ＡＢＣＤＥ、ＦＧＨＩＪ、ＫＬＭＮＯ、ＰＱＲＳＴ、ＵＶＷＸＹ、Ｚ
</body>
</html>

2.2. CSSファイル

このCSSファイルは、必ず上のHTMLファイルと同じ場所に同じ名前（tategaki.css 　→ (変更)　xxxtategaki.css）で保存してください。

今回、背景色の表示・印刷や、content 文字列（::before , ::after で指定した要素に対して、{content:～} によって追加表示する文字列）の表示・検索をテストするため、ファイルの内容を一部変更しました。

xxxtategaki.css
html{
	font-size:14px;
	width:97%;   /* 段の幅 */
	height:40vh; /* 段の高さ */
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl; /* horizontal-tb */
	margin:1em 0;
	padding:1em;
	column-count:1; /* 段の数 */
	column-rule:solid 3px black; /* 区切り線のスタイル */
	line-height:1.5;
}
span.tate {
/*	text-orientation:upright; /* 文字の向き mixed upright sideways*/
/*	text-combine-upright:all; /* 縦中横 */
}
p{text-indent:1em}
p::before{content:"ＸＸＸ　";background-color:yellow} /* content文字列の追加・背景色の追加 */
@media print { /* 印刷の指定 */
	html {
		width:auto;  /* 段の幅 */
		height:auto; /* 段の高さ */
		column-count:4; /* 段の数 */
	}
}
@page {
    size: A4 portrait; /* A4 縦書き */
/*  size: A4 landscape; /* A4 横書き */
/*  margin: 15mm; /* 印刷マージン */
}

3. ブラウザ画面での表示・検索のテスト結果

文字列検索は、ブラウザ画面で「Ctrl + F」で行う検索機能をテストしました。

Firefox Edge
ブラウザ画面での表示 ○ ○
　　　　〃　　　検索（content文字列） ○ Ｘ
　　　　〃　　　検索（通常文字列） ○ ○

Firefox では、ブラウザ画面で content 文字列・通常文字列ともに検索可能でした。
Edge では、ブラウザ画面で content 文字列の検索はできませんでした。（通常文字列のみ可能。）

なお、ブラウザ画面で正常に表示されたからといって、必ずしも正常にプリンターで印刷できるとは限りません。（下記参照。）

4. プリンターでの印刷テスト

直接プリンターで印刷した場合のテスト結果です。

Firefox Edge
Ｘ ○

Edge では、通常のプリンターで正常に印刷できましたが、
Firefox では、文字がずれて重なってしまい、正常に印刷できませんでした。

5. PDF ドライバーを使って PDF 化した場合のテスト結果

満足できる PDF ドライバーは、Firefox , Edge ともに１つしか見つかりませんでした。
その PDF ドライバーで PDF ファイルを作成し、その PDF ファイルを通常のプリンターで印刷してみたところ、
Firefox , Edge ともに正常に印刷され、文字列も正常に検索できることを確認しました！
以下、PDF ドライバーごとに、テスト結果を表にしています。

5.1. PDF 保存　（満足できる PDF ドライバー）

Firefox（PDFに保存） Edge（PDFとして保存）
PDF 化前の印刷プレビューの表示 ○ ○
PDF の表示 ○ ○
検索（content文字列） ○ ○
検索（通常文字列） ○ ○

この PDF ドライバー（各ブラウザにデフォルトで付属しているようです。）で PDF ファイルを作成し、その PDF ファイルを開いて通常のプリンターで印刷した場合は、Firefox , Edge ともに正常に印刷できました。手間はかかりますが、この方法なら確実に「たて書き・段組」の正常な印刷ができそうです。

これ以外のドライバーを使って作成した PDF ファイルにはすべて、何らかの不具合がありました。
ただし、「PDF の表示」が正常にできた PDF ファイルであれば、正常に印刷することは可能と思われます。
なお、通常の「よこ書き・段組なし」の文書の場合は、不具合は見つかりません。

このドライバーを指定する方法を、最後の方に追加しています。
（6. 「 PDF 保存 」 印刷 （ドライバー） の指定）

5.2. Microsoft Print to PDF

Firefox Edge
PDF 化前の印刷プレビューの表示 ○ ○
PDF の表示 Ｘ ○
検索（content文字列） ― Ｘ
検索（通常文字列） ― Ｘ

参考までに、Firefox における、「Microsoft Print to PDF」ドライバーでの、「印刷プレビューの表示」と「作成された PDF」の画面イメージを貼り付けておきます。（以下の市販の PDF ドライバーでも同様の結果でした。）

5.2.1. 印刷プレビューの表示 （Firefox + Microsoft Print to PDF）

印刷プレビューでは正常に表示されるのですが......
FF_tate_Preview_MSPrint.jpg

5.2.2. 作成された PDF （Firefox + Microsoft Print to PDF）

印刷プレビューでは正常に表示されていたのに、PDF 化すると表示が崩れた例です。（Firefox のみ。以下、同様。）
FF_tate_pdf_MSPrint.jpg

5.3. JUST PDF4

Firefox Edge
PDF 化前の印刷プレビューの表示 ○ ○
PDF の表示 Ｘ ○
検索（content文字列） ― Ｘ
検索（通常文字列） ― Ｘ

5.4. Antenna House PDF Driver 8.0（「フォント埋め込み」設定）

Firefox Edge
PDF 化前の印刷プレビューの表示 ○ ○
PDF の表示 Ｘ ○
検索（content文字列） ― Ｘ
検索（通常文字列） ― Ｘ

6. 「 PDF 保存 」 印刷 （ドライバー） の指定

正常に機能（表示・検索）する PDF ファイルを作成するための、PDF ドライバーの指定方法です。この方法で作成した PDF ファイルは、印刷も文字列検索も正常にできることが期待できます。

6.1. Firefox での「 PDF 保存 」の指定

Firefox では、「印刷」コマンド（Ctrl + P）を実行後、プリンターに「PDF に保存」を指定します。
FF_print_pdf.jpg

なお、Firefox で背景色を印刷するには、「背景画像を印刷する」にチェックを入れておきます。
FF_print_bg.jpg

6.2. Edge での「 PDF 保存 」の指定

Edge では、「印刷」コマンド（Ctrl + P）を実行後、プリンターに「PDF として保存」を指定します。
Edge_print_pdf.jpg

Edge で背景色を印刷するには、「その他の設定」を開いてから「背景のグラフィックス」にチェックを入れておきます。
Edge_print_bg.jpg

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?