Specify hairline thickness in CSS for printing
If I have a print CSS styling an element with:
border:1px solid black;
or:
border:0.25pt solid black;
The line is very thick when it prints – at least 1pt. If I try a much smaller value, such as 0.05pt, the line doesn't appear at all. How can I get a thin line? In programs like InDesign you set the thickness to 0.25pt for a 'hairline', i.e. a very thin line but not so thin that it won't be printable.
Note: this question seems to ask the same thing, but nobody has addressed the actual issue of the line thickness, merely the best units of measure to use: pt or px for specifying border-width for print
Answer
Thanks for your help. It would seem that browsers are just useless in this respect.
I've done some more testing and the conclusion seems to be:
- No browser is any good at printing point sizes.
- You can't assume users will see a width less than 1.25pt on a prinout.
I tested variations of the following web page, adjusting the border point size each time. I printed with 'fit to page' turned off.
<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>
These are the results of the minimum printable point size and what it looks like compared to a printout of lines from InDesign. I've included a few other notes, too:
FF: 0.25pt, looks like 1.25pt. DIV width looks like it is 17cm, but because of FF's massive print margins the right-hand border gets cut off. It seems 16.5cm is the largest usable width. The BODY height fits the height of the page.
Safari 5: 0.75pt, looks like 1pt. DIV width is 18.2cm and BODY width is 19.5cm - Safari appears to be fitting to page even though there's no indication that it would do this. The BODY height finishes shortly after the DIV height.
Opera 11: 0.4pt, looks like 0.75pt. DIV width is 16.2cm and the BODY background only appears within the div - although the line of text, appears on a white background
IE7: 0.4pt, looks like 0.5pt (as does 0.5pt). As with FF, DIV width looks like it is 17cm, but because of IE's massive print margins the right-hand border gets cut off.
IE9: 0.1 works (and possibly lower), but still looks like 0.5pt. Otherwise same as IE7.