Hi!

Visualizing the baseline grid is often needed, and so far we do that setting a background image, like this:

body {   
      line-height: 19px;
      background-image: url("../imagenes/19px.png");  
      background-position: 10px -1px;
}

... using different png images with different heights (16px, 17px, 18px, etc) depending on the case.

I'd need to visualize a baseline grid set in points instead of pixels.

Any ideas on how?

I've found a way that works in the browser, but not on Prince … : (

:root {--baseline: 18pt;}
body::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -3;
    display: block;
    background-image: linear-gradient(rgb(39, 42, 41), rgb(39, 42, 41) 1px, transparent 1px, transparent);
    background-size: 100% var(--baseline);
}

Thank you!

I've found that changing 19px.png to 14.25pt.svg (which is an SVG that uses height="14.25pt") produces a correct pdf, but that different pdf renderers give different results, varying even between different zoom levels.

(Perhaps relatedly, I find that some pdf renderers give poor results if I use a stroke width of less than 1pt for the grid lines: so I suppose they're converting to a bitmap before rendering, and rounding the size to a whole number of pixels for the current zoom level.)

To get reliable rendering, I suggest changing the svg to have a larger number of baselines. Given that the error is in the order of one viewing pixel per repetition in some pdf renderers, and that one pixel is a significant error for purposes of checking baseline alignment, I suggest that the SVG have at least as many baselines as there are on a page.

I suggest avoiding using an SVG pattern to get the repetition, lest it give the same problem. A creative use of stroke-dasharray (using a single very thick vertical line that occupies the whole image width & height) is tempting and would be safer than a pattern; but safest of all is probably to use multiple horizontal lines. I used a text editor to create as many repetitions of m and h operations in a <path> element as necessary, using copy & paste. E.g. the following uses fifty grid lines. (The width of 12pt is arbitrary.)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   width="12pt"
   height="712.5pt"
   viewBox="0 0 12 712.5"
   version="1.1"
   >
    <path
       stroke="#0cc"
       fill="none"
       stroke-width="1"
       d="M0 13.125 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12 m-12 14.25 h12"
       />
</svg>

This does the trick, as shown in the attached pdf.

1. 14.25pt-fifty.svg‎ 1.0 kB
2. 14.25pt.css‎ 0.1 kB
3. 14.25pt.pdf‎ 37.1 kB
4. see-grid-14.25pt.html‎ 12.3 kB

Thank you so much, pjrm.

Extremely useful and inspiring answer.


I've noticed that svg files created with Illustrator (see attachments), with width="12pt" and the height of the grid on each case, work well: Prince paint the lines in the right place and Acrobat, Skim and Evince read the PDF as expected.

Only thing that surprises me is that, opening the html file in the browser, the grid in points appears out of place... and i'm guessing it is because it "rounds" the height of the svg file to a whole number of pixels.
In other words, displaying in the browser a grid based in points units is quite useless.

Maybe a solution would be to have a different grid for print and for screen, with media queries, like this:

@media print {
	html {
		--grid: 14.50pt;
		--baseFontSize: 12pt;
		background-image: url("15-50pt.svg");
	}
}
@media screen {
	html {
		--grid: 19px;
		--baseFontSize: 16px;		
		background-image: url("baseline-19px.png");
	}
}

All the best!

1. 14-50pt.svg‎ 1.4 kB
2. 14-75pt.svg‎ 1.4 kB
3. 15-00pt.svg‎ 1.4 kB