I'm working on converting my css from a browser based processor to prince, and I've run into some confusion.

When setting declarations on h elements (h1-h6) when planning to use baseline snapping, do you only set the font and line-height sizes, and ignore/remove top and bottom margins? Should line heights be set to exactly the font size, or should that also be larger like the p line height. (honestly, if something wrapped in say, a h2 isn't going to wrap to a second line, when using snap to baseline, it probably doesn't matter, but right now I have a few headings that will wrap)

Related question for images/figures, set left and right margins or padding, but leave top and bottom as 0 or undeclared/removed from the css?

Final (for now) baseline question. As I fine tune my layout, I'd like to visualize the baseline. I found a few old forum posts from before baseline snapping was implemented that uses a background image (apparently svg worked best) for doing this, is this still the best way, or is there now a switch in prince that I can set to generate such a visualization in my pdf?

(I'm working in linux, so no gui available to live preview)

Here's a guide to baseline alignment:

https://css4.pub/2023/baseline/

The guide is added as a background image.

In general, it's best to avoid relying on margins due to margin collapsing.

Yeah, I had found the linked guide, it was actually the source of some of my confusion. So, If I want a grid added for troubleshooting purposes, I'll need to make an appropriate image, correct? The guide uses a png, older forum posts used an svg, does it matter which I make?

I chose to use PNG in the guide, it's easy to set the 20px dotty grid with a data url:

@page {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAK0lEQVQ4y2MwNzf/Ty5g/P//PwO5gOnv379ka6bMZgYKwKjmUc2jmgeVZgA86UKC6YvevwAAAABJRU5ErkJggg==) !important;
}

The image is not necessary to achieving baseline alignment; it is only there so that humans can visually verify that alignment has been successful. As such, you are not tied to using PNG.

Edited 3 Sep 2024 by howcome

I appreciate the data url for the 20px dotty grid, however right now, my line height is 16px (12pt) and I may change it (not totally set on font and font size), so I'll absolutely need to create my own - possibly several. Do you happen to have a writeup or tutorial somewhere for creating these png data urls? So far all I've found are online converters.

I do understand that grid is more for me to visually verify the alignment was successful (and, pleasing, and allow troubleshooting if things are actually aligned but still don't look good), and the question about png or not was more related to a forum post where someone said they needed svg for the background image to work properly, it caused some confusion.

Here's the data url for a 16px pattern:

@page {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAKElEQVQoz2MwNzf/Twpg/P//PwMpgOnv378kaSDdBgYSwaiGUQ04AADJmjaGWBXW1gAAAABJRU5ErkJggg==)
}

I create png images in gimp, stripping out all the metadata in the export process. Then I use an online data-url generator.

Edited 4 Sep 2024 by howcome

Thank you for the 16px grid. When you create these, is it 1 square with dots in the corners that gets tiled, or is it a full page? (I'm working on a full page in inkscape right now, it's laborious if there is a way to do it quicker, in case I do change my line height I'd appreciate hearing how).

The PNG images are very simple. The previous example is 16x16 pixels, of which one is black. CSS repeats the background pattern automatically, so there's no need to create a full-page grid. You can recreate the PNG file by pasting the data url into one of the online converters.

Edited 4 Sep 2024 by howcome