紙に印刷するためのCSSまとめ

 (voussoir.net)
26 ポイント 投稿者 GN⁺ 2024-03-04 | 2件のコメント | WhatsAppで共有
  • 会社でHTMLを使って、紙／Excelに手書きしていた帳票をWebベースのツールとして再作成・置き換える作業をしており、その内容を整理したもの
  • Webページが印刷されるときにどのように見えるかを制御するCSSの基本事項と、いくつかのヒントやコツを説明

@page

  • @page は、Webサイトの印刷設定をブラウザに伝えるCSSルール。
  • @page はDOMを含み、Webでは <html> 要素は画面の端によって制限されるが、印刷時には @page によって制限される。
  • @page の設定は、Ctrl+P を押したときにブラウザの印刷ダイアログで得られる設定とおおむね一致する。

@media print

  • 印刷時にのみ適用されるスタイルを書ける print メディアクエリがある。
  • 印刷物に表示されるべきでないヘッダー、オプション、ユーザー向けヘルプテキストなどに display:none を追加する。

幅、高さ、マージン、パディング

  • ボックスモデルの理解が必要で、@page に margin: 0 を設定する理由は、DOM要素で余白を処理するほうを好むため。
  • <html> が物理的な紙全体を占め、余白はDOMの内部にあると覚えておくほうが簡単。

要素の配置

  • 文書をデザインするときは、適切なHTML/CSSを使って要素を配置する。
  • 特定サイズのステッカー用紙に合う四角形を作ったり、特殊なラベル付き用紙にデータを印刷する必要がある場合には、絶対配置を使うこともできる。

複数ページの文書と繰り返し要素

  • 請求書のような表データを含む印刷ジェネレーターを書くとき、<table> が2ページ目にまたがるとブラウザは自動的に <thead> を各ページ上部に複製する。
  • JavaScriptを使ってテーブルを複数の小さなテーブルに分割し、ページを生成する。

縦向き／横向きモード

  • ユーザーが望めば @page ルールを上書きできる。
  • 縦向きと横向き用に別々の <style> 要素を生成し、JavaScriptを使って切り替えられる。

データソース

  • データをページに取り込む方法はいくつかあり、URLパラメータにすべてのデータを詰め込むことも、JavaScriptを使ってAPI経由でデータベースレコードを取得することもできる。
  • contenteditable を設定して、ユーザーが印刷前に小さな変更を加えられるようにする。

GN⁺の見解

  • この記事は、Web開発者に対して印刷用CSSの書き方に関する有用なガイドを提供している。特に、Webページを物理的な文書へ変換する作業に携わる開発者に役立つはず。
  • 印刷用CSSはしばしば見過ごされがちなテーマだが、多くの企業では今でも重要な書類を印刷する必要があるため、この知識には価値がある。
  • 記事で示された技術的アプローチは、実際の業務環境でテスト・検証されたものに見え、実務上の問題を解決するための実用的なソリューションを提供している。
  • CSS @page ルールと @media print クエリの利用は、Webページを印刷する際に紙のサイズや余白を制御するうえで重要であり、Web開発者が必ず知っておくべき内容だ。
  • この記事は、印刷用CSSの基本的な理解を超えて、実際にどのように適用されるのかという具体例やヒントを示すことで、理論と実践のギャップを埋める助けになる。

関連記事

2件のコメント

 
cosine20 2024-03-11

今度これでトイプロジェクトを一度やってみたいですね。
 
GN⁺ 2024-03-04
Hacker Newsの意見

  • 個人ウェブサイトで好まれる印刷スタイルについての説明:

    • セクション見出しがページ下部に印刷され、次のページの上部に見出しなしで本文だけが残らないようにする。
    • グラフィックや図表がページをまたがず、ページ全体に収まるように印刷する。
    • ハイパーリンクのURLも印刷し、リンクが単なる下線付きテキストとしてだけ残らないようにする。

  • Pagedjs.orgを使って本を組版した経験:

    • プレビューにはいくつかバグがあったが、最終出力は完璧で、InDesignを使うより時間を4分の1節約できた。
    • HTML/CSSとInDesignの両方に慣れているなら、長文レイアウトにはPagedjsのほうがよりよい選択肢である。

  • 印刷用CSSに対するブラウザーサポートの問題点:

    • CSSでページごとに脚注を入れるといった一部機能には同等の機能がない。
    • カスタムCSSプロパティを試し、こうしたギャップを埋められる簡単なHTMLレイアウトエンジンがあるかを質問。

  • CSSを使った印刷の容易さ:

    • どのアプリでもHTML+CSSを出力すれば、整った美しい印刷文書を簡単に用意できる。
    • PostScriptやTeXを学ぶより、CSSタイポグラフィを数分で書くほうが簡単である。

  • 印刷向けのブラウザーサポートがあまりにも悪く、ネイティブアプリを作らなければならない状況:

    • 現在はPDFをダウンロードして印刷しなければならない。
    • Chrome/Blink、Safari/Webkit、Firefox/Mozillaの開発者に、少なくともハックが動作するようにしてほしいと要望。

  • CSSの歴史と現状についての考察:

    • CSSは当初、印刷メディアを念頭に始まったが、ブラウザーサポートは立ち遅れている。

  • HTML & CSSを使って請求書や一部の電子書籍を作る方法:

    • print-css.rocksとWeasyprintを活用する方法を紹介。

  • ブラウザー経由でPDFを生成するために使った paper-css への言及。

  • HTML/CSSを使った印刷物制作の利点:

    • 印刷物制作に必要なすべてのものをHTML/CSSでまかなっている。

  • CSSスキルを活用してソーシャルネットワークのプロフィールを印刷形式で提供した経験:

    • 工場労働者向けのソーシャルネットワークで、プロフィールを印刷できるようにした。
    • ワークショップやコースの認定証を作るオンラインエディターを作った経験も共有。