I just implemented a quick CSS experiment -- using the content property to dynamically expand abbreviations and acronyms whenever you mouse over them. Here's the code:
acronym:hover:after { content: " (" attr(title) ")"; }
abbr:hover:after { content: " (" attr(title) ")"; }
In English: "Whenever a user mouses over an acronym or abbr tag, insert a space, start-parenthesis, full contents of the title attribute, and a close-parenthesis."
This effect will only be visible in browsers that fully support :hover and dynamic generation using content and after. On my Windows machine, it didn't work in IE 6 nor Opera 7. But it does work in Mozilla.
I'm not sold on this concept. It's more for entertainment than for function, because most browsers already render abbrs' and acronyms' title attributes in tool tips. I'm also concerned there might be a usability issue in the dynamic expansion of text: Say you're moving your mouse to click a link, and then the link moves because you've accidently moused over an acronym. Plus, this might annoy users who already know what an abbreviation means.
That said, it could be useful for the small percentage of Web users who haven't yet grasped the emerging convention of giving abbreviations a dotted underline. I've observed several people who try to click on those, to no avail, and don't wait the two seconds for a tool tip to show up. This method removes the delay; it gives instant results.
What do you think? Is this a usability faux pas?
UPDATE: I've removed the style rules from my global style sheet and posted a separate test page dedicated to this browser experiment.
Comments
Posted by ksmith on February 28, 2003, at midnight:
> What do you think? Is this a usability faux pas?
Yes.
Posted by Joshua Kaufman on February 28, 2003, at 12:12 a.m.:
It's an interesting idea, but I wouldn't use it. Using hover to resize and reflow text is really annoying to me. Others might not mind it as much.
What about displaying the hover content in a specific location on the screen, similar to what Eric Meyer is doing with Pure CSS Popups? It looks like it would be possible by just adding a few more CSS properties. That solution isn't very practical either, but it's fun to think about.
Posted by Adrian on February 28, 2003, at 12:27 a.m.:
Good idea about displaying the content in a specific location. But I don't think it's possible to grab the content of the abbr's title attribute and dynamically display it in an *unrelated element* on the page without using JavaScript.
Please prove me wrong. :)
Posted by elaine on February 28, 2003, at 12:50 a.m.:
it's funky...I agree that the reflow is distraction. on the other hand, it's working in my copy of Opera 7. (for what that's worth)
Posted by Mark on February 28, 2003, at 1:17 a.m.:
If I want your site to dance and jiggle, I'll goose my monitor.
If instant gratification is the issue, why not try something like Nice Titles? http://www.kryogenix.org/code/browser/nicetitle/
Posted by Martijn on February 28, 2003, at 1:28 a.m.:
You could always use it in a sort of alternative stylesheet. But not in the hover way then. Just static. The hover way is quite annoying. Also annoying that css-generated content is not selectable.
Posted by Chris on February 28, 2003, at 7:02 p.m.:
I would tend to agree with those who say it would be a problem.
I'd rather just display an indicator, like a dotted underline, with the acronym or abbreviator and then I can choose whether to view it.
One of the great things about the Web is that you can offer tons of content, and let the reader choose what they want. By trying to push the content of the abbreviation or acronym to the user a designer would be making a content decision that's best left to the reader.
Though I think it is cool that you can do all this stuff with pure CSS :-)
Posted by Spirito on March 4, 2003, at 7:56 p.m.:
User agents are not required to reflow a currently displayed document due to pseudo-class transitions. (W3C)
This means you should not expect your behavior to work. I think that's a matter of usability, as you highlighted.
The same problem arises when trying to apply a { font-weight: bold; } rule to a a:hover.
You're right about grabbing "the content of the abbr's title attribute" and dynamically displaying it "in an *unrelated element* on the page without using JavaScript".
However, as in the example Joshua Kaufman suggested, Eric Meyer uses a different technique: the content that you want to act as a hint is to be placed in the same anchor tag that launches the "hover" effect, but inside a further <span> tag.
That way, you can write a CSS rule that display the content of the <span> as a block with custom coordinates. I find it really nice, and I think it could improve usability.
Posted by Adrian on March 4, 2003, at 9:34 p.m.:
Spirito: Thanks for the W3C link; I wasn't aware of that.
In my opinion, embedding <span>s in every acronym and abbreviation would clutter up my markup a bit too much. I'd like a non-JavaScript, purely CSS, solution that doesn't require me to retrofit my content with extra tags (or change my publishing system to do so on the fly).
On the other hand, I really like what Chris said about letting readers choose what they want. Letting tool-tips do their job is probably the best solution.
Posted by Simon Jessey on March 7, 2003, at 1:46 a.m.:
I don't like it, though I do think it is clever. I wish IE understood the <abbr> element - I refuse to use <acronym> to markup abbreviations.
Posted by Dunstan Orchard on March 15, 2003, at 4:46 p.m.:
The name of the group I'm in (MACCAWS) stands for Making A Commercial Case for Adopting Web Standards.
Do you think it's necessary to put in abbr tags every time I write the group name in the site?
www.maccaws.org
The full name is displayed at the top of the pages.
Just wondering because it's becoming a pain in the backside to do it :o)
Posted by Gary LaPointe on September 6, 2005, at 6:19 a.m.:
I'm not so excited about the way it shifts things around. I think I'd like it more if they clicked and it expanded it.
Here's a related question: it's what I was searching for when I found your page. I don't like the delay for the "tool tips" when I hover over an acronym. I want it to display immediately. I was trying to do it in CSS instead of JavaScript (I've used OverLib, but it's overkill). It's not even technically a acronym but that's the effect I'm trying to emulate, I just don't like the delay (I know some people don't wait long enough), I'd be happy if I could make it activate when they click (because I bet that's what most people do). Any thoughts? Any one?
Comments have been turned off for this page.