Or, How to Reinvent an HTML Phrase Element for the Benefit of Universality
Most of my readers have a better understanding of formal English language than that which I use. I’ve used redundant statements in articles or cited Wikipedia pages for larger references when making vague allusions. However, one thing has always bothered me: inline definitions. I do not generally follow links and I'd wager that most site visitors do not either. I wanted an inline definition rollover for Universality which for me includes editorial content which includes slang, vague references and allusions that may be understood by all.
This was the first pun I learned but did not understand until my father explained it to me:
“Two old ladies went for a tramp in the woods but he got away.”
Most readers will understand that “tramp” means a hobo or—these days—a homeless gent. However, the joke arises when “tramp” is first understood to be walking or promenading.
And, that’s where my frustration rose. Web pages offer interactive elements. And, I wanted a simple mechanism to display inline definition.
HTML 4.01 Specification, 9 Text, 9.2 Structured text, 9.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM
“DFN: Indicates that this is the defining instance of the enclosed term.”
That would work.
And, the funny thing about the “title” attribute: it works on all HTML elements even if not all browsers acknowledge it.
The previous article Shakespeare knew Latin had a malaprop with a homophone between “heals” and “heels” that required an explanation. Or, definition. I wrote my HTML appropriately for my need.
“Time wounds all <dfn title="An unscrupulous person usually male" class="definition">heels</dfn>”.
The definition class is added for styling a different bottom border than what the abbreviation renders. I didn’t like the “title” display and it does not allow enough characters for long definitions, e.g., sixty-five characters in FireFox.
Sweet Titles Finalized by Dunstan Diaz was my selection after perusal of Smashing Magazine’s 40+ Tooltips Scripts With AJAX, JavaScript & CSS because Dunstan was kind enough to add a simple array,
tipElements : ['a','abbr','acronym'], // @Array: Allowable elements that can have the toolTip
However, I didn’t want those elements to have their titles affected by the Javascript —it was shortened, tipElements : ['dfn'], // @Array: Allowable elements that can have the toolTip (which was the single alteration I made to his code).
The style sheet was revised. And, I added cursor: help as another level of differentiation.
I have my inline definitions. Semantic or not. And, it degrades gracefully when Javascript has been shutoff.
I hope these DFN Titles are found useful. And, if I ever write about wordplay and cite L.H.O.O.Q. by Marcel Duchamp, then you’ll know what his joke was.
