Author Topic: Adjustable font sizes for AIDSmeds & POZ (Read 7819 times)

Peter Staley · « **on:** January 20, 2007, 09:29:49 am »

Matt (Newt) -- you've long advocated for adjustable font sizes for this website. I've always wanted to allow this as well, but have been stymied for a couple of reasons.

The primary one being page layout issues. If ALL the fonts on a page are adjustable, then it becomes a huge design challenge -- you have to design all your pages so that they remain readable regardless of font size. I've tried doing this, using our home page, and it was really, really hard. You can see my attempt at this here (note: this link will expire once we turn off the old AIDSmeds server).

One option I'd like to explore is to focus only on the primary content of our pages -- the lesson content, news stories, etc. -- so we'd make that content adjustable, but not the nav links and ancillary content on a particular page. This would allow us to continue to control the general layout of a page, while allowing it's primary content (usually contained in a single, long vertical column down a page) to expand or shrink based on a user's preference. I know this is somewhat of a compromise, since nav links are still important to everyone, including the seeing impaired, but it's a step in the right direction.

I've found a great example of this at CNN.com. They've got this nifty tool in all their posted stories that allows the user to quickly increase or decrease the font size of the story's text. See an example here. Just above the body text of the story, flush right, it says "Adjust font size" with a "+" and "-" button next to it. Clicking the plus button instantly increases the font size of the story's text (but leaves the rest of the page unchanged).

