Inspiring

Question

Dynamically change font size on a website

Forum|Forum|15 years ago
September 14, 2010
3 replies
1663 views

Hello

I'm building a website for people which have problems with their vision. I thought I would display a function which lets the user increase (or decrease) the standard font size (which I initially will set to p.e. 1.2em). I will use a CSS file to set all other styling properties. Is there a nice example on how to realize this. I think I need to save the users choice in the session or in a cookie. But I cannot imagine yet how to access and change my CSS file or whatever the solution will be. I imagine that I will display a couple of "A"s in different sizes and the user may click on the "A" which has the size the user likes.

Thank you very much for your help.

Advanced techniques

This topic has been closed for replies.

A

Anonymous

Encourage users to use the browser options increase (or decrease) text size... Teach a person to fish, and they'll learn how to change text on any website. Give a person a fish, and they'll only be able to do it on yours.

Owainnorth

Inspiring

Fair point rgurganus, alas these days I find this one more appropriate:

"To design a system that is completely foolproof is to underestimate the ingenuity of complete fools"

If someone half blind and struggling to use a website, I honestly wouldn't bother trying to teach them anything as they'll just get annoyed and won't use your site. It's all about the simplicity.

A

Anonymous

True... the same goes for adding a website option to change text size. They're more likely to find, understand, and use a function built into their browser, vs. something unique to a particular website.

J

Jeff Coughlin

Inspiring

There are a few ways to do what you want, but all require javascript.

So my questions to you are:

1. Are you allowed to use javascript on the site?

2. Can you use jQuery? (I only ask because it's pretty simple to write in jquery and makes it very cross-browser compatable)

T

tomtomtom7147938Author

Inspiring

Dear Jeff

Many thanks for your input:

1. Yes, Javascript is no problem

2. I might use jQuery but I cannot figure out on how to de- resp. increase the font. Would you have a nice and easy understandable example?

Meanwhile I checked some codes and solutions. The most of them just work on one style. I would like to have something which works on all layouting tags (h1, h2, ...., p, a etc.)

Thank you vrey much

Owainnorth

Inspiring

Perhaps too simple, but can you not just use a Session/Client variable which stores their chosen size then include a different CSS doc at the top of the page? I.e. actually create separate CSS documents either manually so you can tune them, or dynamically.

I wrote a thing once that parsed a CSS source file and looked for my custom-formatted variables such as |<graphicsdir>| and regex-replaces them with application-level variables, you could do something with that to set sizes.

Depends how complex your CSS is really.

D

Dan_Bracuk

Inspiring

It's so easy to increase or decrease font sizes with your browser that you might want to take advantage of it. The keystrokes are Control-plus and Control-minus.

You could present this information in a tool tip of some sort. Or, you could write a js function that does the same thing.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded