diegomura / diegomura/react-pdf
Setting vertical margins to 0 on Text fields when lineHeight is 3 results in too much space between elements.
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
I'm building an app that generates PDFs (manuscripts) for authors to submit to their agents. Agents have particular tastes.
One requirement is that the manuscripts are "double-spaced". In Word (or some other word processor) this is pretty easy. In a React app, we need to use lineHeight to try to get close to what "double-spaced" is.
Imagine a `View` with a bunch of `Text` elements with the line height set to 2. In HTML, this would be a bunch of `
` tags in a `
This results in additional spacing between the text elements, requiring vertical margins on the elements to be set to 0.
When `Text` elements are set with a lineHeight of 2 and given a vertical margin of 0, the additional spacing between paragraphs seems right in React-PDF; however, a lineHeight of 2 does not really equate to what a word processor would produce with double-spaced paragraphs. It's more like a lineHeight of 3 (4 is too big).
**The bug is:** If you set a lineHeight of 3 and a vertical margin of 0, there's way too much space between the paragraphs (elements).
Further, using negative margins doesn't seem to help, as there is no margin size (e.g. -8, -9, -10) that will get the spacing to look correct when compared with the spacing between the lines of each text element.
**To Reproduce**
1. Generate a PDF with multiple `` elements in a view.
2. Set the style of the elements to have a lineHeight of 3.
3. Set the vertical margins (`marginVertical`) of the text elements to be 0.
4. Note that the space between the text elements is larger than it should be.
**Expected behavior**
Setting the vertical margin to 0 should result in the proper spacing between text elements regardless of lineHeight being set to 2, 3, or whatever. I believe this is how HTML works; however, I could be wrong and this may not be a bug. The bug may be me. If that's the case, my apologies.
**Screen shot**
**Desktop (please complete the following information):**
- OS: MacOS
- Browser: Chrome
- React-pdf version: @react-pdf/renderer": "^3.1.9
Contributor guide
Assessment
This issue has not been assessed yet.