It's a pretty cool feature, but I don't know what programming tools they use to make it happen. It happens so instantly (the rest of the page doesn't refresh), that I'm pretty sure they're using some AJAX coding. Matt -- if this is something you could research for me, I'd really appreciate it. I'm still up to my eyeballs with post server-switch clean-up, and I've got a HUGE backlog of English content needing Spanish translation (while I don't do the translating, I still have to compile all the English content for them to translate, then cut & paste the new Spanish content into our current Spanish lessons).

This is just one suggestion of how to proceed. Let's figure out something doable, and something that I can take to management and convince them to do (in other words, I won't be able to prioritize this if it's perceived as a fairly massive undertaking, requiring a complete redesign of our 2 websites, and a big time/money commitment from our overstretched programming team).

And finally, this isn't just a Matt/Peter two-way (although that would be kind of hot, don't you think?), so others should feel free to chime in, especially if you're Web-design savvy.

Cheers,

Peter

AIDS2HIV · « **Reply #1 on:** January 20, 2007, 11:00:44 am »

you should be able to find the script you need here, Peter

www.hotscripts.com

you may run a search on font adjustment, or visually impaired*

Peter Staley · « **Reply #2 on:** January 20, 2007, 11:16:27 am »

Quote from: AIDS2HIV on January 20, 2007, 11:00:44 am

you should be able to find the script you need here, Peter

www.hotscripts.com

you may run a search on font adjustment, or visually impaired*

Nope, couldn't find anything there.

Peter

newt · « **Reply #3 on:** January 20, 2007, 12:47:23 pm »

This is an important problem with an elegant simple solution and then at least one elegant complex solution.

The simple solution is to edit the styelsheet to use variable rather than fixed font size and line-height declarations for MAIN CONTENT - this is probably sufficient, ie not touch the navigation etc. The outcome: to the average viewer the pages will look just the same, but for large print types, and also small screen people who wanna see more (perhaps on a neat but basically too small Sony laptop...) you can increase/decrease the size of the essential content.

This is simple for AM pages. For POZ is is a little more fiddly. For the AM pages this would take me about 20 mins I guess (well, it just did) and 40 mins to Mac-proof. The difficult bit here is that you are using a table-based layout, and therefore some care is needed to apply the font-size to the table cell elements (TD) rather than paragraph or list elements (P, LI etc), to avoid Alice-In-The-Looking-Glass shrinking text size on nested elements.

The complex elegant solution is to use a server-generated (PHP) stylesheet with conditional style declarations which (a) takes care of browser compatibility problems (b) lets you use all sorts of fancy buttons/user preference options to improve readability and acessibility.

However, I would go for the simple solution because most people with visual impairments just set their browser to be permanently bigger text-wise, plus it's less server load.

This is an IE 5-6 issue really. These are still common browsers. All current Mac browsers like Safari etc let you set the text size you want, and so do all the Windows Mozilla-baed ones. This is as per the W3C spec and will become standard, so if S+S think people are viewing POZ etc as they intend it to be seen they should go round some people's houses and be enlightened.

The "same look" thing is a red herring really. People who use bigger text sizes don't compare their preferred presentation to the originators' intended version (but they might use the site more often it if they can get the content in a readable size). This customer focus somehow seems v hard to convey to website owners.

- matt

Peter Staley · « **Reply #4 on:** January 20, 2007, 01:07:33 pm »

Matt -- let's explore your first suggestion. I've emailed you our basic style sheet. I'm not a CSS expert, so please let me know how ours would be changed so that only our basic content would use variable fonts.

Peter

Miss Philicia · « **Reply #5 on:** January 20, 2007, 01:10:53 pm »

On a Mac you just hit command-+ and the font gets larger.

AIDS2HIV · « **Reply #6 on:** January 21, 2007, 12:40:06 am »

http://www.dynamicdrive.com/dynamicindex9/textsizer.htm

newt · « **Reply #7 on:** January 21, 2007, 04:28:47 am »

CNN uses an adapted version of he well-known style switching javascript piece called styleswitcher - matt

Peter Staley · « **Reply #8 on:** January 27, 2007, 02:34:20 pm »

Matt -- your wish is finally my command!

Your new style sheet is now in place on all AIDSmeds pages except our home page. I'll send you the POZ.com style sheets so you can suggest fixes for them as well.

Please give the site a good look, to make sure everything is working as you predicted.

Sorry this took so long!

Peter

appleboy · « **Reply #9 on:** January 27, 2007, 09:19:41 pm »

I wanted to throw my 10 cents in on this. Peter you rock for helping newt out and the others with eyesight issues. I am so glad to see this community help others out. I am so glad this place exists!
AppleBoy

newt · « **Reply #10 on:** January 28, 2007, 08:25:16 am »

It works perfectly and as expected, Peter. Thanks.

I am sure IE users who prefer a larger text size will be happier, and more importantly, be able to read the lessons etc and get the essential info. One day, IE will work proper (like Safari and Firefox) and this won't be an issue.

So, me, happy to have contributed a rewrite of the stylesheet.

As for POZ.com, that's a bit of a dog's breakfast CSS wise, a result of the evolution of the website over several years from a time when older coding standards were used, therefore considerably more complicated to sort out. Smart + Strong may have to reach for their cheque book

- matt

Miss Philicia · « **Reply #11 on:** January 28, 2007, 04:02:57 pm »

IE work properly... ever?

*chuckles*

alisenjafi · « **Reply #12 on:** January 28, 2007, 05:01:27 pm »

How ironic I hardly use the font changer on safari. It's too bad I couldn't rent it out.

Peter Staley · « **Reply #13 on:** January 29, 2007, 02:31:08 pm »

Matt -- any idea why the "Última revisión:" (near bottom of page) appears larger than other text on this page?:

http://www.aidsmeds.com/archive/2006_Aug_1556.shtml

Peter

newt · « **Reply #14 on:** January 29, 2007, 03:12:47 pm »

Yes

From the page code:

Code: [Select]

<p align="left">Última revisión: 12/19/2005
</p>
				 
<p><font class="smtxt" size="1">Esta información ha sido escrita etc

The PARAGRAPH tag round Última revisión has no style class. I needs to be:

Code: [Select]

 etc
The FONT tag will, I think, be unnecessary. Further down it's done right:

Code: [Select]

© 2007 <a href="http://www.smartandstrong.com/">Smart + Strong</a> etc
- matt

Now playing: supper

Peter Staley · « **Reply #15 on:** January 29, 2007, 05:57:57 pm »

Actually, I don't want it to be smtxt. It used to be the same size as the regular content on the page. Now it's bigger.

The English version of the same page looks fine:
http://www.aidsmeds.com/archive/2006_Jun_1068.shtml

The only difference between the two is that the Spanish paragraph tag is NOT nested inside a table, while the English version is.

Peter

newt · « **Reply #16 on:** January 30, 2007, 01:04:45 am »

Put the para (just a bar para tag) inside the layout table n it will look as you wish

Peter Staley · « **Reply #17 on:** January 30, 2007, 09:50:05 am »

"just a bar para tag"? please translate.

newt · « **Reply #18 on:** January 30, 2007, 10:22:48 am »

Soz

a bare para tag, a paragraph HTML tag with no style class eg:

Some kind of text here

inside the layout table (like on the English pages).

- matt

Peter Staley · « **Reply #19 on:** January 30, 2007, 01:23:58 pm »

Matt -- I'm finding other situations where we use para tags outside of a table. Is there any easy fix to the style sheet that will make para tags work the same inside or outside of a table?

newt · « **Reply #20 on:** January 30, 2007, 01:42:38 pm »

Yes there may be, probably be even

post me some links to examples

Peter Staley · « **Reply #21 on:** January 30, 2007, 02:16:07 pm »

everything on this page is outside a table:

http://www.aidsmeds.com/articles/1868_10812.shtml

Peter Staley · « **Reply #22 on:** January 31, 2007, 11:25:32 am »

Matt -- see the cut-off of top of red text on this page:

http://www.aidsmeds.com/Crystal.shtml

Does any style sheet tweak fix this?

newt · « **Reply #23 on:** January 31, 2007, 11:41:05 am »

In reverse order:

To solve the red titlte text cut-off replace this:

.T1 { font-size: 32px; color: Red; font-weight: bold }

in the stylesheet with this:

.T1 { font-size: 32px; line-height:32px; color: Red; font-weight: bold }

The line-height value may need tweakeing to be a pixel or two more. This will correct every instance of a.T1 class automatically. (I note, generally the lessons don't use this style class for titles, they use .T2, a little smaller in size, this is, and works correct like as things stand).

To solve the bigger text in paragraphs outside tables problem, which is a legacy issue arising from use of tables for layout and not putting the content into other mark-up (everyone has to deal with this sooner or later) either:

(a) move the offending content into the layout table

or:

(b) add the following to the stylesheet

p.notintable { font-size: 0.8em; line-height:1.3em } (at the end please)

then make each offending paragraph this >>> 

Either way you have to go through each page. There is no easy fix, thanks to IE's partially wrong implementation of nesting for relative font-sizes on table elements and other HTML tags.

- matt

Peter Staley · « **Reply #24 on:** January 31, 2007, 01:40:21 pm »

Thanks. I made the .T1 fix.

As for the other issue, would something like this help?...

BODY P {font-size: 0.8em; line-height:1.3em}

DingoBoi · « **Reply #25 on:** January 31, 2007, 02:23:23 pm »

Jesus H. Christ. You technopeople just fried my brain. Sorry, this isn't a constructive post here, but damn, you both amaze me.

newt · « **Reply #26 on:** January 31, 2007, 03:49:40 pm »

Not quite but this will I hope

BODY P{font-size: 0.8em; line-height:1.3em}

BODY TD P{font-size: 1em}

Because you have text in table cells (TD), BODY P will make text in paragraphs in tables cells 0.8 x 0.8 = 0.64em (teeny) in IE. Following this with the BODY TD P line resets paragraphs in table cells only to be 0.8 x 1 = 0.8em, the right size.

The section in the stylesheet will then read:

/* make all table cells 0.8 x m height and line height 1.3 x m - this is the key size and line spacing declaration */

BODY P{font-size: 0.8em; line-height:1.3em}

BODY TD P{font-size: 1em}

* TD, * TH{font-size: 0.8em;line-height:1.3em}

Clearly, there may be other unintended consequences of making a site-wide change like this that can;t be judged til you see them. Moving the offending content into the layout table is safer.

- matt

Peter Staley · « **Reply #27 on:** January 31, 2007, 07:22:24 pm »

"Moving the offending content into the layout table is safer."

Agreed.

Peter

Grinch · « **Reply #28 on:** January 31, 2007, 07:59:21 pm »

While writing code can certainly be fun, Ctrl + Scroll changes the display size in both IE and firefox. For those that have vision issues you might want to try this. Some sites need bigger display because of their color scheme/font combination. This changes not only the font but all of the graphics.

newt · « **Reply #29 on:** February 01, 2007, 02:55:28 am »

CTRL + Scroll works for most webpages viewed in IE 5-6 if you first go to Tools > Internet Options on the broswer's menu, and click the Accessibility button in the lower right corner and under Formatting, check Ignore font sizes specified on Web pages. This is not well known, and requires a mouse with a scroll wheel. It's more long-winded than the more intuitive View > Text Size menu option, though this only works on websites with fixed text size while CTRL + Scroll/Ignore font sizes works regardless (mostly). - matt (browser nerd) the newt

newt · « **Reply #30 on:** February 09, 2007, 07:43:29 pm »

This conversaton seems strangely incomplete, like two works short

hmmm

-m a t t

Peter Staley · « **Reply #31 on:** February 09, 2007, 09:37:41 pm »

Forums Index

Welcome

Author Topic: Adjustable font sizes for AIDSmeds & POZ (Read 7819 times)