Is it possible to repeat content after a page-break? Can you detect a page-break?

0
votes

I have a large web page that when printed will often require multiple page breaks. However, this means that the content is split from the rest of the parent layout structure and user might not understand which question it realates to. Something like the examples below

Current Behaviour

A 1 i   What is the capital of Peru?
    ii  What is the capital of Brazil?
    iii What is the capital of Equador?
  2 i   What is the population of France?
    ii  What is the population of Spain?
___________________________________________
    iii What is the population of Italy?

What I would like to do is repeat the questions numbers at the beinning of the page so that the orphaned question has the reference of the parent.

Desired behaviour

A 1 i   What is the capital of Peru?
    ii  What is the capital of Brazil?
    iii What is the capital of Equador?
  2 i   What is the population of France?
    ii  What is the population of Spain?
___________________________________________
A 2 iii What is the population of Italy?

Is there any way do this with CSS? I don't see how using the CSS 'page-break' properties would work. Otherwise maybe Javascript? I'll be using wkhtmltopdf to convert the html to pdf by the way.

Added some example code.

td, th {
  vertical-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" typZe="text/css" href="css/main.css">
</head>
<body>

<table style="height: 202px; width: 557px;">
  <thead>
  <tr>
    <th>Main</th>
    <th>Sub</th>
    <th>Subsub</th>
    <th>Question</th>
    <th>Marks</th>
  </tr>
  </thead>

  <tbody>
  <tr>
    <td rowspan="6">1</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 1</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 2</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 3</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 4</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 5</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 6</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="3">2</td>
    <td>a</td>
    <td>&nbsp;</td>
    <td>Here is a question 7</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 8</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 9</td>
    <td>
      <p>1.0</p>
    </td>
  </tr>
  <tr>
    <td rowspan="6">3</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 10</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 11</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>Here is a question 12
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 13</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 14</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 15</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">4</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 16</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 17</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 18</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 19</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 20</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 21</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">5</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 22</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 23</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 24</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 25</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 26</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 27</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="3">6</td>
    <td>a</td>
    <td>&nbsp;</td>
    <td>Here is a question 28</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 29</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 30</td>
    <td>
      <p>1.0</p>
    </td>
  </tr>
  <tr>
    <td rowspan="6">7</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 31</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 32</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>Here is a question 33</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 34</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 35</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 36</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">8</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 37</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 38</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 39</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 40</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 41</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 42</td>
    <td>1.0</td>
  </tr>
  </tbody>
</table>

</body>
</html>
2
htmlcsspdf-generationwkhtmltopdfpage-break
Of course, if it is necessary to directly generate the pdf then I'd also look into that. Any suggestions would be gratefully received. – alj
Can you share your HTML? – Alexandre Elshobokshy
Sure. See above. – alj
Have you tried using page-break-after, page-break-before, or page-break-inside to maybe rectify the situation. Quite frankly I am not sure about the in's and outs on those but they are in your arsenal in CSS :) – Jordan Dunton
Do you have control over your HTML? In other words, can your tables be split manually if you'd wanted? Or the info are coming from an plugin ie datatables? – Alexandre Elshobokshy

2 Answers

0
votes

The below code uses the responsive grid system and the CSS page-break-inside property.

Basically, we'll set the value of the page-break-inside property to avoid, which means that display the complete item on the same page and don't break it on page break. That means the whole item will be displayed on the same page.

In your case, we'll enclose the whole main group into one div and assign the page-break-inside property. And to get a tabular structure we'll use the CSS grid system, rows, and cols.

Now, this code does not copy the main q.no, sub q.no on a page break. But it keeps all questions of the same main q.no on the same page.

This code can also be implemented by for loops for dynamically filling the page.

Note the print CSS class. It is assigned to the row where we are creating a new main question. If this serves your purpose, I can help you design the for loop, if it seems complex...

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto {
  position: relative;
  width: 100%;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media print {
  .print {
    page-break-inside: avoid;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div class="row print">
    <div class="col-1"> 1 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 2 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 3 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 4 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 5 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 6 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 7 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
0
votes

By using the page-break-after: avoid; in CSS you can tell the site to avoid breaking pages when printing the specified object if at all possible. Alternativly, you could set classes with page-break-after or page-break-before so that the printer knows when it should shove things down or keep them up. I hope this helps and here is the documentation I used for reference.

W3Schools: https://www.w3schools.com/cssref/pr_print_pageba.asp
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after