Using attributes on a <col>

[Garmt de Vries]

I have a table listing various translations of the titles of a set of
books. Each row represents a book, each column represents a language.
It looks like this:

+-------------------+------------------+-------------------+
| Français | English | Deutsch |
+-------------------+------------------+-------------------+
| Le tour du monde | Around the world | Die Reise um die |
| en 80 jours | in 80 days | Erde in 80 Tagen |
+-------------------+------------------+-------------------+
| Autour de la Lune | Around the Moon | Reise um den Mond |
+-------------------+------------------+-------------------+

I would very much like to indicate the language for these titles with a
lang=".." attribute. Not that I expect any screenreader to be able to
handle all the 78 languages I have in my table so far, but I'd like to
indicate the languages anyway.

The most obvious thing to do would be using <col> elements, and giving
them the appropriate lang attributes:

<table>
<col lang="fr"></col><col lang="en"></col><col lang="de"></col>
....
</table>

That should mark all cells in the first column as French, all cells in
the second column as English, and all cells in the third column as
German, right?

Except that it doesn't seem to work as expected. At least, if I include
a CSS declaration like *[lang=fr]{color:green;}, just to see if it
works, it doesn't do anything. Perhaps I'm misinterpreting the
semantics of <col> or the [attr=value] selector.

Does anyone have experience with the use of <col> in this kind of
situation? Is it worth bothering about?

If <col> doesn't work, I'd have to set the lang attribute on each
individual <td>, which seems a bit of an overkill...

[Jukka K. Korpela]

"Garmt de Vries" <gd*****@hotmail.com> wrote:

I have a table listing various translations of the titles of a set of
books. Each row represents a book, each column represents a language. - - I would very much like to indicate the language for these titles with a
lang=".." attribute. - - The most obvious thing to do would be using <col> elements, and giving
them the appropriate lang attributes:
Right.
<col lang="fr"></col><col lang="en"></col><col lang="de"></col>
Well, that's invalid in HTML 4.01 and not recommended in XHTML either.
Don't use end tags </col>. If you must play the XHTML game, use
<col lang="fr" /><col lang="en" /><col lang="de" />
That should mark all cells in the first column as French, all cells in
the second column as English, and all cells in the third column as
German, right?
Indeed, except those cells that have their language set in the cells
themselves or in the <tr> elements.
Except that it doesn't seem to work as expected.
Language markup generally doesn't work as expected; the W3C material is far
too optimistic and promises too much in this issue. Stay tuned to having
any lang attribute settings ignored most of the time. Support to them in
speech browsers is getting better, though, as far as I know.
At least, if I include
a CSS declaration like *[lang=fr]{color:green;}, just to see if it
works, it doesn't do anything.
On which browser(s)? For example, IE knows nothing about such selectors.
Opera has some support.
Perhaps I'm misinterpreting the
semantics of <col> or the [attr=value] selector.

I don't think so. Rather, browser support is poor, and there are some
pitfalls in inheritance (in the CSS sense) and in inheritance (in the
obscurely defined HTML sense) for tables.

First, note that *[lang=fr] (which means the same as [lang=fr]) refers to
those elements that have the lang attribute set to value "fr" and this is
probably to be interpreted so that the elements have that attribute in the
markup, not "inherited". Thus, you manage to set (on the few supporting
browsers) the color property for col elements, but this has no effect,
since that property is not inherited (in the CSS sense) into cells. The
language information is "inherited" into cells, but it's still the <col>
element that carries the lang attribute, not <td> elements.

In principle, you could use
:lang(fr) {color:green;}
and this should affect the color of the cells, unless I've missed
something. The selector should match all elements that have their language
set to "fr" either directly in the element's lang attribute or indirectly
by an enclosing element's language setting. This doesn't seem to work even
on Opera, though.

If you try setting the background color, things are different, since the
background behaves differently in CSS. You can set background for a column
and it shines through for all cells that have their own background set to
transparent, which is the default.

I would just set the lang attribute for <col> elements. That's the right
thing to do, and it doesn't take much time. But don't expect to be able to
base styling on it.

To style a column of a table, the really safe way (to the extent that
styling can be safe) is to set a class attribute for each cell in the
column, and use a class selector. This is tedious and makes the source
ugly, but hopefully you can find some automated tool for it.

It's sad that such a basic styling task is so difficult, but the HTML and
CSS table models are really something rather weird. If you wish to get mad
in trying to understand the mess, you might as well start at
http://archivist.incutio.com/viewlist/css-discuss/34844
which probably hits on the nail by discussing how the rendering of tables
is supposed to work in CSS (for some value of "work").

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[David Ross]

Garmt de Vries wrote:

I have a table listing various translations of the titles of a set of
books. Each row represents a book, each column represents a language.
It looks like this:

+-------------------+------------------+-------------------+
| Français | English | Deutsch |
+-------------------+------------------+-------------------+
| Le tour du monde | Around the world | Die Reise um die |
| en 80 jours | in 80 days | Erde in 80 Tagen |
+-------------------+------------------+-------------------+
| Autour de la Lune | Around the Moon | Reise um den Mond |
+-------------------+------------------+-------------------+

