2

I have dynamic HTML generated based on user entered content. I want to show that HTML as A4 pages. The content may span to any number of pages as it is continous.

A code pen like this one https://codepen.io/rafaelcastrocouto/pen/LFAes helps how to show html as A4 pages. This is quite good but my problem is that I don't know in advance how much content one page can have. Will the content be rendered in first page tag or two page tags or more, I don't know since this is user generated content. 

<page size="A4">
<!-----Dynamic HTML comes here, can confine to this page or overflow out of that----> 
</page>

How do I show html structured into multiple pages in this scenario? I know a hint that it might be possible with use of Javascript or query to create multiple page tags and place html chunks inside that but I would prefer CSS way of doing it as JS mechanism is susceptible to inaccuracies due to calculation of heights.

Is that possible? Also how about using page-break-before and page-break-after property of CSS. I have used that property but that renders only in PDF, I want to show that in HTML in browser, is that possible with that?

Hammad
  • 2,097
  • 3
  • 26
  • 45
  • Have you looked into [using CSS @page](https://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size) to specify the correct sizes? – mnewelski Oct 27 '17 at 17:27
  • @MattNewelski I have seen that but again same problem. Assume I use that .page selector with its styles and then I make a
    [Dynamic Content Here]
    if the content height is more that height of page then it will overflow out of that.     – Hammad Oct 27 '17 at 17:32
  • Delivering PDF when printing is an alternative – mplungjan Oct 27 '17 at 17:32
  • @mplungjan I already have pdf feature as well. But I want PDF with page break like feature in html. – Hammad Oct 27 '17 at 17:33
  • Do you only want to simulate A4 visually or you are afride of printing? – Ali Sheikhpour Oct 27 '17 at 17:34
  • @AliSheikhpour I want to simulate that, not afraid of it. Who fears prints :) – Hammad Oct 27 '17 at 17:35
  • Check this Q/A. You can detect when line breaks and so you can calculate number of desired lines in a single page: https://stackoverflow.com/questions/4671713/detecting-line-breaks-with-jquery – Ali Sheikhpour Oct 27 '17 at 17:42
  • This is intriguing. The `` tag does not exist and is likely handled as a `
    `. Further, the `size` attribute does not apply to a `
    `. I would use `class` instead and start by coding valid markup. Please see the answer to [https://stackoverflow.com/questions/37196261/html-what-is-the-page-tag-doing](https://stackoverflow.com/questions/37196261/html-what-is-the-page-tag-doing). As to your question, there is nothing in css that calculates the height of elements. Perhaps try using js to measure the height of your html construct on attach and then adjust as necessary.
     – Julio Feferman Oct 27 '17 at 17:48
  • Yes @jfeferman tag does not exist. I was referring to Kevin's codepen that even if I use that then whole of html content won't fit into one page and may need additional pages. So the question was how to handle overflown content and put that into second page. – Hammad Oct 27 '17 at 17:52
  • @Hammad, yes that is understood and is the second part of my comment. AFAIK there's no CSS solution. You would need javascript to calculate the height of your html `onAttach` with `visibility:hidden` move html between `page` blocks and then set `visibility:visible`. – Julio Feferman Oct 27 '17 at 18:01

0 Answers0