homepage Welcome to WebmasterWorld Guest from 54.211.219.178
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Substitution For Strong and Em Tags
Any thoughts?
ricfink




msg:1201034
 6:27 pm on Aug 12, 2003 (gmt 0)

Sort of looking for thoughts and a consensus...

Italic text on a computer screen stinks. I never use the <i> tag. Hardly ever use the <b> element.

I do, however, sometimes use strong or em but more often I'll use span with a class. And if I do use strong or em, I usually give it it's own style rule - mainly to avoid italic but also I've found that a slightly contrasting font with a bold weight works nicely for emphasis.

(For example, even in print-bound Word documents, I'll write the body text in 12 pt Times New Roman and use Arial Bold 11 pt for emphasis. Looks nice, to my eye, at least.

What do others do?
Do you share the same view of italic text?

 

Reflection




msg:1201035
 6:37 pm on Aug 12, 2003 (gmt 0)

I used to use a span with a class but now I always use em and strong. I like to limit the number of unneccesary classes that I have in a document and using em and strong helps in that regard.

As for Italic, your right it doesnt always look that great but I generally only use it on a few words at a time(using em). Its still readable and gets the point across :).

SuzyUK




msg:1201036
 6:59 pm on Aug 12, 2003 (gmt 0)

I use <em> and <strong> but style them if necessary because:

Do you share the same view of italic text?

Yes generally, but it depends on the font being used (georgia, italic is OK, TNR isn't).. so as long as <em> is in the markup you can choose your/your clients preference

admittedly a span class would do the same job but <em> is screen reader/text browser friendly too..

Suzy

wackybrit




msg:1201037
 2:24 am on Aug 13, 2003 (gmt 0)

Do you share the same view of italic text?

Not really. If you have an anti-aliased font setup or use ClearType in Windows XP, italics look great.

That aside, sure italics can look a little untoward in regular aliased situations, but italics have a use and a meaning. Your idea of changing the style is good, since italics are meant to be 'different'. However, I would argue that using italics comes way above many of the usability/readability disasters people commit every day.. links without underlines, links that are the same color as the text, poor color text choices, tiny nasty Verdana text anyone over 40 can't read.. and so on.

Purple Martin




msg:1201038
 2:41 am on Aug 13, 2003 (gmt 0)

I use em for emphasis, strong to make a word darker, and dfn for scientific names.

I also put the main heading of each page in h1 tags, and give subheadings h2 tags etc.

Those tags were invented for good reasons, so use them! Don't use styled spans to make it look how you want, because the browser won't know what kind of content it's reading. Use the correct tags, and then tweak the styles of those tags to get the look you want.

ProfMoriarty




msg:1201039
 12:43 pm on Aug 13, 2003 (gmt 0)

sometimes use strong or em but more often I'll use span with a class.

Keep in mind the semantic meaning of the tags <em> and <strong>. How they really look is a question of layout, so <em> enclosed words don´t have to be in italics. But these tags do have a certain meaning in your hypertext document - don´t use <span style="font-weight:bold"> if the phrase´s meaning is emphasized.

Just my 2 cents,

Lars

wackybrit




msg:1201040
 1:25 pm on Aug 13, 2003 (gmt 0)

Also, screen readers and such things deal with strong and em in the proper ways too, whereas styled spans are just dealt with as.. nothing unusual.

I don't want to sound anti-disablity, I'm not, but I admit that most of the time I am not worried about such distinctions .. but if you DO want to be totally accessible and friendly to netizens everywhere, this is a point well worth considering.

Hester




msg:1201041
 3:23 pm on Aug 13, 2003 (gmt 0)

Use <big> and <small> too! Saves bytes rather than using <span>!

wackybrit




msg:1201042
 3:38 pm on Aug 13, 2003 (gmt 0)

Not enough bytes to be worth breaking the standard though, Hester, IMHO. Those tags are not valid in XHTML. Creating a CSS class gives you more power, and doesn't add too many more bytes to the equation (if you arrange your CSS well, that is!).

DrDoc




msg:1201043
 3:43 pm on Aug 13, 2003 (gmt 0)

As for a CSS substitute for strong and em - there is none... well, unless you mess with volume, speed, etc in your aural style sheet. Still, that doesn't compensate for the fact that non-CSS capable screen readers need strong and em to do what they're supposed to...

MonkeeSage




msg:1201044
 3:45 pm on Aug 13, 2003 (gmt 0)

font-weight: bold;
font-style: italic;
text-decoration: underline;

Jordan

Hester




msg:1201045
 3:53 pm on Aug 13, 2003 (gmt 0)

Those tags are not valid in XHTML.

Are you sure about that? I can't find anything in the XHTML 1.0 spec that says <big> and <small> aren't to be used.

wackybrit




msg:1201046
 4:06 pm on Aug 13, 2003 (gmt 0)

Before you replied, I was thinking about that myself. I decided to check the XHTML 1.0 Strict DTD itself, and discovered that these elements ARE valid, when not used within PRE tags. So, your point stands.

However, I am rather disappointed in this, since the philosophy of XHTML/CSS is that the content goes into the XHTML, the presentation details into the CSS. SMALL and BIG are a bit too 'presentation' related for my liking to be in a purely content related file, but if the DTD allows it, so be it :)

