mdBook icon indicating copy to clipboard operation
mdBook copied to clipboard

Incorrect color for print page inline code blocks in headers

Open ehuss opened this issue 3 years ago • 1 comments

Inline code blocks in headers are rendered with a black background on Safari and Chrome. This does not seem to affect Firefox.

Chrome:

image

Safari:

image

Firefox:

image

ehuss avatar Nov 21 '22 17:11 ehuss

I suspect the problem stems from src/theme/css/print.css

You might have accidentally turned on 'print' preview layout in your CSS inspector in those browsers.

Can the background-color be removed, or was there a reasoning for this during print?

code {
    background-color: #666666;
    border-radius: 5px;

    /* Force background to be printed in Chrome */
    -webkit-print-color-adjust: exact;
}

quackenbush avatar Jan 01 '23 04:01 quackenbush

I believe @ehuss meant the print preview - look at the issue title.

Several related issues here:

  • The dark gray background is probably not a good choice for printing on paper.
  • The foreground color comes from from the theme, it's discussed in #1934.
  • The foreground/background combination may be hard to read.
  • The behavior across browsers should be consistent, but it's not.
  • The PDF output generate by mdbook-pdf is affected, the result is hard to read in some PDF reader apps, see https://github.com/HollowMan6/mdbook-pdf/issues/26

proski avatar Jul 24 '23 22:07 proski