I have text content with over 50,000 words. I have to separate it page by page in A4 size but the text is overflowing after the 1st page. I need to preview the HTML content (on browser, before printing) on A4 page. Issue is that I am unable to keep track of the page height. So, when page ended, some of the content goes outside the page.
Is there some way I can render dynamic HTML content on A4 pages?
On
Yes, you can achieve this by using CSS media queries and setting the page size to A4 dimensions. You can define a @media print query in your CSS and set the page size, margins, and other styles specifically for printing. This will allow you to preview the content as it would appear on A4 pages in the browser before printing.
Example: (A4 width, height and margin)
@media print {
body {
width: 210mm;
height: 297mm;
margin: 20mm;
}
}
You can apply this CSS to your HTML document and then use the browser's print preview feature to see how the content is distributed across A4 pages.
You can do this with css, like below:
See also https://developer.mozilla.org/en-US/docs/Web/CSS/@page .
For closer control, use the
break-insideCSS property; see https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside