Definition list as image caption

[Waylan Limberg]

On Fri, Jun 22, 2012 at 12:05 PM, Thomas Humiston <tom at jumpingrock.net> wrote:

> It's a good idea, Jakob. Despite the name of this HTML element (which HTML5 moves to rename as "description list"), it exists for exactly the sort of purpose you suggest -- or, as I like to say, "DT is some object, DD is something *about* that object".

>

> No matter which implementation of Markdown (or anything else) one uses to wrap content in HTML, the question is, "What HTML element is appropriate for the job?" The answer isn't always stark, and DL has long been undervalued, misunderstood, and largely forgotten, but it is indeed the best choice in this case.

>

> And in situations where the text includes discrete bits, such as a photograph's copyright info and the name of the photographer in addition to the caption, we see that it indeed becomes list-like, so that the appropriateness of using DL becomes even more apparent.

>

> Here's an example of styling for a photo and caption info in a DL element. (Note: I made up the copyright info. If Wikipedia even allows hotlinking to their photos, I'd first look up the correct way of doing it before using this on a real site.)

>

>

> div#example {

>  max-width: 20em;

>  }

> dt {

>  padding: 5px;

>  border: 1px solid gray;

>  margin-bottom: 5px;

>  }

> dt img {

>  width: 100%;

>  height: auto;

>  }

> dd {

>  margin-left: 0; /* removes the indent */

>  color: gray;

>  font-size: small;

>  }

> dd.maker, dd.copyright {

>  font-style: italic;

>  font-size: x-small;

>  margin-top: 1em;

>  }

> dd.maker {

>  float: left;

>  margin-right: 2em;

>  }

> dd.copyright {

>  float: right;

>  }

>

>

> <div id=example>

> <dl>

> <dt><img src="http://upload.wikimedia.org/wikipedia/commons/f/fd/Fuzzy_Freddy.jpg" alt="Foxy Freddy, from Wikipedia">

> <dd>Fox is a common name for many species of omnivorous mammals belonging to the Canidae family.

> <dd class=maker>Photo by Rob Lee

> <dd class=copyright>&copy;2012 Wikimedia / GPL

> </dl>

> </div>


Now, this is a proposal I can get behind - sort of. Of course its
really a non-proposal because it is already possible with no
modification to at least some implementations. The only proposal here
is to determine what hooks the CSS should expect. And I've never seen
markdown require specific classes as styling hooks. But, hey, if you
want to standardize internally within your organization, that is a
good starting place.

The best part is, any implementation that already supports definition
lists, markdown processing inside raw html blocks and attribute lists
[1] [2] can generate that output. The input would look like this:

<div class="example" markdown=1>

    ![Foxy Freddy, from Wikipedia]
    (http://upload.wikimedia.org/wikipedia/commons/f/fd/Fuzzy_Freddy.jpg)
    :    Fox is a common name for many species of
         omnivorous mammals belonging to the Canidae
         family.
    :    Photo by Rob Lee
         {: .maker }
    :    &copy;2012 Wikimedia / GPL
         {: .copyright }

    </div>

The key is that the wrapping div has a hook set (changed it to a
class, not an id - otherwise you could only have one
image-with-caption per page) identifying it as a image-with-caption.
Author a definition list without that div/class hook, and it is a
regular definition list. Either way, the markdown parser does the same
thing. Only the CSS cares and alters how it is displayed. Again, a
non-proposal as far as Markdown is concerned.

[1]: http://maruku.rubyforge.org/proposal.html#attribute_lists
[2]: http://packages.python.org/Markdown/extensions/attr_list.html

-- 
----
\X/ /-\ `/ |_ /-\ |\|
Waylan Limberg