[翻訳]ウェブを印刷する

原文はPrinting the webです。

[翻訳者注] pageという単語を翻訳するために子を食べた。そもそも “ページ”と翻訳することに統一した場合は、何の関係なかったのに、紙に印刷されたことを意味するpageに向かって翻訳することにしたために発生したことである。問題とまでした分からない。 Webページを意味するpageは、そのあえて前だ “ウェブ”という単語を付けて “ウェブページ”と書いた。最後に、 “印刷範囲”と翻訳するのが自然であろ時において単に “印刷範囲”と翻訳したこともある。

次に悩みが聞いたのは “CSS Paged Media Specification”という言葉だった。これは正式に訳語があるかも分かりませんが、ここで “ページがな媒体CSSの仕様”と翻訳した。 “Paged Media Specification”は、やはり “ページがある媒体の仕様”と翻訳した。

、スマートフォンやタブレットにほぼすべてのコンテンツを消費することが可能となり、多くのWeb開発者は、ペーパーレスオフィスの夢がなされているように見える。

しかし、ウェブはデジタルに慣れている世代だけではない。まだ紙のウェブを出力してみることを好む人がいます。この点を知っているとき、管理するサイトに印刷専用のスタイルシートを含んでいたいと思うのだ。この記事は、最高品質のWebページ出力のためのアドバイスを盛り込んでいる。

通知:この記事は、ドイツのScreen Guide Magazine15号に初めて掲載された。 (2012年9〜12月号、77〜79頁)。この記事は、より多くのコンテンツと進展した研究結果を含んでいる。

印刷用スタイルシートの基本的な内容は、すでに多くのWeb開発者が知っている。印刷用CSSを含むのは二つの方法がある。

• 印刷媒体の内容が含まれている分離されたファイルをHTMLに埋め込む方法
  <link rel="stylesheet" media="print" href="css/print.css">
• 印刷モードを対象とする特定のメディアクエリを通常のスタイルシートに統合する方法。
  @media print {...}

いくつかの方法を使用するかは非常に明確である。我々は、追加のスタイルシートのためにサーバーに別の要求を送信しません。そのため、私たちはメディアクエリを使用してスタイルを含めることだ。 LESSやSassのようなプリプロセッサ(preprocessor)とビルドシステムのおかげで、ファイルを分割していた発行時点のファイルを簡単に結合することができる。

ガラクタを削除する

一般的に、印刷用スタイルシートでWebページの主な内容に焦点を合わせることは非常に重要である。 display: none;を利用してナビゲーションやフッターなどの不必要なWebページの要素を削除しましょう​​。しかし、出版社のウェブサイトのアイデンティティを示すインジケータのロゴを削除したくはないだろう。 (モノクロ出力でより良い単色のロゴを持っているかもしれません。これを背景画像に含めることができます。ユーザーが設定で上書きされるかもしれないがね。)

読みやすさのフォントと、十分な文字の大きさを考えなければならない。印刷物では、通常の本文を12pxより大きくない。しかし、モニターでは、16pxが全く不思議ではない。さらに、明るい背景に暗い文字色で出力することは重要である。 おそらく基本的な文字の色を黒に使用するのが最もよいでしょうである。

黒で出力することは別の色で出力するよりも経済的でもある。

疑いになるならば、文字に効果をあげて、Webページを出力してみてください。 ¹

内容を改善する

Webページの内容により良いものを追加するいくつかのテクニックがあります。そのうちの一つはリンクの直後にURLを追加することである。 Webページ内のブックマークや、Javaスクリプトハンドラには、そのようにはならない。情報提供の内容ではないからである。

a[href]: after {
    content: "(" attr(href) ")";
}

a[href^="#"]: after, 
a[href^="javascript"]: after {
    content: "";
}

abbr(abbreviations、略語)の要素も title属性を利用してそのようにすると便利である。 (技術的には同じルールが acronymにも適用される。 – Adrian Roselli が貢献してくれた。)