Thanks for making me check this out, however.

MonkeeSage




msg:1201047
 4:06 pm on Aug 13, 2003 (gmt 0)

[w3schools.com...]

Looks like they are still around.

Jordan

DrDoc




msg:1201048
 2:42 pm on Aug 14, 2003 (gmt 0)

font-weight: bold;
font-style: italic;

That is not a CSS substitution for <strong> and <em>. They are substitutes for <b> and <i>!

How is a screen reader going to interpret a font's style or weight? More importantly, how is the information carried to a screen reader with no CSS support?

ricfink




msg:1201049
 6:35 pm on Aug 14, 2003 (gmt 0)

thanks for the input.

Hadn't given the screen reader angle enough consideration.
Maybe I should stick to just styling em and strong to my liking and skip span with a class.

Good to hear that italic text stinks less on flat-panel displays but most of us are still stuck with CRTs and the jaggies for the moment.

Where are those high-res monitors that are supposed to be a near-substitute for print on paper that I've been hearing about for years? A good flat-panel is a nice improvement, but it's still not a sub for printed text.

(Of course, the trade-off is color without any additional cost and that's a major thing. The glass is half-full!)

rich

TheDoctor




msg:1201050
 10:05 pm on Aug 14, 2003 (gmt 0)

It is, of course, possible to use "class" with <em> or <strong>. Thus you could have

<p>This <strong>stands out</strong> and this <strong class="stronger">stands out even more</strong></p>

and in your CSS


strong.stronger {font-size:105%;}

(or you could change the colour, or whatever)

I'm not sure I would want to do it myself, but there may be reasons in specific cases. Doing this would seem to be preferable to using <span> for the reason given by DrDoc.

MonkeeSage




msg:1201051
 11:50 pm on Aug 14, 2003 (gmt 0)

Most screen readers don't understand aural prompts, no matter whether they come from CSS or HTML. The only one I know of that does is Emacspeak (using MBROLA). So I personally don't worry about aural prompts and only concern myself with visual prompts (which is what the question was about).

Jordan

Purple Martin




msg:1201052
 12:07 am on Aug 15, 2003 (gmt 0)

Jordan, I think you're wrong to only consider visual prompts.

Use of appropriate tags (<em>, <strong>, <dfn>, <h1>, <h2> etc) enhances the content's meaning.

By all means define visual styles for those tags, but don't just think visually - partly because there may be future xhtml-compliant screen readers that do take notice of tags, but also because using appropriate tags is a really simple, neat, efficient way to code!

MonkeeSage




msg:1201053
 12:45 am on Aug 15, 2003 (gmt 0)

Purple_Martin:

Fair enough. :)

Ps. I don't necessarily agree (I'm kind of undecided on the matter), but some people would argue that phrasing tags like <em> and <strong> should only be used in conjunction with font styling tags (<i> and <b>) or CSS styling, not as a replacement for them. I.e., <span class="strong"><strong>...

Jordan

Purple Martin




msg:1201054
 1:08 am on Aug 15, 2003 (gmt 0)

That's an interesting idea, but why would it be better than this?

strong { font-weight: bold; etc }
...
<strong>content</strong>

I think that you were trying to say that CSS, not (X)HTML, should be used for styling, and I agree, but that's exactly what this does: the content and it's meaning is given with (X)HTML, and the visual styling is given with CSS. Surely this is the most efficient and most appropriate way? If it's not, I'm looking forward to learning why it's better to do it another way :)

MonkeeSage




msg:1201055
 1:26 am on Aug 15, 2003 (gmt 0)

Purple_Martin:

Actually, that does look like the best way to go about it for the CSS saavy. No extra tags needed that way. I didn't understand what you were meaning earlier, my bad. :)

Jordan

Hester




msg:1201056
 9:02 am on Aug 15, 2003 (gmt 0)

I think we need to look at this from a semantic point of view. If the viewer has CSS then they get whatever style has been added. But if the document is viewed without CSS, it should still have meaning. So <strong> and <em> still give the relevant meaning to the text.

If you just use span, the meaning is lost without the CSS.

Reflection




msg:1201057
 4:55 pm on Aug 15, 2003 (gmt 0)

I think we need to look at this from a semantic point of view. If the viewer has CSS then they get whatever style has been added. But if the document is viewed without CSS, it should still have meaning. So <strong> and <em> still give the relevant meaning to the text.

If you just use span, the meaning is lost without the CSS.

Excellent point Hester. There is more to it than just the visual or even aural presentation. At the basic level strong and em give meaning to their contents.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved