First-letter prints incorrectly in Chrome #21771

zam6ak · 2017-01-18T15:07:49Z

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>

The text was updated successfully, but these errors were encountered:

zam6ak · 2017-01-18T15:10:59Z

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....

perttumyry · 2017-02-09T08:36:16Z

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

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

nataniel · 2017-03-31T18:15:13Z

It's not display headings, it's every Hx.

This is all fine:

<h1>Test</h1>
<h2>Test</h2>
<h3>Test</h3>
<h4>Test</h4>

All of those display with first letter problem:

<div class="row">
    <div class="col-6">
        <h1>Test</h1>
    </div>
    <div class="col-6">
        <h2>Test</h2>
    </div>
    <div class="col-6">
        <h3>Test</h3>
    </div>
    <div class="col-6">
        <h4>Test</h4>
    </div>
</div>

Tested with v4.0.0-alpha.6

patrickhlauke · 2017-04-19T08:58:57Z

from #22308 @bschlosser

This doesn't seem to be font related. I tried with sans-serif, serif, and Arial on macOS and they all exhibit the same up and down shift.

You can make the issue appear using the Dev Tools

(Three dot menu)->More Tools->Rendering set Emulate CSS Media to print

Inspect the h2 element for "Easy to get Started"

In the Styles pane, disable and reenable the font-size property on the h2 class

You should then see the problem.

To temporarily "fix it", scroll down in the Styles pane and find the
@media print *, ::after, ::before, blockquote::first-letter, blockquote::first-line, div::first-letter, div::first-line, li::first-letter, li::first-line, p::first-letter, p::first-line selector and disable all of the text and box shadow properties, it looks correct, both on screen and printed.

More specifically it looks like the div::first-letter selector in combination with the text and box shadow properties are the key.

patrickhlauke · 2017-04-19T09:00:38Z

Issue can also be observed in code blocks in the docs (where the opening "<" is too high up). Possibly related, some lines get cut off between pages when printing.

patrickhlauke · 2017-04-19T09:01:53Z

Possibly also related #22425

shusain · 2017-04-25T03:11:50Z

Seems to be okay in 4.0.0 alpha 5 but seeing a similar issue with alpha 6

zarembas · 2017-05-04T15:59:29Z

Also in inputs:

Wardrop · 2017-05-09T23:46:04Z

I see this also in the latest Alpha. Working around it by disabling print styles $enable-print-styles: false;

nicrider · 2017-05-23T19:29:01Z

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>

grantzau · 2017-05-28T10:29:52Z

Same problem for me for text within <sup> element. I cannot fix it by overwriting CSS with any of the suggested solutions.

It seems that the problem occurs already when the text-shadow and box-shadow properties are set in the first place (by the bootstrap print stylesheet). So, no matter what I set them to, the problem persists.

The only way I can fix it is by removing the CSS by setting $enable-print-styles: false; (or I could edit _print.scss and remove the text-shadow and box-shadow declarations).

nafg · 2017-07-11T01:49:02Z

Can someone explain why/how this happens?

patrickhlauke · 2017-07-11T09:38:42Z

Short explanation: it's a Chrome bug. I actually found the issue in the Chrome bug tracker, but as I commented on it the issue was moved/locked...in any case, it was https://bugs.chromium.org/p/chromium/issues/detail?id=739800 (if anybody else has more joy seeing it with their credentials)

Bootstrap itself doesn't use any `::first-letter` or `::first-line` styles. These selectors also cause(d) problems in IE11 (see h5bp/html5-boilerplate#1799) and currently cause a nasty rendering bug in Chrome where the first letter is vertically shifted (see #21771) As h5bp has now removed these as well, no need to keep and comment them out. See h5bp/html5-boilerplate#1961 / h5bp/html5-boilerplate#1962

nafg · 2017-07-12T03:33:39Z

@patrickhlauke FWIW I can view the bug without signing in. Thanks for the link. :)

patrickhlauke · 2017-07-12T07:58:53Z

@nafg yes the bug was reopened to the public after a friend at Google queried it being restricted https://bugs.chromium.org/p/chromium/issues/detail?id=739800#c6

Fixes twbs/bootstrap#21771 which affected printing the tutorials to PDF.

bardiharborow added css v4 labels Jan 19, 2017

mdo modified the milestone: v4.0.0-beta.2 Jan 21, 2017

bardiharborow mentioned this issue Feb 7, 2017

Google Chrome print first-letter #21926

Closed

linsolas added a commit to linsolas/resume that referenced this issue Mar 9, 2017

workaround for twbs/bootstrap#21771

1b1a58a

patrickhlauke mentioned this issue Apr 19, 2017

Bootstrap default font has issue with Chrome Print #22308

Closed

patrickhlauke changed the title ~~Display Headings break in print~~ First-letter prints incorrectly in Chrome Apr 19, 2017

patrickhlauke self-assigned this Apr 20, 2017

mdo removed this from the v4.0.0-beta.2 milestone Jun 18, 2017

This was referenced Jul 11, 2017

Remove ::first-letter and ::first-line selectors from print styles #23044

Merged

::first-letter in print style can cause incorrect rendering in Chrome h5bp/html5-boilerplate#1961

Closed

patrickhlauke closed this as completed in #23044 Jul 11, 2017

wolfy1339 mentioned this issue Jul 23, 2017

Print view: First letter displayed bellow the line. #23145

Closed

nsoranzo added a commit to nsoranzo/training-material that referenced this issue Aug 31, 2017

Update bootstrap to v4.0.0-beta

40bf07f

Fixes twbs/bootstrap#21771 which affected printing the tutorials to PDF.

nsoranzo mentioned this issue Aug 31, 2017

Update bootstrap to v4.0.0-beta galaxyproject/training-material#494

Merged

rluba mentioned this issue Nov 9, 2018

Formatting as title causes breaks editing due to wrong cursor position (in Safari) basecamp/trix#567

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

First-letter prints incorrectly in Chrome #21771

First-letter prints incorrectly in Chrome #21771

zam6ak commented Jan 18, 2017

zam6ak commented Jan 18, 2017

perttumyry commented Feb 9, 2017

nataniel commented Mar 31, 2017

patrickhlauke commented Apr 19, 2017

patrickhlauke commented Apr 19, 2017

patrickhlauke commented Apr 19, 2017

shusain commented Apr 25, 2017

zarembas commented May 4, 2017

Wardrop commented May 9, 2017 •

edited

Loading

nicrider commented May 23, 2017 •

edited

Loading

grantzau commented May 28, 2017

nafg commented Jul 11, 2017

patrickhlauke commented Jul 11, 2017

nafg commented Jul 12, 2017

patrickhlauke commented Jul 12, 2017

First-letter prints incorrectly in Chrome #21771

First-letter prints incorrectly in Chrome #21771

Comments

zam6ak commented Jan 18, 2017

zam6ak commented Jan 18, 2017

perttumyry commented Feb 9, 2017

nataniel commented Mar 31, 2017

patrickhlauke commented Apr 19, 2017

patrickhlauke commented Apr 19, 2017

patrickhlauke commented Apr 19, 2017

shusain commented Apr 25, 2017

zarembas commented May 4, 2017

Wardrop commented May 9, 2017 • edited Loading

nicrider commented May 23, 2017 • edited Loading

grantzau commented May 28, 2017

nafg commented Jul 11, 2017

patrickhlauke commented Jul 11, 2017

nafg commented Jul 12, 2017

patrickhlauke commented Jul 12, 2017

Wardrop commented May 9, 2017 •

edited

Loading

nicrider commented May 23, 2017 •

edited

Loading