Creating a dynamic sidebar in wkhtmltopdf that tracks a changing text span

Question

Creating a dynamic sidebar in wkhtmltopdf that tracks a changing text span

I am currently working on incorporating a sidebar to the left side of a generated PDF whenever there is text enclosed within a span with the class name sidebar. One major issue I am encountering is that when the text spans across multiple lines, calculating the height or coordinates of the span in JavaScript within wkhtmltopdf results in inaccurate values. This makes it difficult for me to accurately size or position the generated sidebar element. I am open to any suggestions or ideas that could help me resolve this issue.

Some of the approaches I have experimented with include:

Creating the sidebar as a :before pseudo-element within the span (as shown below). When setting the span's position to relative and the :before pseudo-element to absolute with properties like height: 100% and left: 0, it does create a bar that matches the height of the span but it appears inside the span and I struggle to find the correct left offset value to reposition the bar. In wkhtmltopdf, the getBoundingClientRect().left and offset().left return values such as 8 for the :before element (possibly due to page margin) and 0 for its parent span.
Implementing the sidebar as a :before pseudo-element without setting its parent to relative. While the sidebar does appear at the left edge of the PDF in this scenario, I face challenges in determining the accurate height of the span to apply to the sidebar. For instance, a 3-line span may return a height of over a thousand pixels when using offsetHeight. Similar issues arise when subtracting getBoundingClientRect().top from getBoundingClientRect().bottom. Block elements exhibit the same behavior, suggesting that wkhtmltopdf boxes extend to the bottom of the page.
Employing the sidebar as a :before pseudo-element, positioned absolutely at the left edge of the page and resized by inserting line breaks into the content style to match the number of soft breaks in the span using getClientRects(). Within wkhtmltopdf, getClientRects().length may yield unexpected values, such as 63 for a 3-line span.
Adding two div elements before and after detecting the span, followed by utilizing canvas to draw a line between them. However, this approach encountered roadblocks when the second div returned negative values for offset().top.
Regarding the JavaScript, I have experimented with both embedding it in the document and executing it from the command line using --run-script. Unfortunately, I encountered similar issues in both cases.

<style>
  .sidebar { position: relative; background-color: yellow; }
  .sidebar::before { position: absolute; content: ''; border-left: 2px #000 solid; left: 0; height: 100%; }
</style>

<body>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span class="sidebar">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</span> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</body>

Here's a visual representation of my desired outcome. The left sidebar here matches the height of the highlighted yellow text.

javascript html css wkhtmltopdf

Answer 1

Answer №1

Here is the code snippet:

</<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            height: 842px;
            width: 595px;
        }

        .sidebar {
            background-color: yellow;
        }

        .sidebar::before {
            position: fixed;
            content: '';
            border-left: 2px #000 solid;
            left: 0;
        }
    </style>
</head>

<body>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    <span class="sidebar">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </span> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            var span = document.getElementsByClassName('sidebar')[0];
            document.styleSheets[0].addRule('.sidebar::before', 'height: ' + span.offsetHeight + 'px;');
        });
    </script>
</body>


</html>

Note: An additional body style of height and width was added for better compatibility with wkhtmltopdf javascript to display the correct span.offsetHeight. This adjustment was necessary as without it, the height appeared larger than expected.

During testing in Chrome, the body style wasn't required like for wkhtmltopdf. As per requirements, you can adjust the width/height pixels accordingly, considering any margins present.

Answer 2

Here is the code snippet:

</<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            height: 842px;
            width: 595px;
        }

        .sidebar {
            background-color: yellow;
        }

        .sidebar::before {
            position: fixed;
            content: '';
            border-left: 2px #000 solid;
            left: 0;
        }
    </style>
</head>

<body>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    <span class="sidebar">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </span> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            var span = document.getElementsByClassName('sidebar')[0];
            document.styleSheets[0].addRule('.sidebar::before', 'height: ' + span.offsetHeight + 'px;');
        });
    </script>
</body>


</html>

Note: An additional body style of height and width was added for better compatibility with wkhtmltopdf javascript to display the correct span.offsetHeight. This adjustment was necessary as without it, the height appeared larger than expected.

During testing in Chrome, the body style wasn't required like for wkhtmltopdf. As per requirements, you can adjust the width/height pixels accordingly, considering any margins present.

Creating a dynamic sidebar in wkhtmltopdf that tracks a changing text span

Answer №1

Similar questions

Is there a way to determine which label in the Material UI default theme affects the default border color, specifically excluding the focus or hover border?

"Optimizing navigation with dynamic link routing in AngularJS

unable to use 'await' keyword to delay the code execution until a function finishes

Encountering difficulties in generating a new user account on Microsoft through Firebase Authentication

Creating a dynamic web design with HTML and CSS: how to overlay multiple styles of text on

Retrieving the hidden field value using JavaScript on the server side

Issues with Angular ng-click event activation on dialog box button

Retrieve the most recent version of the document stored in MongoDB

The API Key containing a colon is causing a TypeError when trying to parse it because forEach is not recognized as a function

Step-by-step guide on achieving a radiant glow effect using React Native

I'm working on implementing flip cards in a React app using CSS, and everything is coming together smoothly except for an unwanted border that is showing up outside of the card. Any suggestions on how to

Angular2 allows users to move text by dragging it with the cursor while holding down the mouse button

Navigating through JQuery

Add hover effects to components inside MuiButton

I'm facing a challenge with retrieving the controller's scope in my Angular directive

Extending the Angular Date filter with translation capabilities

Using JavaScript to ensure that a div is not hidden on page load if a checkbox is unchecked

React Component Throws Error: Thunk Fetch is Not Defined

Display a login/logout button on the navbar of an AngularJS app page based on certain conditions

From dividing into three sections to splitting into two sections