web-dev-qa-db-ja.com

印刷用のCSSでヘアラインの太さを指定します

要素のスタイルを設定する印刷CSSがある場合：

border:1px solid black;

または：

border:0.25pt solid black;

印刷時の線は非常に太く、少なくとも1ポイントです。 0.05ptなど、もっと小さい値を試してみると、線がまったく表示されません。どうすれば細い線を得ることができますか？ InDesignのようなプログラムでは、「ヘアライン」の太さを0.25ptに設定します。つまり、非常に細い線ですが、印刷できないほど細くはありません。

注：この質問は同じことを尋ねているようですが、線の太さの実際の問題に対処している人は誰もいません。使用するのに最適な測定単位です。 印刷の境界線の幅を指定するためのptまたはpx

cssprinting-web-page
14
user535673

ご協力いただきありがとうございます。この点では、ブラウザは役に立たないように思われます。

私はさらにいくつかのテストを行いましたが、結論は次のようです。

  • ポイントサイズの印刷に適したブラウザはありません。
  • Prinoutでユーザーに1.25pt未満の幅が表示されるとは限りません。

次のWebページのバリエーションをテストし、毎回境界点のサイズを調整しました。 「ページに合わせる」をオフにして印刷しました。

<html>
  <body style="width:17cm; background-color:rgb(245,245,245);">
    <div style="border:0.3pt solid black; width:100%; height:20cm">IE 0.3pt</div>
  </body>
</html>

これらは、印刷可能な最小ポイントサイズの結果であり、InDesignの行の印刷出力と比較した場合の外観です。他にもいくつかメモを含めました。

FF：0.25pt、1.25ptのように見えます。 DIVの幅は17cmのように見えますが、FFの印刷マージンが大きいため、右側の境界線が途切れてしまいます。使用可能な最大幅は16.5cmのようです。 BODYの高さはページの高さに適合します。

Safari 5：0.75pt、1ptのように見えます。 DIVの幅は18.2cm、BODYの幅は19.5cmです-Safariは、これを行うという兆候はありませんが、ページにフィットしているように見えます。 BODYの高さは、DIVの高さの直後に終了します。

Opera 11：0.4pt、0.75ptのように見えます。 DIVの幅は16.2cmで、BODYの背景はdiv内にのみ表示されます-テキストの行は白の背景に表示されます

IE7：0.4pt、0.5ptのように見えます（0.5ptもそうです）。 FFと同様に、DIV幅は17cmのように見えますが、IEの印刷マージンが大きいため、右側の境界線が途切れます。

IE9：0.1は機能します（場合によってはそれ以下）が、それでも0.5ptのように見えます。それ以外はIE7と同じです。

11
user535673

現在、2015年には、HTML5とCSS3でいくつかのヘアラインを生成するための回避策があります。印刷または高解像度画面用：

  1. SVG（つまり、パスstroke-width: .5を割り当てることによって）
  2. 線形グラデーションの背景
  3. 2D変換：スケーリング

scalingアプローチについては、 この記事 で詳しく説明しています。それはこれに要約されます：

hr.thin {
    height: 1px;
    border-top: none;
    border-bottom: 1px solid black;
    transform: scaleY(0.33);
}

線形勾配メソッドはこれらの線に沿って機能します（しゃれを意図した、 詳細はこちら ）：

hr.hairline {
    height: 1px;
    background: linear-gradient(
        transparent 0%, 
        transparent 50%, 
        black 50%, 
        black 100%);
}

簡単にするために、例として1px <hr>要素を使用しました。ただし、要素内のすべてのスタイルをスケーリングするか、それぞれ複数の背景を使用することで、両方のソリューションを拡張して、要素の4つの側面すべての境界線として機能させることができます。

6
Avant la lettre

ブラウザがページを再スケーリングすることに問題がある可能性があります（少なくともIE印刷時に実行するために使用されます）が、今テストしたところOpera（再スケールなし） 、線はまだヘアラインほど細くはありません。ただし、私は常にこれを使用して細い境界線効果を実現しています。

p {
  border: 0.4pt solid #CCC;
}

これにより、非常に薄い灰色の境界線が作成されます。 Barry Kayeが提案したように、dottedを薄く見せることもできます。

4
FurloSK

dottedの代わりにsolidの太さを使用すると、一部の印刷シナリオで役立ち、ドットよりも細い（髪の）線としてレンダリングされることがわかりました。

4
Barry Kaye

最初にHTMLドキュメントをPDFに変換するツールを使用することをお勧めします。次に、PDFを印刷して、一貫した結果を得ることができます。Wkhtmltopdfは非常に適しています。これは、最も標準に準拠したWebレンダリングエンジンに基づいているためです。

Wkhtmltopdfを使用する場合、ズームを1より大きい値に設定して、線を細くすることができます。線幅を0.25ptのように設定し、次のコマンドを使用します。

wkhtmltopdf -T 0 -B 0 -L 0 -R 0 -s A4 --zoom 10 <URL> <output filename>

今、あなたは本当に細い線を手に入れます。より高いズーム値を指定すると、レンダリングがより正確になるため、外観がわずかに異なります。

最良の結果を得るには、pxの代わりにmm、cm、ptの単位を使用してください。

1
B. Martin

B.Martinの答えが最も役に立ちました。これが私がそれに追加できるものです：

理論

物理的に髪の幅（hairwidth）は17から181ミクロンの間です。つまり、0.02〜0.2 mmまたは0.05〜0.5ptです。

したがって、線を0.1ptより狭くしても、目で見えない可能性があるため、あまり意味がありません。

CorelDrawのヘアラインは0.23ptまたは81ミクロンです。

練習

実際、wkhtmltopdfツールは細い線を作成するのに便利です。私はなんとか次の幅を達成することができました：

  • ズーム率8で0.1ポイント
  • ズーム係数4で0.2pt（この場合、a4は一般的なサイズa0にズームされるため、より実用的です）

線の実際の幅は測定しませんでしたが、CorelDrawの「ヘアライン」とほとんど同じように見えます。

注意：幅を0.1ptから0.15pt（zoom = 8）または0.2ptから0.3pt（zoom = 4）に変更しても、少なくとも視覚的には、結果の線幅は変更されません。

だから、私が持ってきたのは：

wkhtmltopdf -s A0 --zoom 4 <input filename> <output filename>

印刷時に自動的にA4に縮小できるかなりA0サイズのページを提供します。この段階でも、ヘア幅の線が失われることはありません。

更新：ついにAcrobatプラグインを使用して測定することができました：-s A0 --zoom 4がa0で0.6ptになった後の元の0.3pt行（つまり、ダウンサイジング後は0.15pt）で十分です私にとってのヘアライン。

1
Antony Hatchkins