How does CNN.com do this?

[CeeN]

Hi,

I went to CNN, and noticed that you can't make their text large or largest in IE. That's awesome, and I want to do it. I searched through their source and couldn't find it..hmm

[Vladdy]

Nothing awesome about it. On contrary huge usabilty problem. Fourtunately good browsers allow to scale the font regardless of IE bugs exploits.

[oracleguy]

ditto. It isn't a good thing that it does that.

[newmand2]

i agree its good how theyve done it, but pretty useless. i think ESPN have it right, on each article they let you choose the font and size

[ArcticFox]

Re: How does CNN.com do this?

"Wah, wah... Microsoft won't let me resize, mommy!"

Originally posted by CeeN
Hi,

I went to CNN, and noticed that you can't make their text large or largest in IE. That's awesome, and I want to do it. I searched through their source and couldn't find it..hmm

Anyway, it's done by coding it in your CSS file; assign the size of your text by using pixels, not percentages.

Ex:

<style>
body (font-size: 10px;}
</style>

[liorean]

There are very few reasons for why you should be able to lock the font size if the user needs larger font size, and very many for the opposite. First of all, you know that screens get larger, but resolutions grow even faster. A character is twice as big on a 800x600 resolution in both dimentions, and a fourth if you consider it's area, as the same size character is on a 1600x1200 resolution. A pixel sized character that is perfectly readable on 96 DPI (Windows standard font size) is a fourth smaller in both dimentions, or five eights of the area, on 128 DPI (large font sizes). Note that the people using large font size are the ones that have problems with reading standards font size, and then you go there and SHRINK the font from their standard to something just a bit above half the size, by using pixels for sizing instead of points, percentages or ems.

Second, I personally have good vision. If I develop pages for my preference, my large font sizes will be just legible for my father, and illegible for people with poorer sight than his. (He uses +1.50 glasses, so he doesn't see too bad)

A tip for getting the font size right: Set your resolution to 1024x768 if you have a 17" screen, 1280x960 if you have a 19" screen, or 1600x1200 if you have a 21" screen. Now go stand two, two and an half metres from the screen. If you can still read it without straining your eyes, you have a good font size. If you can't, that's too small.



ArcticFox: if people want to learn, you should try to teach them something they will benefit from and that is good practice, not a lot of hacks and bad habits. Okay, your personal site doesn't have to follow the principles and guidelines we iterate over and over, but for any kind of commercial site, or even just a site targetted at an audience other than yourself, you have to take your users into account. We teach usability and accessibility for the benefit of not just us, but those that we help, their users, and for the general good. So, please stop giving advice that is considered bad practice, or at least give both sides a nod and then tell them what you personally think.

[ArcticFox]

Originally posted by liorean
So, please stop giving advice that is considered bad practice, or at least give both sides a nod and then tell them what you personally think.

I never hear both side from any of you people! It's always 'don’t do this, don’t do that because it’s wrong'. I seem to be the only one here giving information on these topics.

Chromeless,
Tables,
Frames and iFrames

Perhaps it would be better for you all to answer the question first (at least), then give the pros and cons of why it should/shouldn’t be done...

Then I wouldn’t be out here.

[Basscyst]

Um. . .Arctic Fox? You seem to like to hand out rifles without telling them how to shoot. Follow your own advice - B4 harping to others.

1) HELP by answering the original question
2) SUGGEST what should/shouldn't be done
3) PROVIDE a reason for #2
4) VOLUNTEER your personal opinion, last.

Liorean's post was very informative and very true not much to argue with.

Liorean, I may be mistakin', but in your regExp article, I don't recall being able to adjust the font size and found it difficult to read any bolded "m" in the body of the page.

Basscyst

[mindlessLemming]

Originally posted by ArcticFox


Chromeless,
Tables,
Frames and iFrames

You forgot eternal damnation

[rmedek]

Perhaps it would be better for you all to answer the question first (at least), then give the pros and cons of why it should/shouldn’t be done...

I hate to admit he's right, but there are several people on this forum who offer opinions in lieu of any actual help. Personally, I agree with most of the advice, but I'd rather learn the answers first. Besides, even the most ridiculous questions (why won't my <font> tags work in my table layout?) might have answers that could apply elsewhere...

-Rich

[rmedek]

Having said that... I guess I should add that this is a coding forum, read by people who enjoy, and are good at, coding. I don't think anyone should come to a mostly professional forum and expect a pat on the back for their mastery of the <font> tag, they should expect thoughtful answers and good advice on making their pages better.

[CeeN]

hmm..sorry to start a debate

So..I'm just trying to understand what you've all told me. If I have text within the same <td, or not in a cell at all, how do I give it a font value using style? I think I know how to do it if they're hyperlinks, but I'm unsure if it works with regular text? I just figured out (hehe) that I can make classes like .row2 and add them to a td, but how do I do this with just groupings of text (not in td's, or different sizes within one cell)?

Hope I was somewhat clear.

[rmedek]

Hi CeeN

With CSS you basically take a selector, and then describe a declaration block. In other words:

thing you want affected {what you want to change:variable}

So to change the text in a table cell you would use:

td {font-size:10px}

Better yet, use em, but I think we've all gone over this

To change different groups of text within the same cell, you could use the class attribute:

td p {font-size:10px; color:#black}
[color=red]td p.red[/color] {color:red}

<td><p>This text is black</p><p class="red">This text is red</p></td>

w3schools.com has some great CSS tutorials to get you started...

-Rich

[CeeN]

oh, I see.the <p...very interesting

I'm going to work on my site now..thanks!


oh wait..but doesn't the <p make a space?

Can we put this in context?

Here's a script I've been playing with based on your help:

<!--TEMPLATE: FORUM INFO TD--><b><font face="arial" size="2"><a href="{ibf.script_url}showforum={$forumdata['id']}"><span>{$forumdata['name']}</span></a><br /></font></b>

<font face="arial" size="1">{$forumdata['last_post_time']}<b><br />
<img alt="Last Post" border="0" src="http://www.volconvo.com/lastpost.gif" width="10" height="7" /><a title="Go to the first unread post" href="{ibf.script_url}showtopic={$forumdata['last_post_topic']}&view=getnewpost" style="color: #000000"><u>{$forumdata['last_title']}</u></a><br />
</b>
</font>
by: <a href="{ibf.script_url}showuser={$forumdata['last_poster_id']}" style="color: #000000">{$forumdata['last_poster_name']}</a>

I just removed the <font> from by: and last_post_id etc... (on the bottom), but I don't know how to add classes

[rmedek]

<p> adds a space the way you are using it... but if you have several paragraphs of content in your cell it makes sense to put them in a <p> tag, then use CSS to say what <p> should do. Read through this forum and that link above to w3schools and you'll get a good handle on coding semantically with CSS.

As far as adding a class (again, w3schools, already! ), you would define it in the css:

.red {color:red} ...or...
p.huge {font-size:5em}

That "." defines the class name. Then in the HTML you call for it like so...

<span class="red">This text is sooooo red.</span> ...or...
<p>Normal stuff, blah blah...</p>
<p class="huge">Whoa, this is large.</p>

Hope this helps,

Rich