印刷

業務ページは印刷されます: 配送員に渡す注文詳細、会議に持ち込む検索結果、監査ファイルに綴じるチケット。hc.print.css はオプトインのスタイルシートで、ページごとの作業なしに既定の印刷出力をまともにします。

<link rel="stylesheet" href="https://unpkg.com/@hypermedia-components/core/dist/hc.print.css">

またはバンドルで:

@import '@hypermedia-components/core/css/print';

すべては最後のカスケードレイヤー内の @media print に住んでいます — 画面上では何も変わらず、紙の上ではレイヤー順だけでコンポーネントのスタイルに勝ちます。

ドクトリン

紙にはアプリではなくレコードを。 操作用のクロームは隠れます: シェルのナビゲーションとヘッダー、ツールバー、メニューバー、ボタンとボタングループ、ページネーション、トースト、ドロワー、ツールチップ、ホバーカード、コマンドパレット、スケルトン、スピナー、htmx インジケーター、閉じたダイアログ。
データはそのまま生き延びます。 スクロール領域はクリップを外し、datagrid の固定ヘッダーは static になり、切り詰められたセルは省略記号をやめて折り返し、<thead> はページをまたいで繰り返され、行・カード・フィールド・アラート・アコーディオン項目・タイムライン項目は改ページで分割されません。
インクは正直に。 影は消え、アクティブな data-theme にかかわらずページはライトで印刷され、テーブルは黒の細罫線になり、ステータスを担う容器(カード、アラート、バッジ、チップ)はグレースケールでも意味が残るよう細い枠線を保ちます。

意図的にしないこと

状態属性は権威のままです: [hidden] の内容、閉じた <details>、閉じたダイアログ、非アクティブなタブパネルは印刷されません — 印刷は「ユーザーが見ていたもの」を写します。紙が画面以上を必要とするなら、サーバー側で専用の印刷ビューをレンダリングしてください。
リンクの URL 展開はしません — 業務文書はインラインの href がない方が読みやすいためです。
ページのヘッダー/フッターは付けません — それらは @page のマージンボックスとアプリ自身の印刷ビューの仕事です。

印刷を起動する

Ctrl/Cmd+P は常に効きますが、注文詳細には目に見える Print ボタンが欲しいものです。HTML に宣言的な印刷はなく、onclick="window.print()" はインラインスクリプト — 厳格な Content-Security-Policy の下では死にます。ボタンに data-hc-print を付けると、installPrint() が代わりに window.print() を呼びます:

<button class="hc-button" type="button" data-hc-print>
  <span class="hc-icon" aria-hidden="true">⎙</span> Print
</button>

ボタン自体は紙には出ません。このスタイルシートが印刷時に .hc-button を隠すからです。JavaScript なしではボタンは何もせず、キーボードショートカットが残ります — それが正直な劣化です。対象はページ全体のみ: 画面と違う形で印刷すべきページは、クライアント側の抜粋ではなくサーバが描画する印刷ビューです(上記参照)。

印刷

ドクトリン

意図的にしないこと

印刷を起動する

関連