Poor display when printing

[paulirish]

When printing, the site loses much of its valuable content and identify. Note the logo and histogram curves are entirely gone.

Before / After:

This is due to a few CSS lines in bootstrap 3:

@media print {
  *, *:before, *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }

They're quite troublesome and plenty of folks have sought a solution to disable them, however there's nothing reasonable short of making a custom bootstrap build without them. We could do that, but it's a bit of a fight with the current build system.

Bootstrap 4 and 5 don't include these troublesome @print styles, thankfully.

@spncr do you have plans to remove the site's use of bootstrap 3 with the new styleguide implementation (#2) ?

If so, I expect these issues to get fixed automagically. If not, I can wrestle up a solution with this older bootstrap release.

[migurski]

+1 that print is important. A common use case we anticipate for these score pages is PDF export for inclusion in evidence.

[paulirish]

I did some more work and exploration here... here's a report.

since we're nearing launch i'm assuming we only want to stick to minor changes, yes? I have explored some larger ones, but naturally these would wait till post-launch.

• print css: improve the appearance when printing #15 is the most minimal/safe i can go. IMHO it'd make sense to merge pre-launch.
• the various tab controls (like the 3 metrics) IMO should all be visible in a printed. I did some work on this, but it's slightly more invasive.
• the next set of fixes are pretty much impossible with bootstrap v3 (partially described by this issue.. but they have lots of annoying print styles that v4 and v5 dont).
• I started a branch to upgrade to bootstrap v4. it did break in a few places, so I've been migrating all those. i'm not done, but it's coming along. Once it's in a good state, I was going to again do the jump to bootstrap v5 (and address any breakages there, too.)… based on the v5 migration guide, that one looks quite a bit easier. Regardless, both of these require quite a bit of QA to confirm we haven't regressed style/layout. But I'm pretty sure this bootstrap upgrade is a blocker to having ideal print formatting.
  • We could also set up some visual regression testing prior to these bootstrap PRs so we have higher confidence about any changes.