So… the site I’m working on has one of those “increase text size” controls. On this project it’s turned out to be one of those features that shows up in comps and somehow falls through the cracks until later on in the project cycle. Situation normal, really, as it isn’t a big feature. It’s just one of those things that needs to be buttoned up before the site can go live.
Anyway, I was thinking about how to do implement it the other day. I haven’t done one of these in a long time and the only other time I did one it involved crafting separate, albeit small, style sheets for the larger text sizes. I didn’t want to go that way again. Basically, I just didn’t want to write new style sheets- even small ones.
What’s a fella to do?
zoom
So, thinking about it a little bit, I seized upon using the non-standard CSS zoom
property. Supported in Internet Explorer (zoom:1
is often used for a hasLayout toggle) and Webkit browsers, it would represent a simple (1 line!) CSS solution to this problem. It’s also one that I like better aesthetically as the site looks the same, just bigger. I figure there’s a reason all browsers have moved to this behavior when hitting ctrl+
.
The problem was figuring out an equivalent for FireFox and Opera which don’t support zoom
Enter CSS 2D Transform
A little searching and experimenting later I came up with the idea of using CSS Transforms and the scale
value to approximate zoom in browsers that lack support.
Let’s see how I did it.
As you go through the following keep in mind this hasn’t actually gone through testing yet so something weird could yet shake out. I just wrote this code yesterday, so you guys can be my sanity check.
Also, is anyone else doing this?
Continue reading “Using CSS zoom and CSS Transforms For a Better “Increase Text Size” Button” →