bowdenweb

Using ruby with dl for English Words

After reading up on dl and the ruby elements on the super awesome html5Doctor, I was inspired to add this markup to my own dev glossary. Being the anal-retentive loser that I am, I frequently visit dictionary.com for correct spellings, and knew they had a viable use for the ruby element already in their markup. So I simply just put them together, nothing new or out of the box here. Below is a screenshot of the dictionary.com reference mentioned:

So I whipped up a simple semantic glossary demo for your viewing pleasure. Below is a screenshot and the corresponding markup.

<dl> 
  <dt><ruby><dfn>Franscrollow</dfn> <rp>(</rp><rt>fran-scrahl-oh</rt><rp>)</rp></ruby></dt> 
  <dd>Verb that eliminates headaches and complexity by combining all relevant stalker-related buzzwords into one easy-to-remember term.  Friend + Fan + Subscribe + Follow = Franscrollow. So please, franscrollow me. You'll never be be made obsolete by smelly geeks again. It's the future, and you're welcome.
    <cite><a href="http://www.baratunde.com/franscrollow" title="Fanscrollow - baratunde.com"><b>Franscrollow</b> found here</a>.</cite></dd> 
  <dt><dfn><abbr title="XML Binding Language">xbl</abbr> (<abbr title="Extensible Markup Language">xml</abbr> Binding Language)</dfn></dt> 
  <dd>is a language for describing bindings that can be attached to <b>elements</b> in other documents. The <b>element</b> that the <b>binding</b> is attached to is called the <strong><em>bound element</em></strong>, acquires the new behavior specified by the <b>binding</b>. <b>Bindings</b> can contain <b>event handlers</b> that are registered on the <strong><em>bound element</em></strong>, an implementation of new <b>methods</b> and <b>properties</b> that become accessible from the <strong><em>bound element</em></strong>, and anonymous content that is inserted underneath the <strong><em>bound element</em></strong>. Most <abbr title="XML User Interface Language">xul</abbr> widgets are at least partially implemented using <strong><abbr>xbl</abbr></strong>. Developers can build their own widgets from existing <abbr>xul</abbr>, <abbr>html</abbr>, <abbr title="Scaleable Vector Graphics">svg</abbr>, and other primitives using <strong><abbr>xbl</abbr></strong>.
    <cite><a href="https://developer.mozilla.org/en/XBL" title="XBL - MDN Docs"><abbr>xbl</abbr> found here</a></cite></dd> 
</dl>