search

qmd-lab / closeread

https://closeread.dev
MIT License
130 stars 5 forks source link

Reimplement text focusing #51

Closed andrewpbray closed 3 months ago

andrewpbray commented 3 months ago

A new PR to work on the text focusing in the context of the nyt demo (also to test the new netlify test site build on PR 😉 )

andrewpbray commented 3 months ago

@jimjam-slam We've got two implementations up that we can test out!

Transform approach: https://closeread.netlify.app/gallery/demos/poem-1/ Font scaling approach: https://closeread.netlify.app/gallery/demos/poem-2/

If you have a moment, please let me know your thoughts!

Two strange things that I've noticed about the font scaling approach: 1. the "path" it takes while zooming to the span is more awkward than the transform path, 2. when viewed on Sarafi, the change in font size is very jittery, as if it's only going through like 3 intermediate sizes.

jimjam-slam commented 3 months ago

When I test this on mobile Safari on landscape, it scales up with more intermediate stages - but it's based on integer pixel sizes, it could be very size-dependent 🤔 When so try it on portrait, the change is so slight that I really only see the translation, and that does seem to pop!

It really would be easier and nicer if we went with the transform approach... 😮‍💨

andrewpbray commented 3 months ago

I'm going to go ahead and move forward with what we've got here (the transform approach works better on safari now that I've added back in your font-size: 300%; trick). One a future PR where I'm working on documentation I'll remove the font scaling demo but mention the approach in the Guide part of the docs.