css - 印刷に適したウェブページをデザインするには？

Question

Web ページを A4 サイズの用紙に印刷するのに適したサイズは? 他に考慮すべきことは何ですか？

*この場合、インライン CSS が推奨されます

明確化:この Web ページの唯一の提案は、領収書であるため、印刷することです。

明確化 # 2:この Web ページは、私が勤務している会社の内部使用のためのものです。彼らは、プロがデザインした領収書に見えることを望んでいます。

明確化 # 3:この Web ページは、A4 サイズの 1 ページのみに印刷する必要があります。

Answer 1

答え

2 つの異なるスタイル シートを使用することをお勧めします。

ブラウザで表示する場合、表の幅を A4 用紙の幅 (21cm) に設定できます。(マイナス余白18cm)

印刷の場合、テーブルのサイズは「100%」である必要があります。これは、ブラウザの設定で指定された余白を使用して、プリンタがページの幅全体を埋めることを意味します。(これらのページの余白が原因で、印刷物をまったく同じに見せることができなくなります。)

おそらく働いている

ページの余白に収まるように、テーブルを十分に狭くしてください。次に、そのテーブルを垂直方向に中央揃えにします。

完璧なレイアウトのためのソリューション

HTML と CSS でそれを実現する方法はありません。正確なレイアウトを許可するように設計されていないだけです!

PDF をオンラインで作成し、ユーザーがダウンロードできるようにします。とにかく、ほとんどのブラウザーは PDF をレンダリングできます。

Answer 2

他の人が言ったように、印刷CSSを使用する必要がありますが、1つ覚えておいてください。

display:none; //is your friend!

これを使用して、ナビゲーションなどの要素が印刷されないようにすることができます。

ちなみに、A List Apartには、印刷スタイルシートに関するこのすばらしい記事があります。ぜひチェックしてください。