Member Avatar for Member #120589

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.

Dani AI

Generated

No single "translation" element exists in HTML. For the short, inline glosses you describe, a semantic alternative to title is the ruby/rt pattern because it was created for short annotations (pronunciations or glosses). As wanted a rollover and rightly pushed for semantic markup, consider ruby when the translation is a single-word gloss and you can mark both languages with lang so assistive tech knows what language each bit is in.

<ruby lang="es">casa<rt lang="en">house</rt></ruby>

If the UI must behave like a tooltip (hover/focus and visible for keyboard/touch), do not rely solely on the title attribute — it is inconsistent on touch devices and often not keyboard- or screen‑reader friendly. Use an accessible tooltip pattern instead: keep the translation in a separate element, reference it from the trigger with aria-describedby, give the popup role="tooltip", and show/hide it with CSS/JS on both hover and focus. This lets screen readers find the translation and keeps the widget usable for keyboard and touch users.

<span class="term" lang="es" tabindex="0" aria-describedby="gloss-1">casa</span>
<span id="gloss-1" role="tooltip" class="gloss sr-only" aria-hidden="true">house</span>

Practical checklist: use ruby for very short glosses; use an ARIA tooltip pattern for interactive rollovers; always mark languages with lang; ensure the trigger is keyboard-focusable; test with a screen reader and on a phone. For longer translations, keep a visible glossary or inline expansion rather than a hover-only tooltip. Useful references: MDN on ruby and title, MDN on aria-describedby, and the WAI-ARIA tooltip authoring pattern for implementation details (ruby element, title attr, aria-describedby, WAI-ARIA tooltip pattern).

Recommended Answers

All 2 Replies

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;
}
Member Avatar for Member #120589

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.