recently though about image captions, then i realized that this could be achiebed by Markdown Extra's definition list feature: ![alttext](http://exampl.com/img.jpg) : here goes the *caption* What do you think? -------------- next part -------------- An HTML attachment was scrubbed... URL: <http://six.pairlist.net/pipermail/markdown-discuss/attachments/20120622/bc52d116/attachment.htm>
On Fri, Jun 22, 2012 at 7:00 AM, Jakob <jakov at gmx.at> wrote:> ?recently though about image captions, then i realized that this could be > achiebed by Markdown Extra's definition list feature: > > ![alttext](http://exampl.com/img.jpg) > : here goes the *caption* > > What do you think?Hmm, what HTML are you suggesting that output? Standard Definition List HTML? How would that translate to a "caption"? -- ---- \X/ /-\ `/ |_ /-\ |\| Waylan Limberg
> Von: Waylan Limberg <waylan at gmail.com> > Hmm, what HTML are you suggesting that output? Standard Definition > List HTML? How would that translate to a "caption"?In the meantime I rethought my proposal, but for the sake of being backwards compatible with HTML4: I think it should take a "figure" class (only when it is only images and that definition line), like this: ``` <dl class="figure"> <dt><img alt="alt text" src="http://example.com/img.jpg"></dt> <dd class="figcaption">the caption</dd> </dl> ``` like this i would be very similar to the HTML5 stuff (and could be easily handled in CSS with `.figure {}` in HTML4 or just `figure {}` in HTML5): ``` <figure> <img alt="alt text" src="http://example.com/img.jpg" > <figcaption>the caption/figcaption> </figure> ``` -- NEU: FreePhone 3-fach-Flat mit kostenlosem Smartphone! Jetzt informieren: http://mobile.1und1.de/?ac=OM.PW.PW003K20328T7073a
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>©2012 Wikimedia / GPL </dl> </div> Regards, TH On Jun 22, 2012, at 7:00 AM, Jakob wrote:> recently though about image captions, then i realized that this could be achiebed by Markdown Extra's definition list feature: > > ![alttext](http://exampl.com/img.jpg) > : here goes the *caption* > > What do you think?
> ![alttext](http://exampl.com/img.jpg) > : here goes the *caption*I *really* like this proposal. It takes the extant image and DL (in Extra-style implementations) syntaxes and smartly combines them into something even better when they?re mashed-up. Very memorable and visually meaningful. This is easily the most exciting proposed syntax extension I can remember seeing on this list. -------------- next part -------------- An HTML attachment was scrubbed... URL: <http://six.pairlist.net/pipermail/markdown-discuss/attachments/20120622/ab3722ac/attachment.html>
On Fri, Jun 22, 2012 at 4:00 AM, Jakob <jakov at gmx.at> wrote:> ?recently though about image captions, then i realized that this could be > achiebed by Markdown Extra's definition list feature: > > ![alttext](http://exampl.com/img.jpg) > : here goes the *caption* > > What do you think?For reference, here's Russ Weakly in 2004: http://www.maxdesign.com.au/articles/definition/ LQ -- Lou Quillio http://quillio.com/
Le 2012-06-23 ? 8:19, Jakob a ?crit :>>> Beside, before we add captions to images, perhaps we could add captions >> to >>> tables. I know MultiMarkdown already has that, but not PHP Markdown >> Extra. >>> Once we have that we could find a similar way to add caption to various >>> other things which would wrap the said thing in a figure element. In >> short, >>> it should be pretty much the same syntax for both. >> >> I totally agree! But why not use the same syntax?: >> >> ! caption of the table >> | user | password | >> |-------|----------| >> | frank | 123456 | >> | mike | mypass | > > I think it should be posisible to use tables with captions inside of a figure element: Therefore we need a different syntax for the table caption.Not at all. If we want to allow anything inside a figure element (as HTML5 permits), then all we have to do is force the figure content to be indented. You could even nest figures that way. Idea: use "!" to create a figure: [[ Figure 1: some image ]] ! ![image_alt](image_url "image title") [[ Figure 2: some text ]] ! paragraph this is it blah bla [[ Figure 3: some code ]] ! ~~~ <html> ~~~ [[ Figure 4: some table ]] ! [ Table 1: passwords for all my friends ] user | password ---- | -------- mike | mypass [[ Figure 5: nested figures ]] ! [[ Figure X: another figure ]] ! [[ Figure Y: yet another ]] ! this is getting ridiculous Now, just make the leading "!" and indentation optional for an image and you get this: [[ Figure 1: A simple image ]] ![image_alt](image_url "image title") And preceding the figure with a caption could be optional: ! some figure with text and without a caption -- Michel Fortin michel.fortin at michelf.com http://michelf.com/