I would like to give users the ability to increase/decrease the rendering size of the content inside of a web app.
The CTRL+ and CTRL- features (or CTRL1 through CTRL9) of Chrome & Firefox are handy – but is there a way from JavaScript to execute those features?
Clarification:
I want the user to be able to achieve this via mouse-clicks, not keypresses, so something like this:
function resize_rendering() {
// code that executes ctrl+ or crtl-
}
The browser zoom level is a user setting, which is there for accessiblity purposes; it’s not intended for the site developer to ever know or care what the zoom level is, so I would expect that you’ll have trouble doing exactly what you want. Certainly, it’ll be hard to get it right in a way that works cross-browser.
The normal approach to this is to have a sizing gadget that changes the base font size.
If all the font sizes in your site are in
emunits, then you can change the sizes of all the text on the site with a single CSS change.So you would have a set of buttons on the site which use Javascript to set the
font-sizeof the<body>element to (for example) 12, 14, 16 or 18 pixels, depending on the element clicked.There’s a write-up of the technique here: http://labnol.blogspot.com/2006/12/allow-site-visitors-to-change-font.html