reflow text by recalculating font size

eraeco / pay

Checkard is a peer-to-peer check payment system for ERA PAY.

MIT License

4 stars 0 forks source link

reflow text by recalculating font size #31

Closed jazzyjackson closed 2 weeks ago

jazzyjackson commented 2 weeks ago

Gets the client rectangle of the text and overwrites the font-size property with calc(1em * scaling factor)

also centers text in the case that it takes the full width of field, via flexbox, maybe there's a better way?

unfortunately requires using range unless we want to wrap the text in another div, can't calculate width of text node directly, have to get the width of the range

next commit will be updating scale reacting to key events

cloudflare-pages[bot] commented 2 weeks ago

Deploying pay with Cloudflare Pages

Latest commit:	`c003c94`
Status:	✅ Deploy successful!
Preview URL:	https://a7398fb9.pay-cwc.pages.dev
Branch Preview URL:	https://origin-feature-fittext.pay-cwc.pages.dev

View logs

amark commented 2 weeks ago

merging!!!! awesome work!!!!! so excited to have this working :) :)

couple follow ups tho, for after merge to fix:

number amount still has dash being added to it, this is wrong. Dash should ONLY be in word amounts section.

You don't need to each... You can just .on('keyup'.

also Please don't mix and match DOM and jQuery unless for good good reason. Shouldn't .first() work? Or maybe you're saying it's necessary here because if text nodes? Then it should be jQuery .contents() I believe.

amark commented 2 weeks ago

oh and endorsement field doesn't seem to be resizing/reflowing. The other ones do.