abbr[title]: after {
    content: "(" attr(title) ")";
}

この技術について詳細を説明している文もある。

変更: Timこのコメントに知らせられた。リンクが長くてレイアウトを破る場合には、 word-wrap: break -word;を使用することが必要になるだろうね。

お使いのブラウザは通常、ヘッダーとフッターの出力WebページのURLや日付などの情報を示し与えることを忘れないでください。おそらくこの表示を削除するためのオプションがあるのだ。だからリンクやブレッドクラム[ホーム>はじめ同様に、現在のWebページの場所を表示してくれるもの - 翻訳者]を出力して、ユーザーが必要に応じて、Webに簡単に戻ることができようにしてくれと思うかもしれない。 Adrian Roselliが追加でこの方法を説明する。

ほとんどのスタイルシートは、この程度を考慮して終わる。しかし、特定の場合に便利さを加えることができるヘルパー(helper)とCSSルールがある。

数週間前にスマッシングマガジンに面白い文が載せられた。この記事は、リンクや画像などを扱うより便利なヒントがある。必要であれば見てください。

印刷領域を構造化する

もっと深く入ってみよう。

@page at-law [@で始まる規則をいう。 @chasetのようなもの - 翻訳者]は、印刷領域の構造を指定する。これは余白を設定する例である。

@page {
    margin: 2cm 1.5cm;
}

また、仮想クラス[pseudo-classes、 :beforeのようにセレクタの末尾に :をつけて使うセレクタ - 翻訳者]を指定することが可能である。例えば、 :firstを使用すると、文書の1ページを対象にすることができ、:leftと ‘:right’は偶数、奇数の方を対象とする(これは、言語固有の文章の方向に依存します)。例えば、原稿や雑誌を出力するときに役立つだろう。

属性の名前を決めて、それぞれの要素に適用することも可能である。 [次の例は、tablesという名前の@page属性を定め、table要素でそれを指定したのだ。]

@page tables {
    size: landscape;
}

table {
    page: tables;
}

以下は、より実験的なものです。安定的に使用することはないだろう。このテストケースを確認してみてください。詳細については、スペックを参照してください。

@pageのルールについての詳細を知りたい場合はMozillaの開発者ネットワークを見てください。

sizeを使用して、出力する文書の用紙サイズを指定することができる。初期値である ‘auto’は210 x 297mmのDIN [ドイツ工業規格 - 翻訳者]A4用紙を意味する。これにより、紙のサイズをDIN A5に指定することができる。

@page {
    size: 148mm 210mm;
}

基本的な紙のサイズを制御することができるが、プリンタがデフォルトの用紙サイズを制御する必要があります。例えば、特に米国ではA4サイズの用紙を使用していないからである。

注意: CSSで紙を·切る·のはまだ不可能であることを分かってほしい。そのため、これは予想サイズであるだけだ。ファック。 3Dプリンタは、私たちを救うことだ。 ²

改

page-break-beforeとpage-break-afterのプロパティは、いつ側を分割するか、共有しないかを指定します。例えば、ヘッドラインの後ろからの方が分かれ基を望まないだろう。

h2 {
    page-break-after: avoid.
}

page-break-beforeとpage-break-afterに入れることができる値は次のとおりである。

• auto – デフォルト。何も起こらない。
• always – 側を共有する。
• avoid – 側を破壊しないようにする。
• left/right – 一方、あるいは両方の側を共有する。左側または右側の要素を開始させるためだ。パンフレットや資料を印刷する場合に役立つだろう。

さらに、 page-break-inside属性もある。この属性は、上記のプロパティと似ていますが autoとavoidのみを指定することができます。 avoidを指定すると、要素の中のほうを共有しない。 autoだけ置いておくのだ。

実験的な属性

次の機能はまだ開発中であるかのブラウザでのみサポートされるものである。ここで紹介するもののいくつかはのほうがな媒体CSSの仕様の一部である。この仕様は、新しく出てきたのだ。

見えるように出力する

