I need to write a bunch of formatted text, which is uncomfortable to do (at least to me) with Office apps, so I do this with Markdown + CSS. I stuck with the problem that I couldn't set page counters. E.g. this answer tells that I have to use a sub-selector @bottom-right of the @page to paste a number, like
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
@page selector configures formatting for one prints a page. Unfortunately the example didn't work for me. In fact, I couldn't insert any text using the content: function.
A minimal (non-) working example:
<!DOCTYPE html>
<html>
<head><title>test</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
h1 {
counter-reset: subsection;
page-break-after: always;
}
@page{
@top-left {
content: "Hello";
}
}
</style>
</head>
<body>
<h1>Section 1</h1>
<h1>Section 2</h1>
<h1>Section 3</h1>
<h1>Section 4</h1>
<h1>Section 5</h1>
</body>
</html>
Here you see five headers that being shown as five separate pages when you ask a browser to print it. Besides, accordingly to the @page rule, you should see somewhere in top-left corner of every page a word «Hello». Do you? I tested in Firefox and Chrome, and no matter what corner I choose, I never see the text there.
I also tried (although it supposed to be unneeded for the @page) to wrap it into @media print{…}, that changed nothing.
Note: when testing, don't be confused by the page counters that browsers tends to insert on its own.