Custom CSS help

[AndrewLighten]

I’d like to be able to selectively have documents page break on h2 elements when I export them to a PDF file.

I can have them always break with this CSS:

@media print {
    h2 {
        page-break-before: always;
    }
}

I general, though, I don’t want to do this. For one particular class of document I need to export I want to do this though.

I tried changing this to:

@media print {
    .Paginated h2 {
        page-break-before: always;
    }
}

and then adding the Paginated cssclass to the document frontmatter, but the page break doesn’t occur. My CSS skills are not good, so I’m not sure I have the class and element setup right in the CSS file.

Can anyone nudge me in the right direction?

[Erisred]

@AndrewLighten - I can’t find a way to affect .pdf output using cssclass.

Maybe someone else has done so. Until then, here’s a workaround:
You could use HTML in the note like so:
<h2 class="Paginated">The header text</h2>

Then, you have to specify the h2 element and class (reverse of how you do it by page):

@media print {
  h2.Paginated {page-break-before: always;}
}

The bonus here is that you don’t need the frontmatter at all, and can use this anywhere. The downside is that it doesn’t render the h2 in edit mode.

A better way…

I’ll offer another alternative…
Make an hr element that serves as a print break. The css:

@media print {
  hr.page-break {page-break-before: always; display:none;}
}

Then, anywhere you want a break in the outputted .pdf, add this to the note:
<hr class="page-break">

If you want to hide this break in Obsidian (make the hr line invisible), add this separately:
hr.page-break {border:none; margin:0px;}

You could probably do this with any element you want, really. HR just seemed natural to me.
Hope that helps. Good luck!

edit - display:none broke the page breaks. changed the style of the hr with attached class instead, to render ‘invisible’ in preview mode

[AndrewLighten]

Thanks Erisred. That’s a far superior approach and it works perfectly. Much appreciated.