1

I am trying to create a book using webdesign. To do so, I need an A4 page with a box-border around the page. If the border is achieved along with specified page breaks, achieving rest of the design should be relatively is easy.

The problem now is that the borders from succeeding page is creeping slightly into the previous page.

page-break-after: always; is also not working for .page

First Page

Last Page

Required Output

My Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JSS Report</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>

  <style>
    @media print {
      @page {
        size: A4;
        width: 210mm;
        height: 297mm;
        margin: 1cm;
        margin-left: 1.5cm;
        box-sizing: border-box;
        border-style: solid;
        border-color: green;
        border-width: medium;
      }
      body {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
      }
      .page {
        display: flex;
        width: calc(210mm - 2.5cm);
        height: calc(297mm - 2cm);
        flex-direction: column;
        align-content: center;
        justify-content: center;
        box-sizing: border-box;
        box-shadow: inset 5px 5px red, inset -5px -5px red;
        page-break-after: always;
        /*Not Working*/
      }
    }
  </style>
</head>

<body>
  <div class="page">
    Hello Page 1
  </div>
  <div class="page">
    Hello Page 2
  </div>
  <div class="page">
    Hello Page 3
  </div>
  <div class="page">
    Hello Page 4
  </div>
  <div class="page">
    Hello Page 5
  </div>
  <div class="page">
    Hello Page 6
  </div>
  <div class="page">
    Hello Page 7
  </div>
  <div class="page">
    Hello Page 8
  </div>
</body>

</html>

The generated PDF file has the size => 8.28in x 11.69in
while A4 sheet should have the size => 8.27in x 11.69in

I think this is the reason why the borders from succeeding page is creeping slightly into the previous page.

What I've tried:
border-style: solid;border-color: red;
box-sizing: border-box;

I resist the use PDF generator API's or Libraries. Do I really need them for making a simple page with border & page-breaks?

YourPalNurav
  • 1,204
  • 9
  • 40
  • 1
    @Andifined but it should not effect the final Print rendition of the page according to https://www.w3.org/TR/css-page-3/ A4 will still remain A4 even after the margins are added. (210 mm) + (1 cm) + (1.5 cm) = 9.25 inches that is clearly not a problem. – YourPalNurav Mar 21 '19 at 13:23
  • Comment deleted sice I misunderstood your problem and it is not helpful anymore. Will look into this :) – Andifined Mar 21 '19 at 14:23

1 Answers1

0

This did the job for me:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JSS Report</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>

  <style>
    @media print {
      @page {
        size: A4;
        box-sizing: border-box;
        border-style: solid;
        border-color: green;
        border-width: medium;
      }
      body {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
      }
      .page {
        display: flex;
        width: calc(100vw - 2.5cm);
        height: calc(100vh - 2cm);
        margin: 1cm;
        margin-left: 1.5cm;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        box-sizing: border-box;
        box-shadow: inset 5px 5px red, inset -5px -5px red;
        page-break-after: always;
        /*Not Working*/
      }
    }
  </style>
</head>

<body>
  <div class="page">
    Hello Page 1
  </div>
  <div class="page">
    Hello Page 2
  </div>
  <div class="page">
    Hello Page 3
  </div>
  <div class="page">
    Hello Page 4
  </div>
  <div class="page">
    Hello Page 5
  </div>
  <div class="page">
    Hello Page 6
  </div>
  <div class="page">
    Hello Page 7
  </div>
  <div class="page">
    Hello Page 8
  </div>
</body>

</html>

I set the margins on the pages and used vw and vh for the calculations. Could it be that cm calculation is inaccurate?

Not a really good answer, since I don't know the reason this works and your solution doesn't, but better than nothing I hope.

Andifined
  • 479
  • 6
  • 19