6

Is it possible in CSS or js to emulate the following format in printed media (eg showing borders for each page, with a page number and some text in the corner, with the content nicely split - and not chopped in half)?

enter image description here

I have been using page-break-after to split the content up, but havn't found a way to add this kind of border/page number to each page. This only needs to work in WebKit.

For further information, the reason I am doing this is I am printing HTML documents to PDF using wkhtml.

Tim Rodham
  • 283
  • 4
  • 14
  • 1
    You can use a print-only style sheet and just apply an absolute positioned div containing the data you need. Here is a good guide on creating a print style sheet: http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/ – Dryden Long Mar 25 '14 at 15:41
  • Not really? If it spans more than one page the border will be cut off at the page break... – Tim Rodham Mar 25 '14 at 15:43
  • 1
    If you define its size correctly, the border will never span more than one page. You're essentially just creating an extra div to be used as an overlay when printed. If this div has a static width and height within the print boundaries then it will not get cut off. – Dryden Long Mar 25 '14 at 15:56
  • But it will only add to the first page won't it? – Tim Rodham Mar 25 '14 at 16:00
  • 1
    If you only create one div then yes. If you create a div for each page, then you'll be set. – Dryden Long Mar 25 '14 at 16:01
  • OK, so how do you know how many pages there will be then? – Tim Rodham Mar 25 '14 at 16:04
  • 1
    I don't know, that depends on your markup and CSS... You'd have to do the math to figure it out, or render the pdf and make note of where the page breaks are. You can use `cm` units in your stylesheet so that you don't have to worry about digital to tangible unit conversion. – Dryden Long Mar 25 '14 at 16:36
  • @TimRodham does this helps you. http://jsbin.com/nilepakibuno/1 – Kheema Pandey Aug 27 '14 at 04:41
  • This discussion might help: http://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html – TysonWolker Nov 06 '14 at 02:05
  • any solution as of 2020? – Gvs Akhil Feb 25 '20 at 07:27

0 Answers0