How to specify a Language in CSS

I want an em class for English in a Spanish file

[Gusgsm]

Good morning, folks

I have the following doubt: How would you specify in an external css file a new class for <em> that would have as an attribute saying that this class is for English language inside an Spanish file?:

CSS W3C validator says to me that I cannot say

em.ingles {lang: en-UK;}

as there is no 'lang' css attributte.

Must be easy, I know. TIA :)

[encyclo]

There's no way I know of to do this directly with CSS (yet). You will need to define the language for each

<em>

element:

<em [b]lang="es"[/b]>Hola!</em>

[Gusgsm]

Oh, well... Another accesibility help that I'll throw down the drain,

I find it hard to believe that a speech synthetizer would render properly a given text in, let's say Italian, with English or French words here and there (something not so uncommon as World goes) without sounding a bit moronic.

And doing that embedding of 'lang' into every element goes IMHO against separating content from presentation: Imagine I want all my English phrases inside the Spanish text to sound terribly British instead of Australian or American, for example.

<em lang="es">gracias</em> anyway :)

[Robin_reala]

Well, not really. The lang attribute specifies some metadata about the element you apply it to - in this case the language it's written in - not the pronunciation.

Unfortunately there's no CSS to change the language pronunciation as of yet.

[encyclo]

The document language is definitely content not style, so its proper place is within the markup for the page itself, not in an optional, external stylesheet.

Usually, a document is mostly in one language, with certain sections in different languages or language variants marked up with the

lang

attribute within the containing block (for example a

td

or

div

) or if required within an inline element such as

em

,

cite

or

span

.

[r12a]

Language is part of the semantic information of the text, not presentational. Remember that some folks or applications may not read the CSS stylesheet, but they should still know that the language has changed.

What you really want, I think, is to apply the aural CSS property voice-family to the appropriate text, eg. something like:

voice-family:lang(es) { English-speaker }

This relies, of course, on application-specific values being available, and on implementation of the aural CSS.

By the way, in line with your concern to separate content and presentation, I suspect you should be using a span element rather than an em element, since you are not actually emphasising this speech as far as I can tell.

[Gusgsm]

As human languages are both form (sound) and content (meaning), ‘language’ property or attribute is heavily content-relevant, I agree.

But I think it is as well related with presentation as long as in web terms, user agents that are sound aware should have a way to deduce always and in an easy way form from content // or from a proper attribute expressed somewhere.

As for the somewhere, you have kindly told me there is no other way for what I want than using the lang attribute inline the ‘foreign’ element. What I point at is that a proper tagging of elements should (in my humble opinion) be ‘easy’ and repurposable.

That is, if I have to choose between:

1. Tagging with a short tag and afterwards assigning a form to that tag.
2. Tagging with a longer tag that I would have to change every where whenever I want to.

I would rather choose the first option that, by the way, goes in line with idea of reusable elements (that is not restricted to web design: I use them everyday in print design and we use it continously in our daily lives).

As for using the <em> tag instead of a <span> one, there’s one reason: Some validators insist in telling: Avoid using <i>, use <em>… In spite of thinking “that’s questionable”, changing one for the other is rather easy, so I took that way.

But, <span> is formally void if you strip CSS, so I rather choose a tag that is properly used if you do that, and that can be loaded with more meaningful form by way of a CSS property or attribute (lang, in this case).

Anyway, I think aural CSS is not very used… (Jaws uses it really?), isn’t it so?

As usual, your remarks force me to think. Thanks a lot :)