Q&A
transform: scale()を用いる理由や意図などはありますか？
もし、scaleが原因なのであれば、それを避ける実装で逃げる、ということも出来ると思いますが。
cssでtransformを利用して表示を縮小した場合、印刷すると、途中のtdの高さが大きくなってしまいます。
これを統一した高さに設定したいのですが、どのようにcssを調整すれば良いでしょうか？
ご教示いただければと存じます。
Chromeの開発ツールでRenderingを利用してprint表示にしても、ブラウザ上では均等の高さです。
ですが、実際に印刷する(PDF保存)と、私の手元の環境では「テスト26」の行が高さが高くなっております。
使用ブラウザ : Chrome バージョン: 98.0.4758.80（Official Build） （arm64）
html
1<?php 2 3 4?> 5<!DOCTYPE html> 6<html> 7<head> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 9 <meta http-equiv="Content-Style-Type" content="text/css"> 10 <title>サンプル</title> 11 <style> 12 table { 13 border-collapse: collapse; 14 } 15 table tr td { 16 border: 1px solid #000; 17 height: 23px!important; 18 border : 1px #000 solid; 19 padding : 1px 1em 1px 1em; 20 } 21 22 @media print { 23 body { 24 width: 297mm; 25 height: 210mm; 26 margin : 0 auto; 27 padding : 20mm; 28 /* transform: scale(0.61); 削除*/ 29 /* transform-origin: 0 0; 削除*/ 30 } 31 @page { 32 size: A4 landscape; 33 margin: 0 auto; 34 } 35 36 /*wrap追加*/ 37 div.wrap { 38 transform: scale(0.61); 39 transform-origin: 0 0; 40 } 41 42 } 43 </style> 44</head> 45<body> 46 <div class="wrap"><!-- wrap追加 --> 47 <table> 48 <tbody> 49 <?php for($i=0;$i<50;$i++): ?> 50 <tr> 51 <td>テスト<?=$i?></td> 52 <td>サンプル</td> 53 <td>サンプル</td> 54 <td>サンプル</td> 55 <td>サンプル</td> 56 </tr> 57 <?php endfor; ?> 58 </tbody> 59 </table> 60 </div> 61</body> 62</html> 63
追加
PlugOut777様のご教示を受け、
div.wrapをbodyとtableの間に追加し、テーブルの行数を30行から50行に追加したところ、
32行目で同じような現象が発生しました。
Eskee様、書き込みありがとうございます。
かなり大きなテーブルを１ページ(A4横)で印刷させる必要がありまして、そのためにはtransform: scale()を利用して縮小印刷を行う必要があると考えております。
(Chromeだと10px以下に文字フォントを設定できないため、transformを利用する以外に１ページに収める方法が思いつかなかった次第です。)
なるほど。要件としては、A4横（スクショ画像は縦ですが…）に納めないといけないのですね。
それであれば、プリンタドライバ側の印刷設定で縮小するのが一番確実だと思いましたが、それではダメでしょうか？
ユーザー側での縮小印刷ではなく、ブラウザ側というかシステム側というか、こちら側で実現することが求められております。
(画像が大きくなるので、スクショはカットしたので違和感あるかと思いますが、実際はもう少し行数の多いテーブルをA4横 １ページで全体を印刷できる必要があることが要件となっております。)
body自体にtransform:scale()を設定するのはおすすめしません。
（今回のような表示崩れの原因になります）
こちらの環境で試してみたところ、transform:scale()と@pageのsizeに設定されたlandscapeが噛み合わずに表示崩れを起こしている様に見えました。
bodyタグとtableタグの間にdivタグなどでwrapperを用意し、そこに対してtransform:scale()を設定するとお望みのことが実現できるかと思いますがどうでしょう？
こちらでも、PlugOut777さんのご指摘内容で解決できたことを確認しました。
PlugOut777様、Eskee様、ありがとうございます。
質問内容を修正(追記)させていただいたのですが、５０行に増やすと同様の現象(32行目)が発生しました。
Eskee様は解決できたとおっしゃられているので、私がPlugOut777様のご指摘内容を組み込めていないのかもしれません。。。
すみません、入れ違いで申し訳ないのですが、
確かに50行目まで増やすと、追加で貼っていただいたスクリーンショットと同様になりました。
Eskee様、再度のご確認ありがとうございます。
Chrome以外のブラウザではどうでしょうか？
Firefox(Windows 10)で確認したところ、そもそもテーブルの罫線が表示されませんでした。
Eskee様、ありがとうございます。
今回記載が漏れておりましたが、Chrome環境指定でございまして、そもそもChromeでは実現不可能なものなのかもしれません。。。
念の為、safariと firefox (OS : Mac Monterey) で確認いたしましたが、当該問題は発生しておらず、問題なく同じ高さのtdで印刷できました。(罫線の表示もされておりました。)
Chromeエミュレーションでは問題なく、実際のPDF出力時点で差異が出るってのがクセモノですね。
こういう状況証拠が揃うと、ChromeのPDF出力機能自体のバグじゃないかという気がします。
Chrome縛りの要件であれば、バックエンドかフロントエンドでPDF出力して、それを印刷させる、という機能を考えてみてもいいかもしれません（工数は増えますが）
とりあえず、手ごろなのはフロントエンドでjsPDFとhtml2canvasというライブラリを組み合わせるのが試すのにもゴールが近くて良いんじゃないでしょうか。
https://proglearn.com/2020/11/13/%E3%80%90%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%82%E3%82%8A%E3%80%91jspdf%E3%81%A8html2canvas%E3%82%92%E4%BD%B5%E7%94%A8%E3%81%97%E3%81%A6-html%E7%94%BB%E9%9D%A2%E3%82%92pdf%E5%8C%96%E3%81%97/
Eskee様、ご連絡ありがとうございました。
今回PlugOut777様のご提案の内容が、他のライブラリも使用せずcssだけで完結できるシンプルなご提案を頂戴しましたので、こちらをベストアンサーにさせていただきました。
Eskee様にも非常に多方面な角度からご指摘・ご教示いただき、深く感謝申し上げたく存じます。
ありがとうございました！
回答2件
0
ベストアンサー
問題の空白は改ページによって発生するものです。
原因はtranform:scale()の実行タイミングで、印刷用のレイアウトが確定した後に変形が実行されています。
（テーブルの文字がページで分割されないように余白が確定した後、縮小処理が行われている様です）
僕の方で調べましたが、CSSのtransformの仕様の中には詳しい回避方法は見つけられませんでした。
そこであくまで正攻法ではないことを元に、以下のコードを書いて回避してみました。
そのことを認識して、参考にしていただければ幸いです。
PHP
1<?php 2 3 4?> 5<!DOCTYPE html> 6<html> 7<head> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 9 <meta http-equiv="Content-Style-Type" content="text/css"> 10 <title>サンプル</title> 11 <style> 12 table { 13 border-collapse: collapse; 14 } 15 table tr td { 16 border: 1px solid #000; 17 height: 23px!important; 18 border : 1px #000 solid; 19 padding : 1px 1em 1px 1em; 20 } 21 22 @media print { 23 body { 24 width: 297mm; 25 height: 210mm; 26 margin : 0 auto; 27 padding : 20mm; 28 } 29 @page { 30 size: A4 landscape; 31 margin: 0 auto; 32 } 33 34 div.wrap { 35 /* transform: scale(0.61); ← 削除 */ 36 /* transform-origin: 0 0; ← 削除 */ 37 position: relative; /* ← 追加 */ 38 width: 100%; /* ← 追加 */ 39 height: 100%; /* ← 追加 */ 40 margin: 0px; /* ← 追加 */ 41 padding: 0px; /* ← 追加 */ 42 } 43 44 /** table追加 **/ 45 table { 46 --evacuation-top: -100000mm; /** とても小さな値を入れる **/ 47 position: absolute; 48 top: var(--evacuation-top); 49 transform: translateY(calc(var(--evacuation-top) * -1)) scale(0.61); 50 transform-origin: 0 0; 51 } 52 } 53 </style> 54</head> 55<body> 56 <div class="wrap"><!-- wrap追加 --> 57 <table> 58 <tbody> 59 <?php for($i=0;$i<50;$i++): ?> 60 <tr> 61 <td>テスト<?=$i?></td> 62 <td>サンプル</td> 63 <td>サンプル</td> 64 <td>サンプル</td> 65 <td>サンプル</td> 66 </tr> 67 <?php endfor; ?> 68 </tbody> 69 </table> 70 </div> 71</body> 72</html>
軽く解説しますがtransform系のプロパティが適応されるのはレイアウトが確定した後なので、レイアウトが確定するまでの間だけtableを上部の画面外へ退避させます。
（レイアウト確定中、上部の画面外はページング考慮の対象外の様です）
そしてtransformが適応されるタイミングでtransform:translateYを用いて、元の座標へ戻し縮小させます。
この時tableを囲っているposition:relativeなdivタグには、親であるbodyのwidthとheightを指定しているため、領域が潰れることはありません。
以下、結果として表示された印刷プレビューを添付します。
投稿2022/02/14 09:33
総合スコア917
PlugOut777様、ご回答ありがとうございました。
領域外で縮小させた後に、また領域内に戻すという素晴らしい手法のご回答ありがとうございます！
私では全く思いつかない方法でした。google先生も教えてくれませんでしたので、半ば諦めておりました。
ありがとうございました！
0
私のほうで確認したソースコードは以下になります。参考になれば幸いですが…
HTML
1<html> 2 <body> 3 <div class="sheet"> 4 <table> 5 <tbody> 6 <tr> 7 <td>テスト0</td> 8 <td>サンプル</td> 9 <td>サンプル</td> 10 <td>サンプル</td> 11 <td>サンプル</td> 12 </tr> 13 <tr> 14 <td>テスト1</td> 15 <td>サンプル</td> 16 <td>サンプル</td> 17 <td>サンプル</td> 18 <td>サンプル</td> 19 </tr> 20 <tr> 21 <td>テスト2</td> 22 <td>サンプル</td> 23 <td>サンプル</td> 24 <td>サンプル</td> 25 <td>サンプル</td> 26 </tr> 27 <tr> 28 <td>テスト3</td> 29 <td>サンプル</td> 30 <td>サンプル</td> 31 <td>サンプル</td> 32 <td>サンプル</td> 33 </tr> 34 <tr> 35 <td>テスト4</td> 36 <td>サンプル</td> 37 <td>サンプル</td> 38 <td>サンプル</td> 39 <td>サンプル</td> 40 </tr> 41 <tr> 42 <td>テスト5</td> 43 <td>サンプル</td> 44 <td>サンプル</td> 45 <td>サンプル</td> 46 <td>サンプル</td> 47 </tr> 48 <tr> 49 <td>テスト6</td> 50 <td>サンプル</td> 51 <td>サンプル</td> 52 <td>サンプル</td> 53 <td>サンプル</td> 54 </tr> 55 <tr> 56 <td>テスト7</td> 57 <td>サンプル</td> 58 <td>サンプル</td> 59 <td>サンプル</td> 60 <td>サンプル</td> 61 </tr> 62 <tr> 63 <td>テスト8</td> 64 <td>サンプル</td> 65 <td>サンプル</td> 66 <td>サンプル</td> 67 <td>サンプル</td> 68 </tr> 69 <tr> 70 <td>テスト9</td> 71 <td>サンプル</td> 72 <td>サンプル</td> 73 <td>サンプル</td> 74 <td>サンプル</td> 75 </tr> 76 <tr> 77 <td>テスト10</td> 78 <td>サンプル</td> 79 <td>サンプル</td> 80 <td>サンプル</td> 81 <td>サンプル</td> 82 </tr> 83 <tr> 84 <td>テスト11</td> 85 <td>サンプル</td> 86 <td>サンプル</td> 87 <td>サンプル</td> 88 <td>サンプル</td> 89 </tr> 90 <tr> 91 <td>テスト12</td> 92 <td>サンプル</td> 93 <td>サンプル</td> 94 <td>サンプル</td> 95 <td>サンプル</td> 96 </tr> 97 <tr> 98 <td>テスト13</td> 99 <td>サンプル</td> 100 <td>サンプル</td> 101 <td>サンプル</td> 102 <td>サンプル</td> 103 </tr> 104 <tr> 105 <td>テスト14</td> 106 <td>サンプル</td> 107 <td>サンプル</td> 108 <td>サンプル</td> 109 <td>サンプル</td> 110 </tr> 111 <tr> 112 <td>テスト15</td> 113 <td>サンプル</td> 114 <td>サンプル</td> 115 <td>サンプル</td> 116 <td>サンプル</td> 117 </tr> 118 <tr> 119 <td>テスト16</td> 120 <td>サンプル</td> 121 <td>サンプル</td> 122 <td>サンプル</td> 123 <td>サンプル</td> 124 </tr> 125 <tr> 126 <td>テスト17</td> 127 <td>サンプル</td> 128 <td>サンプル</td> 129 <td>サンプル</td> 130 <td>サンプル</td> 131 </tr> 132 <tr> 133 <td>テスト18</td> 134 <td>サンプル</td> 135 <td>サンプル</td> 136 <td>サンプル</td> 137 <td>サンプル</td> 138 </tr> 139 <tr> 140 <td>テスト19</td> 141 <td>サンプル</td> 142 <td>サンプル</td> 143 <td>サンプル</td> 144 <td>サンプル</td> 145 </tr> 146 <tr> 147 <td>テスト20</td> 148 <td>サンプル</td> 149 <td>サンプル</td> 150 <td>サンプル</td> 151 <td>サンプル</td> 152 </tr> 153 <tr> 154 <td>テスト21</td> 155 <td>サンプル</td> 156 <td>サンプル</td> 157 <td>サンプル</td> 158 <td>サンプル</td> 159 </tr> 160 <tr> 161 <td>テスト22</td> 162 <td>サンプル</td> 163 <td>サンプル</td> 164 <td>サンプル</td> 165 <td>サンプル</td> 166 </tr> 167 <tr> 168 <td>テスト23</td> 169 <td>サンプル</td> 170 <td>サンプル</td> 171 <td>サンプル</td> 172 <td>サンプル</td> 173 </tr> 174 <tr> 175 <td>テスト24</td> 176 <td>サンプル</td> 177 <td>サンプル</td> 178 <td>サンプル</td> 179 <td>サンプル</td> 180 </tr> 181 <tr> 182 <td>テスト25</td> 183 <td>サンプル</td> 184 <td>サンプル</td> 185 <td>サンプル</td> 186 <td>サンプル</td> 187 </tr> 188 <tr> 189 <td>テスト26</td> 190 <td>サンプル</td> 191 <td>サンプル</td> 192 <td>サンプル</td> 193 <td>サンプル</td> 194 </tr> 195 <tr> 196 <td>テスト27</td> 197 <td>サンプル</td> 198 <td>サンプル</td> 199 <td>サンプル</td> 200 <td>サンプル</td> 201 </tr> 202 <tr> 203 <td>テスト28</td> 204 <td>サンプル</td> 205 <td>サンプル</td> 206 <td>サンプル</td> 207 <td>サンプル</td> 208 </tr> 209 <tr> 210 <td>テスト29</td> 211 <td>サンプル</td> 212 <td>サンプル</td> 213 <td>サンプル</td> 214 <td>サンプル</td> 215 </tr> 216 </tbody> 217 </table> 218 </div> 219 </body> 220</html>
CSS
1table { 2 border-collapse: collapse; 3} 4 5table tr td { 6 border: 1px solid #000; 7 height: 23px!important; 8 border : 1px #000 solid; 9 padding : 1px 1em 1px 1em; 10} 11 12@media print { 13 body { 14 width: 297mm; 15 height: 210mm; 16 margin : 0 auto; 17 padding : 20mm; 18 19 } 20 table { 21 break-inside: avoid; 22 page-break-inside: avoid; 23 } 24 .sheet { 25 transform: scale(0.61); 26 transform-origin: 0 0; 27 } 28 @page { 29 size: A4 landscape; 30 margin: 0 auto; 31 } 32 33}
投稿2022/02/14 07:22
総合スコア268
あなたの回答
tips
プレビュー
