I am currently working on a web application designed for editing documents. In this app, each document can consist of multiple pages, all following the standard paper size in Germany (DIN A4 with dimensions 210mm width x 297mm height). To ensure that the layout matches this fixed size, I have appropriately set the body size in my HTML.
While the appearance of the documents meets my expectations, I am facing a significant challenge. I would like the webpage to automatically divide the content into individual pages represented by div boxes, each following the size of DIN A4 as mentioned above.
Is there a way to achieve this? Ideally, I am looking for a CSS-only solution, but JavaScript is also acceptable. To better illustrate my issue, I have created a CodePen example: example codepen
The desired behavior is similar to Google Drive's Text Documents feature, where a new page is generated when the current page is full. Here is a screenshot:
HTML
<html>
<body>
<h1>This is the title of the document</h1><b>Table of contents</b>
<ol>
<li>Das Programm</li>
<li>Hintergründe</li>
<li>Vision</li>
</ol>
<p>some random text</p>
</body>
</html>
CSS
html {
background-color: #333;
width: 100%;
height: 100%;
}
body {
font: 15px arial;
width: 210mm;
height: 297mm;
background-color: #fff;
margin: 10px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 25mm 15mm 20mm 35mm;
}
h1 {
margin: 0 0 15px 0;
}
ol {
margin: 0;
}
li {
margin: 10px 0;
}