pdfme / pdfme

A TypeScript based PDF generator library, made with React.
https://pdfme.com
MIT License
2.19k stars 194 forks source link

Vertical text alignment #190

Closed peteward closed 9 months ago

peteward commented 11 months ago

Is your feature request related to a problem? Please describe.

We recently contributed dynamic text sizing, however, the growing or shrinking of text is from a baseline position and you will likely need to control this based on the layout of your page.

e.g.: Screenshot 2023-06-23 at 12 27 32

text gets shrunk dynamically, but it "moves up" from the desired position (just above the text below) because there is an implicit top alignment to text boxes:

Screenshot 2023-06-23 at 12 27 59

Another use for this feature is that it is sometimes useful if you want to perfectly center text within an available space, to be able to draw a textbox between 2 horizontal planes then just align the text. Screenshot 2023-06-23 at 12 30 44

Describe the solution you'd like

Add a vertical alignment option to all text boxes (even without dynamic sizing set). This would contain the options of top, middle, bottom and would adjust the text to the appropriate position within the box. It would also be respected by dynamic font sizing.

The default option would be top, so all existing templates and schemas would be unaffected.

Describe alternatives you've considered

-

Additional context

We will start looking into this contribution.

peteward commented 11 months ago

Something simple like this:

Screenshot 2023-06-23 at 13 07 13

Alternative labels:

Screenshot 2023-06-23 at 13 08 21

hand-dot commented 11 months ago

Hey @peteward , This is Coool feature! Nice!

hand-dot commented 11 months ago

Please use this label.

hand-dot commented 11 months ago

ref: https://github.com/Hopding/pdf-lib/issues/645#issuecomment-718029496

jameshalsall commented 11 months ago

@hand-dot we are still working on this issue, was there a reason you linked to the above comment?

hand-dot commented 11 months ago

Hi @jameshalsall I just thought getBoundingBox looks useful. It just like a memo. You don't need to use this.

But in this case, Getting bounding box of text is important to implement this simply.

peteward commented 9 months ago

Hi @hand-dot, We're hoping to have a PR for this ready this week.

hand-dot commented 9 months ago

Hey @peteward , Wow Cool, I'm waiting a PR.