Nested text styling does not work on Windows
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
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:
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
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 Are you on Intel or Apple Silicon Mac? I'm on Macbook Air M3 and have still encountered this issue.
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"
}
},
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
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.
I'm on MacOS and downgrading to "@react-pdf/renderer": "3.4.2" did not work
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.
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.
Updating @react-pdf/renderer to version 3.4.5 solved the issue for us :)
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