I would very much like to indicate the language for these titles with a
lang=".." attribute. Not that I expect any screenreader to be able to
handle all the 78 languages I have in my table so far, but I'd like to
indicate the languages anyway.

The most obvious thing to do would be using <col> elements, and giving
them the appropriate lang attributes:

<table>
<col lang="fr"></col><col lang="en"></col><col lang="de"></col>
...
</table>

That should mark all cells in the first column as French, all cells in
the second column as English, and all cells in the third column as
German, right?

Except that it doesn't seem to work as expected. At least, if I include
a CSS declaration like *[lang=fr]{color:green;}, just to see if it
works, it doesn't do anything. Perhaps I'm misinterpreting the
semantics of <col> or the [attr=value] selector.

Does anyone have experience with the use of <col> in this kind of
situation? Is it worth bothering about?

If <col> doesn't work, I'd have to set the lang attribute on each
individual <td>, which seems a bit of an overkill...

The basic problem is that the implementation of characteristics for
both the column (tag <col>) and column-group (tag <colgroup>)
elements is buggy for many browsers. This is true for both HTML
attributes and CSS styles.

For Mozilla and Firefox, see the long-running bug #915. First
written 26 September 1998, it has accumulated 246 comments on
whether to fix it and, if so, how. Many of those comments argue
about how to interpret the HTML 4.01 and CSS specifications. The
assignment for fixing this has been changed six times in seven
years. It's still not fixed.

One symptom of this bug is that attributes or styles for horizontal
or vertical alignment are ignored. On the other hand attributes
and styles for column widths work.

See <URL:https://bugzilla.mozilla.org/show_bug.cgi?id=915>.

I understand that IE is also buggy in this area.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.

[Garmt de Vries]

Jukka K. Korpela wrote:

<col lang="fr"></col><col lang="en"></col><col lang="de"></col>
Well, that's invalid in HTML 4.01 and not recommended in XHTML either.
Don't use end tags </col>. If you must play the XHTML game, use
<col lang="fr" /><col lang="en" /><col lang="de" />

OK, thanks for pointing that out.

That should mark all cells in the first column as French, all cells in
the second column as English, and all cells in the third column as
German, right?

Indeed, except those cells that have their language set in the cells
themselves or in the <tr> elements.

Obviously. But no <tr> or <td> is going to carry a lang attribute
anyway.

At least, if I include
a CSS declaration like *[lang=fr]{color:green;}, just to see if it
works, it doesn't do anything.

On which browser(s)? For example, IE knows nothing about such selectors.
Opera has some support.

I always test this kind of stuff on Opera and Firefox. If it works for
IE, that's a bonus, but a priori I don't expect that.
First, note that *[lang=fr] (which means the same as [lang=fr]) refers to
those elements that have the lang attribute set to value "fr" and this is
probably to be interpreted so that the elements have that attribute in the
markup, not "inherited". Thus, you manage to set (on the few supporting
browsers) the color property for col elements, but this has no effect,
since that property is not inherited (in the CSS sense) into cells. The
language information is "inherited" into cells, but it's still the <col>
element that carries the lang attribute, not <td> elements.
Well, it's primarily the language information that I want to propagate
to the cells. I just used some CSS styling to test if this worked,
because I don't have a speech browser or other tool that looks at
language information. But you're right, the *[lang=fr] approach won't
work because the <td>s don't CSS-inherit from the <col>s.
In principle, you could use
:lang(fr) {color:green;}
and this should affect the color of the cells, unless I've missed
something. The selector should match all elements that have their language
set to "fr" either directly in the element's lang attribute or indirectly
by an enclosing element's language setting. This doesn't seem to work even
on Opera, though.
Indeed, I get the same results as with *[lang=fr].
I would just set the lang attribute for <col> elements. That's the right
thing to do, and it doesn't take much time. But don't expect to be able to
base styling on it.
Fortunately, that wasn't my goal. I just want to do the right thing,
and I was wondering if it had any effect...
To style a column of a table, the really safe way (to the extent that
styling can be safe) is to set a class attribute for each cell in the
column, and use a class selector. This is tedious and makes the source
ugly, but hopefully you can find some automated tool for it.

I could do that, indeed, but for the moment I don't need to.
Garmt de Vries.

[Garmt de Vries]

Garmt de Vries wrote:

Jukka K. Korpela wrote:

Indeed, except those cells that have their language set in the cells
themselves or in the <tr> elements.

Obviously. But no <tr> or <td> is going to carry a lang attribute
anyway.

.... "on this particular page of mine", I should have added.

[Brian]

Garmt de Vries wrote:

<table>
<col lang="fr"></col><col lang="en"></col><col lang="de"></col>
...
</table>

That should mark all cells in the first column as French, all cells in
the second column as English, and all cells in the third column as
German, right?
Apparently so.
if I include a CSS declaration like *[lang=fr]{color:green;}, just to
see if it works, it doesn't do anything.

http://ln.hixie.ch/?start=1070385285&count=1

I'm not sure why a browser can assign some things to cells based on the
<col> element, but not others.

--
Brian