Javascript "Zoom"?

I’m looking to build a zoom feature into a site. Essentially, there’d be a button a user can click to increase the text size. Since I can’t imagine what else there would be to “zoom” other than text elements, I’d figure I would just add a stylesheet with something like p {font-size: 1rem} body.zoom-1 p {font-size:1.2rem} body.zoom-2 p {font-size:1.4rem} etc…

and then use javascript to increase the “zoom” value. For users not logged into the site, I’d set a cookie. For users logged-in, I’d set a cookie and update a value in the database that pertains to the users zoom settings.

Am I on the right track? Or is there a better way to do this?

The implementation sounds reasonable although you’d need to make sure to the UI doesn’t jump on initial load (e.g. it loads with font size of 1rem, then a few hundred milliseconds later realizes that the font size should be larger and causes a layout shift as it adjusts).

But saying that, the browser already implements this setting. In Firefox, for example, to increase the text size of a page you just need to press the Ctrl and the + key. Firefox will also remember the zoom setting on a per-website basis.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.