Tailwindcss: `italics` rule breaks encoding in print

Created on 1 Dec 2019 · 5Comments · Source: tailwindlabs/tailwindcss

Using the italics class breaks the encoding of my page and results in garbled text when trying to print.

using:
chrome: Version 78.0.3904.108 (Official Build) (64-bit)
mac-os: Version 10.15.1 (19B88)

Using Chrome's print preview I get the following preview with garbled text instead of the expected text of Making this text italic breaks the encoding for this document in print (which you can see in the background).
Screenshot 2019-12-01 at 12 01 29

When I remove either the italic class or the tailwind import the issue goes away. Applying the css font-style: italic manually without any tailwind works normally and doesn't cause any issue.

I've created a minimal reproduction of the issue here https://codesandbox.io/s/static-cmn0x. The issues is reproducible by following these steps:

Open codesandbox link
In Codesandbox, "Open page in new window" (https://cmn0x.csb.app/)
Open print preview (⌘+p)
Observe the garbled text

Source

andrenanninga

Most helpful comment

I found a issue concerning this bug in the chromium bugtracker. I will close the issue here.

andrenanninga on 1 Dec 2019

👍2

All 5 comments

I really can't think of any reason why things would get messed up when using .italic besides something being wrong with the fonts you're using. Since you're not even using custom fonts, I'm not sure where this could be coming from but I can say it looks good on Safari and Firefox (not Chrome Canary though).

Have you checked how this looks like on other Chromium-based browsers?

hacknug on 1 Dec 2019

Dug into it a bit more and seems to be an issue with the BlinkMacSystemFont font. I've created an example without tailwind but with a list of <p> each using one of the font-families defined in the tailwind fontstack. (https://codesandbox.io/s/static-uwipl)