Upgrading from @react-pdf/renderer 4.1.2 to 4.1.3 causes a variety of issues with `lineHeight` styles

[EvHaus]

Describe the bug

Very similar to #2369, I'm seeing issues with @react-pdf/renderer version 4.1.3 where adding a lineHeight style to the page causes all sorts of problems. Possibly caused by this commit or maybe this one?

The issue also exists in the latest 4.1.6 version.

To Reproduce

For example, if you add a lineHeight, any content rended via the render={() => 'foobar'} prop, won't render anymore. See REPL: https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e659a004f003619b006f09229180c00243123e002ca002e18011801d005600be07da74e5400a8614b00138b0026186e4c22460022792003bbda1ee0c6001e84ccc83780542a882e8199959d80801b8c8c80094307980a0b86800c474ecc11c6cf0a91151d0b04392c8800 (Removing the lineHeight style makes the text re-appear)

Additionally, a lineHeight value of 1.5 in 4.1.2 is half the size that it is in 4.1.3.

After some debugging, looks like rolling back @react-pdf/renderer to 4.1.2 isn't enough. I need to rollback to the following dependencies to make the problems go away:

• @react-pdf/renderer: 4.1.2
• @react-pdf/layout: 4.1.1
• @react-pdf/reconciler: 1.1.1
• @react-pdf/render: 4.0.1
• @react-pdf/stylesheet: 5.0.1
• @react-pdf/textkit: 5.0.0

I tried to figure out which specific package causes the issues, but it seems like it's a combo of several of them.

Expected behavior

A document with a lineHeight of 1.5 should have the same rendering between 4.1.2 and 4.1.3.

Screenshots

See above.

Desktop:

• OS: MacOS
• Browser: Rendering via Bun (server-side)
• React-pdf version: 4.1.3

[biller-aivy]

We have similar issues with v3, so maybe it’s a dependency that’s being installed? For us, the font appears much smaller when running locally in the web, but in the render, everything is much larger.

[PieterT2000]

Having the same issue as @EvHaus. The problem started when I upgraded from V3 to V4.

[biller-aivy]

Having the same issue as @EvHaus. The problem started when I upgraded from V3 to V4.

I guess it is a peer dependency, can you try to Go back? Should also Not Wirkung anymore.

[EvHaus]

I tracked it down to these 2 packages. To temporarly fix this problem, I've set these pnpm resolution/overrides:

"resolutions": {
	"@react-pdf/layout": "4.1.1",
	"@react-pdf/stylesheet": "5.0.1"
}

So it seems like the bug was introduced somewhere in:

1. @react-pdf/[email protected] and/or
2. @react-pdf/[email protected]

Upgrading to either of those versions (or greater) starts to cause issues.

[diegomura]

This is likely caused by https://github.com/diegomura/react-pdf/pull/2952. but it's unclear yet if it's a bug (despite the render prop example). Before it line height was incorrectly computed. Can you guys show the css styling for those text with how are you defining line height?

[EvHaus]

Thanks for taking a look @diegomura. I created a minimal repo: https://github.com/EvHaus/react-pdf-2988. The line height is defined as:

const styles = StyleSheet.create({
  page: {
    lineHeight: 1.6,
  }
});

Here's the before and after:

I can get the old spacing back by changing the 1.6 value to something around 0.975. Is it expected that line height are about half the size of what they were before?

And if I don't specify any lineHeight at all it's actually the equivalent of setting 0.7 -- so really small. I would have expected the default to be closer to 1.

[Sushants-Git]

@diegomura are there any updates on this issue? thanks for your time.

[Sushants-Git]

one more question if a View component has a lineHeight property and inside it, it has two Text components one with fontSize 16px and other one 20px if the lineHeight is 2 on the View component, then will the respective lineHeight's be 32px and 40px for react-pdf like it is in the web.

[EvHaus]

I've confirmed this is indeed caused by #2952. If it helps others, these are the pnpm patches I'm using to work around this bug for now:

@react-pdf__layout.patch @react-pdf__stylesheet.patch

[Sushants-Git]

hey @EvHaus , this patch works for us as well thanks a lot! (We made the same changes to v4.3.0)