Question 344990 in Html Question posted in
Some basic documentation can be found here.

Render HTML content on A4 pages

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?

Tags:

2

Answers


  1. 0

    You can do this with css, like below:

    <html>
    <head>
        <style type="text/css">
            @page 
            {
                size: a4 portrait;
                margin: 15pt 15pt; 
            }
      </style>
    </head>
    <body>
        your long text ...
    </body>
</html>

    See also https://developer.mozilla.org/en-US/docs/Web/CSS/@page
    .

    For closer control, use the break-inside CSS property; see https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

    <div style="break-inside:auto;">
...
</div>
    Login or Signup to reply.
  2. 0

    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.

    Here’s a basic example to get you started: (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. Adjust the styles as needed to fit your specific layout requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search