印刷する HTML ページのセットを設計しており、ページの要素が互いに同じスケールになるようにしたいと考えています。たとえば、幅が 200 ピクセルとして定義されている div クラスが、複数のページのそれぞれに表示されます。各ページを印刷したときに、正確に同じサイズで表示されるようにしたいと考えています (たとえば、切り取って重ね合わせるのに適しています)。
私はChromeで最もよく機能するいくつかの機能（主に、他の要素を小さくコピーするためのCSSズームルール）を使用しているので、理想的にはChromeを使い続けたいと思っています。（これはFirefoxの方が簡単です。印刷ダイアログに明確なスケール比があるからです。）しかし、Chromeでは、印刷時に同じ要素を一定のサイズに保つ異なるページから検索するのは決して簡単ではありません。
Chrome の PDF 生成 (Chrome からの印刷は内部的にこれを行います) では、ページの幅を定義するセクションをいくつか選択し、それに基づいてページの残りの部分を拡大縮小しているようです。または、1 ページに「最適な」数の要素が収まるようにページ サイズを設定しようとしているのかもしれません。各ページの外側のフレーム要素がすべてのケースで同じサイズではない場合、画面サイズが 200 ピクセルの要素は、3 ～ 4 cm から 1.5 ～ 2 cm、あるいはそれより小さくなる可能性があるようです。
使用するだけでは@page size役に立ちません。この CSS がありますが、何の違いもありません。
@media print {
@ page size: 297mm 210mm
}
一貫したサイズで印刷する方法について何かアイデアをお持ちの方はいらっしゃいますか?
私が適用できる極端な回避策の 1 つは、すべてを 1 つの大きな HTML ページの一部にして、Javascript を使用して特定の部分のみを印刷対象としてマークすることです... それが機能するかどうかはわかりませんし、いくつかの異なるページにまとめた方がすっきりします。 他に何かアイデアはありますか?
ベストアンサー1
解決策を見つけました。鍵となるのは、各ドキュメントで、Chrome が印刷用に要素を分割する「論理ページ」が同じサイズであることを確認することです。たとえば、あるドキュメントに 200 x 200 ピクセルの正方形がたくさんあり、Chrome が横向きに印刷するためにそれらを 5 x 4 の長方形にグループ化することにした場合、Chrome が他のすべての一貫したドキュメントを 1000 x 800 ピクセルのサイズの要素に分割して印刷するようにする必要があります。
単に span またはインライン ブロック div が連続しているだけのドキュメントの場合は、div を選択した幅 (1100 ピクセル) に設定し、その div が印刷プレビューでページ幅全体を占めるようにするだけで十分です。次に、CSS に次のような内容が含まれていることを確認します。
@media print {
@page {
size: 297mm 210mm; /* landscape */
/* you can also specify margins here: */
margin: 25mm;
margin-right: 45mm; /* for compatibility with both A4 and Letter */
}
}
これで十分でない場合は、すべてを固定サイズの div ( width: 1100px; height: 800px; overflow: hidden;) 内に配置することで、Chrome を強制的に必要なページに分割することができます (そのため、印刷時に要素のサイズは同じままになります)。