diegomura
Text is Not Centered in Line Height
Describe the bug The text rendered is not centered in the line height. While this is expected behavior for type-setting programs such as Adobe InDesign and Affinity Publisher, it is not expected when working with web technologies. Encountered this when converting a design in Figma to React PDF.
I'm unsure if this is intended behavior, so reporting this as a bug instead of a feature request.
To Reproduce Steps to reproduce the behavior:
- Go to this repl session.
- Hover over the "Hello, World" text and notice that it hugs the top and left of the bounding box, with a large area below it that is the rest of the leading.
Expected behavior Expect text to be centered in the line height box (leading) instead of hugging the top of the line height box.
Screenshots
An example of how text is positioned in the leading with HTML:
An example of how text is positioned in the leading with react-pdf:
Desktop (please complete the following information):
- OS: Windows 11
- Browser: Firefox 111.0.1
- React-pdf version: v3.1.9
I have also been investigating this issue. I initially thought it might be something we were doing, loading an incompatible font perhaps?
However after further investigation, I can see this issue occurring in the official React PDF playground: https://react-pdf.org/repl
Replace the subtitle Text element style tag with the following css to see the result.
Replace this
<Text style={styles.subtitle}>
With:
<Text style={{lineHeight: 3, color: "red"}}>
Before:
After:
As @joebobmiles made clear in his initial comment, the text should be vertically centred, as the line-height should applied equally to both the top and the bottom of the text.
