Semantic translation tag

[diafol]

Anybody know of how to use something like an <abbr> tag, but for rollover translation purposes. I'm guessing that the abbr tag is semantically incorrect here. E.g.

<abbr title="neutron">niwtron</abbr>

A rubbish way would be to use a span I suppose:

<span title="neutron">niwtron</span>

I just can't help feeling that there should be a specific tag. I saw the <dfn> tag (definition) - I suppose this is as close as it gets - from my research anyway. Any advice on this would be great.

[craiggles]

Well I think you are correct in that saying the dfn element is the clostest thing to what you want.

I've been thinking and dicussing this with a few others and we came up with three options:

1. you could use the dl (definition list) element like so:

<dl>
  <dt>english word</dt>
  <dd>translation</dd>
</dl>

2. you could use the dfn element like you sugggested.

<dfn lang="language of translation" title="translation">english word</dfn>

this is my favourite option, I like the fact that we use the lang attribute as this adds more semantics in my few.

you could argue that the lang attribute could be added to the dd element in option 1. but well, I just prefer this option.

3. you could use spans with the lang attr

<span>
  english word
  <span lang="language of translation">translation</span>
</span>

but this does seem hackish, no?

again you'd use some styling such as:

span[lang] {
  display: none;
}

span:hover span {
  display: inline;
  position: relative;
  bottom: 10px;
  right: 10px;
}

[diafol]

Yes, I follow you. I'm just amazed that HTML doesn't have such a tag - although in my case I'd only want it for rollover (via title attribute) cases.

I thought that lang and xml:lang attributes referred to the actual displayed text - not the title text. But hey, I suppose, in usual usage both are in the same language.

A use case would be a piece of text for learners of that language. When a new or unfamiliar or uncommon tense was encountered, the word would have styling (CSS) and a title attribute with word in the user's first language.

The CSS and markup are a dawdle, but finding the right tag is pain. Thanks for all your help. I will investigate <dfn> further.