-webkit-print-color-adjust: exact;属性は、WebKitのブラウザ(つまり、ChromeとSafari)でのみ動作します。この属性は、スクリーンで見られることを完全にそのまま印刷できるようにしてくれる。ほとんどの場合、これはCSSレイアウトの背景を印刷することができるということを意味する。しかし、注意してください。グラデーションのバグがある。グラデーションはまったく印刷されない。そして、このプロパティは ‘body’に指定することができない(イング？？？？:/)。 [このインク？は著者のものである。 - 翻訳者]

あらかじめ描かれた白と黒の最適化ロゴをマークアップに含まれていないのに出力するときに、この属性が必要である。 ³

Firefoxのような他のブラウザでは、背景画像との色を印刷するかしないかの印刷ダイアログボックスのオプションから選択できるようにする。

寡婦(widows)とゴア(orphans)

一方の側の行だけ出てくるのを防ぐための最小行数とになるか決めるのが orphans属性である。例えば、最後に少なくとも3行は出なければならこう書く。 p {orphans: 3;} [orphanは孤児を意味する。段落は、次のページに進み行った文が、次の方すぐに終わって次側の一番上の行だけが出力されること。下の画像参照。画像は、翻訳者が入れたもの。もちろんCSSは、段落レベルでwidowとorphanを防止するようなことはなく、一方のユニットに防止するようだ。 - 翻訳者]

一方 – 新しい方を起動すると、単一行の場合 – widowsが役立つだろう。 article {widows: 2;}このように記述すると段落を次の方にまたがる場合は、少なくとも2行のように越えていくことになるだろう。

Crop Marks And Page Bleed

時々一枚の紙を切るの特定方法を宣言する必要がない時がある。 ⁴ marksを使用すると、可能である。可能な値は cropと crossだ。 cropは、マークを切り、 crossは、基準マークを追加します。 ⁵

[これは何は言ってない。 - 翻訳者] If this property is set you can specify how far the printable area spreads out of the area defined by the aforementioned marks by using the property bleed while using one of the units defined in the values​​ and units specification。

