react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Nested text styling does not work on Windows

Open RKukharchuk opened this issue 1 year ago • 9 comments

Describe the bug

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

Rendering this document with Roboto is messing up the formatting of next next blocks:

 <Document>
      <Page size="LETTER" wrap>
        <Text>
          <Text style={{ fontFamily: "Roboto", fontWeight: 'bold' }}>
            Should be bold
          </Text>
          <Text> Shouldn't be bold</Text>
        </Text>
      </Page>
    </Document>

Produces the following result image

Making the second part bold is doing nothing:

 <Document>
      <Page size="LETTER" wrap>
        <Text>
          <Text>
            Shouldn't be bold
          </Text>
          <Text style={{ fontFamily: "Roboto", fontWeight: 'bold' }}> Should be bold</Text>
        </Text>
      </Page>
    </Document>

Produces the following result: image

Expected behavior Text formatted according to the fontWeight.

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • React-pdf version 3.4.3

PS: It works perfectly on MacOS

RKukharchuk avatar Apr 24 '24 18:04 RKukharchuk

After future inverstigations it looks like it's related to fonts resolution of text. Downgrading @react-pdf/layout to 3.11.5 helps to resolve the issue

RKukharchuk avatar Apr 24 '24 19:04 RKukharchuk

@RKukharchuk Are you on Intel or Apple Silicon Mac? I'm on Macbook Air M3 and have still encountered this issue.

Fry98 avatar May 01 '24 14:05 Fry98

I'm on Apple Silicon and I'm also having this issue, downgrading @react-pdf/layout made it work for me.

If anyone is wondering about how to do it, this how you do it with PNPM, update your package.json to resolve the layout version that we want:

"pnpm": {
    "overrides": {
      "@react-pdf/layout": "3.11.5"
    }
  },

focux avatar May 09 '24 03:05 focux

Doesn't seem to work for me, even with the downgrade to "@react-pdf/layout": "3.11.5".

Do we also need to downgrade the "@react-pdf/renderer" version? I'm at 3.4.4

ipranay avatar Jul 09 '24 05:07 ipranay

Doesn't seem to work for me, even with the downgrade to "@react-pdf/layout": "3.11.5".

Do we also need to downgrade the "@react-pdf/renderer" version? I'm at 3.4.4

Answering my own question, going back to "@react-pdf/renderer": "3.4.2" seems to work.

ipranay avatar Jul 09 '24 05:07 ipranay

I'm on MacOS and downgrading to "@react-pdf/renderer": "3.4.2" did not work

life-engineered avatar Sep 11 '24 06:09 life-engineered

I'm using yarn, importantly with the react-pdf-html package.

Uninstalling everything, reinstalling renderer, installing layout 3.11.5, adding "resolutions: {@react-pdf/[email protected]}", and finally dropping down to 3.4.2 for renderer

This worked for me it seems reliably.

landlessfarm avatar Sep 14 '24 22:09 landlessfarm

The font selection has been fixed in @react-pdf/[email protected] (see Changelog), which has been included in @react-pdf/[email protected] (see Changelog.

So basically if you update @react-pdf/renderer to version 3.4.5 the issue should be solved, or at least this was my case.

crohn avatar Sep 26 '24 10:09 crohn

Updating @react-pdf/renderer to version 3.4.5 solved the issue for us :)

alex-boehm avatar Sep 27 '24 10:09 alex-boehm

Hello people I am still having the issue even tho I am using "@react-pdf/renderer": "3.4.5",

Error parsing style attribute "font-family: GT-Walsheim" for tag: P TypeError: cssParse is not a function

Vanals avatar Nov 04 '24 10:11 Vanals