Page 1 of 1
increasing/decreasing text size
Posted: Tue May 03, 2005 9:04 am
by phpScott
a web site requirement that I have is to be able to allow the user to increase/decrease the text size on the page.
My prefered method would be to provide info on how to do it in with there browser settings. Client/boss doesn't want that.
After doing some research I found that using .em sizing is probably the way to go.
The problem that I am having is being able to walk all the nodes in the relevant section of the page 'ie. content' and increasing all the sizes appropriately, especially if some css has been written that handles the text size itself like redifing the <h3> tag.
Has anyone come across this and found an solution.
thanks
phpScott
Posted: Tue May 03, 2005 12:29 pm
by zenabi
I'm not sure I understand your problem fully, but if you size all your text with ems it should scale in most browsers.
If I've misunderstood, perhaps you could post up an example page to show what you mean.
Posted: Tue May 03, 2005 1:33 pm
by phpScott
maybe I did word the problem poorly.
What I have is on an html page a +/- text size link.
the + to increase the size and of course - to decrease the text size.
Now I only have to do this to the content that is going to be displayed, not the menu's, headers or footers.
On my page I have a <div id="content"> tag what I would like to be able to do is to when a user clicks on the + link for example is to have all the text within my div tag get larger. The problem is that there might be other div or html tags that have been modified in the css stylesheet that will overide what ever I set the text-size to in the content div.
So I need away to over ride all the tags to increase the text size. now whether this is done using js and walking the dom or some fancy css that can overide lower cascades I don't care but I would like to do it without having to include another stylesheet, as this would defeat the purpose of stylesheets.
Is that any clearer? If not when I get to work tommorrow I will hack out the code that I am working on and post it.
Thanks
phpScott
Posted: Tue May 03, 2005 2:48 pm
by Ambush Commander
First of all, this is not a smart request. Therefore, it will not get a smart answer (or an elegant one, at least). Try Javascript that changes the browser's rendering text size (you know, CTRL UP or something)
Posted: Tue May 03, 2005 3:11 pm
by phpScott
what do you mean a smart request?
Posted: Tue May 03, 2005 3:25 pm
by Ambush Commander
Well, I've heard that clients often are very "stupid" in the manner that they don't know what's best for the site. Often, it's futile to argue with them, becuase they only see one side of the argument, not the technical side.
Let's consider this current request:
a web site requirement that I have is to be able to allow the user to increase/decrease the text size on the page.
Let's take a look at Yahoo! one of the most popular portals out there.
::Opens a new tab and looks at Yahoo::
::Looks a bit::
::Looks some more::
::Searches for "size" - no hits::
::Searches for "font" - no hits::
::Searches for "text" - no hits::
::Conclusion - Yahoo has no text resize 'link'::
Well, if Yahoo doesn't need it... wait, it's just one example. How about Google.com?
::Front page - no mention::
::Do a search ('text resize') - no mention except some webpages saying it's stupid to lock your user into a single font::
Aha! How about Amazon?
::No mention::
Msn? nope
Passport.net? nope
Ebay? nope
The point? As long as you don't put a 8pt font on your site, users will not have any desire to change font size, unless they're disabled, but then they'll know how to use their browser to change it (once again, good CSS has the flexibility to let them do that without breaking things).
Think about it: if the menu doesn't increase size, how do people who need the font-size big going to handle it? They can access the menu.
But this is not the point.
If you're working for a client, it is first your job to convince them about the right thing to do. If they don't give in, then you must give in and design the site according to their specifications (even if they're stupid specifications: don't give up, but don't be obnoxious). But this is an extremely unusual (albeit stupid) request (otherwise I presume you would have already used some of the Javascript solutions out there). So the solution will be unusual (and stupid).
Posted: Tue May 03, 2005 3:49 pm
by andre_c
...So the solution will be unusual (and stupid).
here's some unusual (and stupid) javascript solution
Code: Select all
function makeFontBigger (obj) {
obj.style.fontSize = parseInt(obj.style.fontSize) + 1 + 'pt';
}
function makeFontSmaller (obj) {
obj.style.fontSize = parseInt(obj.style.fontSize) - 1 + 'pt';
}
... or something like that
Posted: Tue May 03, 2005 3:54 pm
by Ambush Commander
::Thinks he's being mocked::
::Starts to write a rebuttal::
::Thinks against it::
Well... if that's what you need, so be it. From the first post, I thought that maybe the problem was a bit more complicated (because he did say he was using js). I think he has a problem with tags overriding the base font size.
IMHO it may be elegant, but it's still a useless/stupid (okay, so maybe they're not synonymous) solution.

Posted: Tue May 03, 2005 3:56 pm
by andre_c
sorry, i didn't mean to mock, i just thought that phrase was funny
I agree that it really is a client-doesn't-have-a-clue type of problem
and after a closer look at the third post, it doesn't solve the problem of nested divs
maybe something like this:
Code: Select all
recursiveBiggerFont (obj) {
makeFontBigger(obj)
for ( child_obj in obj.childNodes ) {
recursiveBiggerFont(child_obj);
}
}
Posted: Wed May 04, 2005 3:28 am
by phpScott
I totally agree that it a client doesn't know better type question.
I didn't meet with the client, I didn't have a say in the specs for the project, I didn't have a say in the layout or design.
New job, new project, please make this work was all I was told.
Other wise yes I would tend to agree with Ambush Commander that it would require educating the client as to how things would work best.
No the client isn't always right but you do have to make them happy especially when it is local council and they talk to other council's and there could be many more projects like this in the future.
phpScott
Posted: Wed May 04, 2005 3:57 am
by phpScott
thanks andre_c that was almost what I was looking for, it has gotten me down the right track.
I have only played with parent/child nodes once before in JS and for the life of me yesterday I couldn't remeber what I had done.
Cheers mate.
phpScott
Posted: Wed May 04, 2005 10:23 am
by pickle
One construct that isn't used very often is "!important". If I have a CSS property with !important after it (but before the ';'), that property will override the same property that was set with any parent or child node.
For example, if I have
Code: Select all
<div class = "e;one"e;>
<div class = "e;two"e;>
Test
</div>
</div>
and in my CSS, have declared in class "one" that text-size:20pt !important, and in class "two" that text-size:10pt, the text 'Test' will be 20pt font.
This should make it easier for you to override any children in your 'content' div that my have font size settings.
I'd suggest using JS, but use it to change the style of the page. This is kind of ugly, but how I would do it is:
1) On page load, use JS to load the default size of the font. Store this value in a hidden part of a page, either a hidden div or a hidden form element. This is where you can store the current value of the content font
2) When a user clicks the + or -, load that text from the hidden div or form element, either increment or decriment it, then set the style of the the content div accordingly.
3) Write the current font size back into your hidden element.
One thing to note is that I'm not sure if resetting the font size style will wipe out the '!important' flag on the property.