3 ms·

It's interesting that he skips over any fancy css tricks to get headers and footers and goes straight to generating from js. One advantage of this is that you c

It's interesting that he skips over any fancy css tricks to get headers and footers and goes straight to generating from js. One advantage of this is that you can add page numbers and such to each header, which is totally impossible with css hacks. But if you're fine going without that, it seems like there are methods that produce mostly acceptable results with less effort than the javascript solution he proposes.

voussoir 3y ago
I'm sure there are smarter ways to do some of the things I'm doing. Could you let me know what fancy tricks you're referring to, perhaps ::before and ::after with content properties? These generator pages already rely on javascript to put our database data onto the page, whether by URL parameters or API calls, so once I'm in that mode, yeah I'm generating everything with article.innerHTML = '...' to get a bulk template on the page, and a series of createElement/append to make smaller elements like table rows.
- lofenfew 3y ago
  I just did a quick search, so I don't claim to be an expert. The two main methods seem to be thead/tfoot and position:fixed. I didn't mean to imply that this are smarter/better, but they might be easier in certain conditions.
  - voussoir 3y ago
    Oh, I see, thanks. I did figure out that thead automatically repeats across pages, but I also had to repeat other stuff outside the table, like letterhead. I also made this sample file that shows thead repeating, but since it's a single continuous table it doesn't preview very well and spills out of the 8.5x11 article element. I'm not sure how I would take advantage of the browser's automatic thead/tfoot repeat while also accurately previewing the result in the browser, especially with more elements below the table. https://voussoir.net/writing/css_for_printing/sample_longtable.html https://voussoir.net/writing/css_for_printing/sample_longtab... But I'm open to suggestions that would spare me from splitting the table after a height threshold!
tingletech 3y ago
@media print { @page { @bottom-center { content: counter(page) } } works with https://pagedjs.org https://pagedjs.org
- SparkyMcUnicorn 3y ago
  And it's not just a Paged.js thing. No "hacks" necessary. https://www.w3.org/TR/css-page-3/#page-based-counters https://www.w3.org/TR/css-page-3/#page-based-counters
  - jamesfinlayson 3y ago
    What browser does it work in natively? I tried this a couple of years ago and a few people claimed that it worked in kiosk mode for Chrome but I couldn't get it to work in any browser.
    - SparkyMcUnicorn 3y ago
      It looks like it should be available in all major browsers. https://developer.mozilla.org/en-US/docs/Web/CSS/@page#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/@page#brows... That said, I've always used paged.js with its polyfills to fill in other gaps. So maybe there's something I'm unaware of.
      - jamesfinlayson 3y ago
        @page probably works for some things but when I tried to do page numbers it definitely didn't. I ended up hacking something together (absolute positioning a number every ~700px or whatever so it sat on the same place each page).
  - tingletech 3y ago
    paged.js is a polyfill that implements this. I'm not aware of any browser that support this. Why do you call paged.js a "hack"?

voussoir 3y ago

I'm sure there are smarter ways to do some of the things I'm doing. Could you let me know what fancy tricks you're referring to, perhaps ::before and ::after with content properties? These generator pages already rely on javascript to put our database data onto the page, whether by URL parameters or API calls, so once I'm in that mode, yeah I'm generating everything with article.innerHTML = '...' to get a bulk template on the page, and a series of createElement/append to make smaller elements like table rows.

lofenfew 3y ago
I just did a quick search, so I don't claim to be an expert. The two main methods seem to be thead/tfoot and position:fixed. I didn't mean to imply that this are smarter/better, but they might be easier in certain conditions.
- voussoir 3y ago
  Oh, I see, thanks. I did figure out that thead automatically repeats across pages, but I also had to repeat other stuff outside the table, like letterhead. I also made this sample file that shows thead repeating, but since it's a single continuous table it doesn't preview very well and spills out of the 8.5x11 article element. I'm not sure how I would take advantage of the browser's automatic thead/tfoot repeat while also accurately previewing the result in the browser, especially with more elements below the table. https://voussoir.net/writing/css_for_printing/sample_longtable.html https://voussoir.net/writing/css_for_printing/sample_longtab... But I'm open to suggestions that would spare me from splitting the table after a height threshold!

tingletech 3y ago

@media print { @page { @bottom-center { content: counter(page) } } works with https://pagedjs.org https://pagedjs.org

SparkyMcUnicorn 3y ago
And it's not just a Paged.js thing. No "hacks" necessary. https://www.w3.org/TR/css-page-3/#page-based-counters https://www.w3.org/TR/css-page-3/#page-based-counters
- jamesfinlayson 3y ago
  What browser does it work in natively? I tried this a couple of years ago and a few people claimed that it worked in kiosk mode for Chrome but I couldn't get it to work in any browser.
  - SparkyMcUnicorn 3y ago
    It looks like it should be available in all major browsers. https://developer.mozilla.org/en-US/docs/Web/CSS/@page#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/@page#brows... That said, I've always used paged.js with its polyfills to fill in other gaps. So maybe there's something I'm unaware of.
    - jamesfinlayson 3y ago
      @page probably works for some things but when I tried to do page numbers it definitely didn't. I ended up hacking something together (absolute positioning a number every ~700px or whatever so it sat on the same place each page).
- tingletech 3y ago
  paged.js is a polyfill that implements this. I'm not aware of any browser that support this. Why do you call paged.js a "hack"?