I’m currently developing a client-side javascript program that allows users to preview documents for printing in the browser via an API call.
The goal is to display the documents in A4 format, each containing a preview of HTML content extracted from a JSON file obtained through the API.
An example of the HTML structure i obtain:
<div class="a4" style="padding: 20px" size="A4" contenteditable="true" fileid="1">
<div class="content" fileid="1" contentid="1">
<p class="paragraph-wrapper" lang="it-IT" align="left">
<span style="font-family: Arial, serif;">
<span style="font-size: small;">
<span style="font-size: small;">
Some text here1
</span>
<span style="font-size: small;">
Some text here2
</span>
<span style="font-size: small;">
Some text here3
</span>
</span>
</span>
</p>
<p class="paragraph-wrapper" lang="it-IT" align="left">
<span style="font-family: Arial, serif;">
<span style="font-size: small;">
<span style="font-size: small;">
Other text here1
</span>
<span style="font-size: small;">
Other text here2
</span>
<span style="font-size: small;">
Other text here3
</span>
</span>
</span>
</p>
</div>
</div>
I uploaded an image to provide more context.
The main issue I’m encountering arises when the text within one of the HTML blocks exceeds the maximum height of the container (.content), as indicated by the current display with a blue border. Currently, I’m addressing this problem by managing the transfer of a node from one page to another.
My starting approach involves iterating through nodes with the .paragraph-wrapper class. When one of these nodes reaches the maximum height, I add it to a new dynamically created .a4 page. However, iterating the nodes in its entirety, I lose precision in the text positioning within the new block, especially if the text/child nodes inside the parent node is/are a lot.
So, I’m looking for a way to split a container node, such as .paragraph-wrapper, into two distinct nodes if one of its children exceeds the bottom border of the .content container. Each new node should retain the same parent divs as the original node and the associated inline styles.
An example of what I would like to achieve starting from the previous code:
<div class="a4" style="padding: 20px" size="A4" contenteditable="true" fileid="1">
<div class="content" fileid="1" contentid="1">
<p class="paragraph-wrapper" lang="it-IT" align="left">
<span style="font-family: Arial, serif;">
<span style="font-size: small;">
<span style="font-size: small;">
Some text here1
</span>
<span style="font-size: small;">
Some text here2
</span>
<span style="font-size: small;">
Some text here3
</span>
</span>
</span>
</p>
<p class="paragraph-wrapper" lang="it-IT" align="left">
<span style="font-family: Arial, serif;">
<span style="font-size: small;">
<span style="font-size: small;">
Other text here1
</span>
<span style="font-size: small;">
Other text here2
</span>
</span>
</span>
</p>
</div>
</div>
***Here finish the first A4 page***
***Here start the second A4 page***
<div class="a4" style="padding: 20px" size="A4" contenteditable="true" fileid="1">
<div class="content" fileid="1" contentid="2">
<p class="paragraph-wrapper" lang="it-IT" align="left">
<span style="font-family: Arial, serif;">
<span style="font-size: small;">
<span style="font-size: small;">
Other text here3
</span>
</span>
</span>
</p>
</div>
</div>
A portion of my current code:
const content = document.querySelectorAll('.content');
const a4HeightWithoutPadding = evaluateContentHeight();
const lastContent = content[content.length - 1];
staticNodeArray.forEach(node => {
// Append node to last content element
lastContent.appendChild(node);
node.className = 'paragraph-wrapper';
const nodeOffsetBottom = node.offsetTop + node.offsetHeight;
// If the parent node reaches the bottom side of .content, make a new A4 page
if (nodeOffsetBottom > a4HeightWithoutPadding) {
// Increment contentId for new page
contentId += 1;
// Create a new A4
const newPage = createNewPage(fileId, contentId);
// Append the A4 to the container
container.appendChild(newPage);
// Moving the overflowed content to the new A4
const newContent = newPage.querySelector('.content');
newContent.appendChild(node);
}
});
// Create a new A4 page
function createNewPage(fileId, contentId) {
const newA4Page = document.createElement('div');
newA4Page.className = 'a4';
newA4Page.setAttribute('style', 'padding: 20px');
newA4Page.setAttribute('size', 'A4');
newA4Page.setAttribute('contenteditable', 'true');
newA4Page.setAttribute('fileId', fileId);
newA4Page.innerHTML = `<div class="content" fileId=${fileId} contentId=${contentId}></div>`;
return newA4Page
}
function evaluateContentHeight() {
const a4NodeList = document.querySelectorAll('.a4');
// The last A4 created
const a4 = a4NodeList[a4NodeList.length - 1];
// Calculate the A4 height
const a4Height = a4.clientHeight;
// Calculate the value of top and bottom padding
const style = window.getComputedStyle(a4);
const paddingTop = parseFloat(style.paddingTop);
const paddingBottom = parseFloat(style.paddingBottom);
// Calculate the final value of A4 height without the padding of the A4
const a4HeightWithoutPadding = a4Height - paddingTop - paddingBottom;
return a4HeightWithoutPadding
}
