bootstrap: First-letter prints incorrectly in Chrome

When using display headings and trying to print (Ctrl+P) the first letter of the heading breaks layout. Tested on Chrome v55

Here is sample HTML code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Print Test</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</head>

<body>

    <div class="container-fluid">
        
        <div class="row">
            <div class="col">
                <h1 class="display-4">This heading fails to print</h1>
                <p class="lead">This heading fails to print correctly.</p>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <h1 class="display-1">Display 1</h1>
                <h1 class="display-2">Display 2</h1>
                <h1 class="display-3">Display 3</h1>
                <h1 class="display-4">Display 4</h1>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <h1 id="h1-heading">h1 heading</h1>
                <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

                <h2 id="h2-heading">h2 heading</h2>
                <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

                <h3 id="h3-heading">h3 heading</h3>
                <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

                <h4 id="h4-heading">h4 heading</h4>
                <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

                <h5 id="h5-heading">h5 heading</h5>
                <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

                <h6 id="h6-heading">h6 heading</h6>
                <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            </div>
        </div>

    </div>

</body>

</html>

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 11
Comments: 15 (6 by maintainers)

Commits related to this issue

workaround for https://github.com/twbs/bootstrap/issues/21771 — committed to linsolas/resume by linsolas 7 years ago
Remove ::first-letter and ::first-line selectors from print styles Bootstrap itself doesn't use any `::first-letter` or `::first-line` styles. These selectors also cause(d) problems in IE11 (see ht... — committed to twbs/bootstrap by patrickhlauke 7 years ago
Update bootstrap to v4.0.0-beta Fixes https://github.com/twbs/bootstrap/issues/21771 which affected printing the tutorials to PDF. — committed to nsoranzo/training-material by nsoranzo 7 years ago

Most upvoted comments

I see this as well in alpha 6. Overriding the ::first-letter in the header like this seemed to work around the issue:

<style media="print">
::first-letter{
  margin: 0;
  padding: 0;
}
</style>

+20

nicrider on May 23, 2017

As a temporary solution before this is fixed, this seemed to give proper print results for h1.

h1::first-letter {
    margin-top: 0;
}

+20

perttumyry on Feb 9, 2017

Here is how browser renders the page vs what the print preview looks like. Please note that changing from “Save as PDF” to actual printer has no effect…

zam6ak on Jan 18, 2017