このプロパティは、ブラウザベンダーが実際に基本的に考慮している[のほうがな媒体モジュールのためにCSSが生成されたコンテンツ](http://www.w3.org/TR/css3-gcpm/#page-marks-and- bleed-area)の一部である。 ⁶

のほうが分かれる地点にあるボックス

box-decoration-breakプロパティは、ページが分割されるときに背景、余白、線をどのように処理するかを定める。可能な値は二つある。 (画像を参照してください。)

• slice – デフォルト値は、流れながらボックスを二つの部分に “slice”する[切る]。
• clone – スタイルを重複して各側のボックスに適用する。

これは、現在のオペラのプレストエンジンがサポートしており、すぐにクロムもサポートします。Lennart Schoorsがしばらく前に自分のブログのBricssに[このプロパティに書いた。](http://bricss.net/post/24672339016/box- decoration-break-finally-coming-to-more-browsers)

Firefoxのの -moz-background-inline-policyプロパティは、背景画像を好きなように扱えるようにする。しかし、これは明らかに box-decoration-breakの部分的な実装です。

ブラウザのサポートについての詳細を言う

at-定のルール@page ‘を、Internet Explorer 7を除くすべての主要なブラウザがサポートして、Firefoxのほんの数ヶ月前に実装したが、他のほとんどの属性は、はるかに複雑である。

• page-break-beforeと’ page-break-after ‘は、alwaysのみを使用する。他の値はサポートされない場合が多いからである。
• page-break-insideは、Internet Explorer 7をサポートしていない。

実験的な属性は、ほとんどのブラウザがサポートしていない、単一の主要なエンジンが実装したという点を知るべきである。例えば、 orphansと’ widows ‘は唯一の、Internet Explorer 8以上のオペラのみをサポートします。 WebKitのエンジンに乗り換えて歴史の中に消えるオペラだ。 [プレストエンジン時代のオペラのみをサポートするという意味で言っているようだ。 - 翻訳者] marksとbleedはまだブラウザも実装していなかった。

落ちたのは？

印刷用のスタイルを作成するときに欠点がある。これまでも、ヘッダーとフッターの行を定めるよい方法がない。の方が分割された印刷をするときに非常に有用になるのにね。ヘッダーとフッターを最初の方と最後の方に設定するために、仮想(pseudo)の要素を body要素に使用することができる。しかし、ニーズに合うのではない。表を出力するときにこのような問題に直面することになるだろう。シンプルなのに、 theadの方に出力する方法がないという点である(一方がどこで分かれるかわからないし、マークアップを繰り返すことは真の解決策になることができない)。

面白いのは、 theadとtfoot スペックには、要素をそれぞれの側に繰り返すことができ、役に立ったと記されている点である。残念ながら、これを実装したブラウザベンダーはまだない。

しかし、解決策を作ることは可能である。のほうが出力される直前にイベントを起こすにはJavaScriptを実装するのは良い方法である。しかし、Simon Sapinの話を聞いてみると、ブラウザがページのレイアウトをとるメカニズムのために実際に可能ではない。

チョクヌンレイアウトを描画するときに分けられる。 (レイアウトを無効にして再描画)DOMを回すには既に遅すぎたのだ。本当にレイアウトエンジンに付いたのだ。 ⁷

また、 @pageの他のプロパティは、各側のヘッダーとフッターを作成するのに役立つことができる。

幸いにもの方がな媒体スペックがこの問題を解決しようとしている。この仕様は現在のドラフトにとどまっている。

これは、すべての方のフッターにページ数を出力する例です。

@page {
    counter-increment: page;

    @top-center {
        content: "Headline, yo!"
    }

    @bottom-right {
        counter-increment: page;
        content: "Page" counter(page);
    }
}

counter-incrementプロパティに’ page ‘キーワードを使うのはちょっと特別である。ページ数( page)が仕様に応じて自動的に増加する。したがって、我々はそれが全く必要ない。 [気にする必要はないという言葉のように - 翻訳者]
⁸

大当たりだ!これは、すべてのブラウザですぐに必要である。

変更 – 2013-03-26実際にヘッダーとフッターを別の方法で可能にすることができる。 Robert Weberが明らかにしたバーによると、 position: fixed;を使用するとされる。残念ながら、この手法は、Firefox、OperaとInternet Explorerでのみ動作します。奇妙な形でだ。 Robert Weberのコメントを読んでください。

携帯電話について一言

スマートフォンやタブレットでWebページを訪問するのがますます普及している。しかし、そのような機器でWebページをプリントするのをまだ見たことがない。

私は、Webページを出力することができる携帯電話のブラウザをまだ見ていない。しかし、おそらくすぐに表示されるようだ。

より知っている人があればお知らせください。

変更 – 2013-03-25 iOSは、ワイヤレスプリンタに接続して出力する機能があるとCãtãlinMarişが知られた。これは、Appleのエアプリントサービスを使用する。

サーバ側

この記事は、スタイルシートを作成するためのサーバ側のレンダリング方法を説明しない。しかし、ブラウザではないながらも、出力に最適化されたCSSの実装がいくつかある。 WeasyPrint、PrinceXMLまたはAntennaHouseなどがブラウザはしないCSSの実装をしておいた。

だから、もっと一貫した出力をする場合は、このライブラリを調べてください。

結論

今までお話した印刷用CSSのプロパティに簡単な構造のウェブサイトは、制御することができるというのが明確になった。しかし、より複雑なアプリケーションは、適切に制御するのが難しいということがすぐに明らかになるだろう。

結論として、の方がな媒体スペックなどの新しい仕様が登場すれば、将来的にはより良い方法でこの問題に対処することができます。

感謝の言葉

この記事の非常に貴重なフィードバックをしてくれたAdrian RoselliとSimon Sapinに深い感謝を伝える。この記事を校正観てくれたThomas Caspersにも感謝する。

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。