6 replies [Last post]
david_ste
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-07-26
Posts: 10
Points: 0

I have been looking in to the best way to dynamically size text and have now come to the conclusion that there is no easy way unless you want to update a whole load style sheets at once just for one change.

First I started with the usual 3 style sheets and used .asp to store the value small, medium or large in to a cookie read the cookie then retrieve the appropriate style sheet. I have noticed another post in this forum doing the same thing with JavaScript but again this requires multiple style sheets. This soon became too tedious to update all three with every change.

Next I tried using .asp again to dynamically set up font sizes as in

fontSize = Request.QueryString("fontsize")

then import the styles by using an include file styles.inc with the following.

<style>
font-size = <%=fontsize%>
</style>

this actually worked and the css validated fine, but when I tried to validate the page for XHTML
it tells me that I need to add
<style type="text/css">

I corrected this then I got an error with a voice-family: "\"}\""; hack I was using to hide from older browsers. After this the stylesheet was ignored.

Is there a better way of doing this as I thought the whole point of CSS was that it is truly dynamic. :?

In my experience this is only true if you want to be updating style sheets all day with slight variations on a theme. Something that would be much easier if it were dynamic.

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 17 years 2 days ago
Joined: 2004-05-18
Posts: 58
Points: 0

Best way to dynamically size text?

CSS is not dynamic at all, I'm not sure entirely what you mean by that.

As for font size, just use percentages. Any user that requires larger text because of poor eyesight will most likely be using the text zoom on their browser, otherwise it is unlikely they would have got to your site in the first place. As far as accessiblility goes, this should be acceptable. It's good enough for the RNIB, and (in the uk) they are the people that take you to court if your website is not accessible enough Laughing out loud

BTW, RNIB = royal national institute for the blind. You can see their site here and their css file is located here. As you can see, all font sizes are percentage values.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

david_ste
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-07-26
Posts: 10
Points: 0

Reply

Thank you for the reply.

By dynamic i meant that the whole point of CSS is that you edit one thing and it effects everything in your site. Think dynamic was maybe a bad choice of words.

Something that is completely undermined by the use of three style sheets to control text sizes.

Think the idea was that it would be easier if there was a link directly on the page people could use to affect font sizes. The three font sizes I had in mind would be for a pda/mobile or similar, normal browser and a large font on the browser to help people read the text but still maintain the design and flow of the site.

I also wanted to allow the user to completely change the look of the site by clicking a link that would bring in another style sheet, which would mean another three style sheets (small, medium and large).

If I could dynamically change the font-size I could have the user set their preferred font size then set their preferred style all with only two style sheets instead of (2 styles x 3 font sizes) 6 style sheets.

I know you can do this with most browsers but am not too sure if you can do it with them all and if you can achieve this through the browser then why not with CSS. :?

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 17 years 2 days ago
Joined: 2004-05-18
Posts: 58
Points: 0

Re: Reply

david_ste wrote:
Think the idea was that it would be easier if there was a link directly on the page people could use to affect font sizes. The three font sizes I had in mind would be for a pda/mobile or similar, normal browser and a large font on the browser to help people read the text but still maintain the design and flow of the site.

I'm still going to suggest that you go for the % sizing. Every accessibility recomendation I have seen says so. Even the officail w3c one. The reason is that if someone needs larger text sizing, then that person will know, much better than you do, what text size is good for them. So give them a free choice. Rather than give them normal or big, let them choose from all the settings the browser has to offer.

In addition, CSS has no method to retain state, which means you need to use a server-side language (with cookies) to reliably keep the text sizes the same for every page. Otherwise the user has to:
1) get to your site AND THEN adjust text size
2) go to next page AND THEN adjust text size
3) go to next page AND THEN adjust text size
4) Leave and never return because they got piss'd off Laughing out loud

About maintaining the design and flow of the site, that can also be achieved if you are using percentages. There is no reason why the aesthetic cannot be stretched, vertically to accomodate the text.

Take my site as an example:
www.caffeinefuelled.net
Percentage text sizes working with the broswer (ctrl and scroll the mouse wheel is the short cut). it even has the multiple site styles (including retention of state) you want.

It works in all conventional type browsers that I have come across. As for the PDA, I would imagine that the default text size is smaller than on screen, so the percentages will work with that. If not you can use media selectors to feed different styles to the handhelds.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

david_ste
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-07-26
Posts: 10
Points: 0

Reply

Thank you for that.

Think your point about the user knowing better than me is a very valid one. Had not thought about that.

Was using cookies to store the size of the font before, but again this could be avoided as the user would have this set in their browser.

Do you know any good sites that I could get information about text sizes?

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 17 years 2 days ago
Joined: 2004-05-18
Posts: 58
Points: 0

Best way to dynamically size text?

Quote:
Think your point about the user knowing better than me is a very valid one. Had not thought about that.
It's not my point, got it from somewhere else Tongue I find it's really hard to get your head around accessibility when it is not an issue for you. The main thing is that the person may want slightly bigger text, and the large one you supply is too large. It is very uncomfortable to read when the text is too large, as well as too small.

Quote:
Was using cookies to store the size of the font before, but again this could be avoided as the user would have this set in their browser.
Plus it would be set BEFORE their first visit, which means one less click before they get to the site.

Quote:
Do you know any good sites that I could get information about text sizes?
Um, not sure. I never remember to bookmark anything so I always forget where my knowledge comes from :roll:
As a quick summary try the following:

1) use % sizing for screen

2) remember that it is a percentage of the parent element. Ie if you have the body set to 80%, then a div set to 80% it gives 80% x 80% = 64%

3)Dont use Verdana:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Thats about it for sizing. If you are erious about accessibility, it might be worth a read through the w3c guidelines. There is some stuff in there that you might never have thought of before.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

obsidian
Offline
Enthusiast
South Carolina
Last seen: 14 years 30 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

Best way to dynamically size text?

I've been looking at the same type setup for the initial question about resizing fonts. My best solution so far is to use a temporary entry into a SQL database using their IP and their choice of font-size. As long as their session is still active, you can call their choice for font size from the DB. If you use a temp DB like this, you can have several users all on the site with different viewing sizes.

I've done some work with older people, and they insisted on a way to increase font-size... hence the solution I mentioned above. It's not the best way to do it, I'm sure, but it works for general dynamics of the page.

You can't win, you can't lose, you can't break even. You can't even get out of the game!