15

要素をスタイリングする印刷CSSがある場合：

border:1px solid black;

また：

border:0.25pt solid black;

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

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

4

7 に答える 7

12

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

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

  • ポイント サイズの印刷に適したブラウザはありません。
  • ユーザーがプリアウトで 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と同じ。

于 2012-04-04T08:25:46.763 に答える
10

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

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

スケーリングのアプローチについては、この記事で詳しく説明しています。要約すると、次のようになります。

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%);
}

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

于 2015-11-18T15:40:16.453 に答える
4

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

p {
  border: 0.4pt solid #CCC;
}

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

于 2012-05-29T07:47:50.247 に答える
4

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

于 2012-04-02T14:40:29.107 に答える
1

最初に 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 の単位を使用してください。

于 2013-11-22T17:34:42.770 に答える