Printing a grid made using CSS gradient to a pdf (in either Chrome or Firefox)

Question

I am creating a dotted grid in CSS using the background-image property and repeating-linear-gradient like this

:root{
  --c0: rgba(0,0,0,0);
  --c: grey;
  --point-size: 1pt;
  --cell-size: 0.5cm;
}
.dotted{
  background-color: var(--c);
  background-image:
  repeating-linear-gradient(
    white,
    white calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) - var(--point-size)),
    var(--c0) var(--cell-size)),
  repeating-linear-gradient(90deg,
    white,
    white calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) - var(--point-size)),
    var(--c0) var(--cell-size));
}

which looks like perfectly fine in the browser (both Chrome & Firefox)

But if I try to print it in a.pdf it doesn't works (both Chrome & Firefox).

If I use Firefox to output the.pdf, it looks empty in the basic Ubuntu document viewer, however if I open this.pdf in Chrome it has a moiré effect like this (here with a bigger --point-size to make the effect more obvious)

If I use Chrome to output the.pdf, it looks pixelated in the basic Ubuntu document viewer or in Chrome.

I need it to looks a lot more crisp and regular than this.

I tried different alternatives, like using background-repeat with a limited background-size so I can transform the repeating-linear-gradient into a linear-gradient like so

.dotted{
  background-color: var(--c);
  background-image:
  linear-gradient(
    white,
    white calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) - var(--point-size)),
    var(--c0) var(--cell-size)),
  linear-gradient(90deg,
    white,
    white calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) - var(--point-size)),
    var(--c0) var(--cell-size));
  background-size: var(--cell-size) var(--cell-size);
  background-repeat: repeat;
}

Or trying to output from the browser printing window and the system printing window and see if there are any differences for both Chrome and Firefox. They all give slightly different results but either has a moiré or pixelated effect, or is just an all white or grey background.

It seems to me this is due to browsers guessing it has to use a low DPI to render the background-image and then doing approximations which ends-up in either the moiré or pixelated effect depending on which browser or systems you use to print it. But I have no idea on how I can get control over this.

Also changing the units from pt and cm to px gives much cleaner results (probably less approximations to do by the browser when it's rendering the background-image ) but because this is for printing on actual paper I need the grid to repeat exactly every 0.5cm .

How can I make either Chrome or Firefox render this grid properly?

Answer 1

Mon Dieu, that's a nightmare way to build a PDF (took me several attempts to hone it down)

The key is to work in default common units and I am still not sure if I have it good enough.

Whilst Acrobat should accept it

Other viewers may not understand that unusual PDF structure,

My final adjustment:- is to say keep all units as uniform in pixels, for good all round rendering. It works fairly well either as points or pixels, however, keep all units the same. Here it is in Edge (Chrome based) at 200%

The key issue is keeping close to default screen pixel size, which naturally varies from user app to user and app and monitors. The best solution would be PNG image at 96 dpi its more "Portable" and just as scalable as thousands of lines, plus much faster to display.

  --point-size: 1pt;
  --cell-size: 18pt;

OR

<style type="text/css">
:root{
  --c0: rgba(0,0,0,0);
  --c: grey;
  --point-size: 2px;
  --cell-size: 24px;
}
body{
  width: 793px;
  height: 1123px;
  background-color: var(--c);
  background-image:
  repeating-linear-gradient(
    white,
    white calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) - var(--point-size)),
    var(--c0) var(--cell-size)),
  repeating-linear-gradient(90deg,
    white,
    white calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) - var(--point-size)),
    var(--c0) var(--cell-size));
}
</style>