I’ve been attempting to implement page-breaks in Vue.js 3. I’ve been using the following CSS, it appears that it does work, because I can modify the titlePage for example center/not center it. However the parameter for class “.page-break” seems to ellude me. You can see all my attempts to make it work below. There are no other external CSS imports used. I am using Vue-Showdown for markdown to HTML conversion.
None of the page-break attempts you can see down below actually work and I am super confused on why they are not.
My use case is that I need to uise PagedJS to generate a paginated content to update my TOC with page numbers, which I would print afterwards.
Been tearing my hair out why this isn’t working.
<html>
<head>
<title>Print Markdown</title>
<style>
@page {
size: A4;
margin: 20mm;
@bottom-right-corner {
vertical-align: center;
text-align: center;
background: #fafafa;
color: purple;
content: "P. " counter(page);
}
}
h1 {
break-before: page;
page-break-before: always;
}
.pagedjs_page {
break-before: page;
page-break-before: always;
}
@media print {
h1, h2 {
break-before: page;
page-break-before: always;
}
.page-break {
break-before: page;
page-break-before: always;
}
}
@media screen {
h1, h2 {
break-before: page;
page-break-before: always;
}
.page-break {
break-before: page;
page-break-before: always;
}
}
table, figure {
page-break-inside: avoid; /* Avoid breaking these elements across pages */
}
.title-page {
break-after: always;
page-break-before: always;
text-align: center;
padding-top: 60mm;
}
.page-break {
break-before: page;
page-break-before: always;
}
.content-page {
padding: 15mm 20mm;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 10mm auto;
}
</style>
</head>
<body>
<div class="title-page">${titleContent}</div>
<div class="content-page">${restOfContent.innerHTML}</div>
<div class="footer"></div>
</body>
</html>
I tried manipulating the page-breaks using different formats, types, but it doesn’t seem to break on anything.