Letter head print format carrying over multiple lines

Frappe Framework Print Formats
1

Hello,

I am trying to replicate the following letter head:


printhead


Here’s my html code:

<meta charset="UTF-8">
<meta content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morphing Machines Private Limited</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <header class="letterhead-header" style="padding: 15px;">
        <div class="row">
            <div class="col-4 header-logo" style="display: flex; align-items: center;"> <img
                    src="/files/mm-jpg-logo-removebg.png" class="logo" alt="Morphing Machines Logo"
                    style="width: 50px;">
                <div class="header-text">
                    <p style="font-weight: bold; color: #B40000;">REDEFINE</p>
                    <p style="font-size: 0.85em; margin-bottom: 0;">Reconfigurable Silicon Cores</p>
                </div>
            </div>
            <div class="col-8 company-info text-end"
                style="font-size: 0.85em; color: #666; padding: 10px; text-align: right; margin-top: 10px;">
                <h5 class="company-name" style="color: #B40000;">Morphing Machines Private Limited</h5>
                <address class="company-address"
                    style="display: flex; flex-direction: column; justify-content: space-between; line-height: 1.2; margin-bottom: 5px;">
                    #17, 10A Main, 16th Cross, Malleswaram<br> Bangalore 560 055<br> <a href="www.morphing.in"
                        style="color: #B40000;">www.morphing.in</a> </address>
            </div>
        </div>
    </header>
    <hr>
</div>

What’s happening:


When we preview this letter head it appears to be correctly adjusting to the viewport width, however when we go ahead and generate a pdf out of it, it blows apart (slightly exaggerated, but more specifically the content is bypassing trim space and carrying over new lines).


Correct preview:


image
image1026×463 17.6 KB


PDF Generated View


image
image1042×358 18.1 KB


Summary so far:


Now I tried varies ways to prevent overlapping the trim space (Left margin, Right margins) but no joy folks! Any html expert who can help around with this code? What am I doing wrong here?
2

I’m curious if this only happens in the preview. I’ve seen cases when printing to the proper paper size or choosing to print to an actual printer displays correctly when the preview does not.

3

Use vendor-prefixed flexbox instead of bootstrap. Easier, faster, better.
Don’t try to import any external libraries and stylesheets as wkhtmltopdf won’t be able to load them.

4

Alright I will try. Thanks man.