0

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.

Community
  • 1
  • 1
Hi-Angel
  • 4,933
  • 8
  • 63
  • 86
  • 1
    Nope. According to a comment on the linked answer, it doesn't work. See [this table](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules). Another comment says it works on IE8, but I haven't gotten it to work on IE8 either. – Mr Lister Jun 14 '15 at 18:44
  • @MrLister hm… That's interesting, so, the problem is a missing support… But in fact I saw at least a few articles about designing a book with this CSS feature. [E.g. this one](http://www.smashingmagazine.com/2015/01/07/designing-for-print-with-css/). I am curious how would they forced it to work then. – Hi-Angel Jun 14 '15 at 18:51

0 Answers0