A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

Difference between revisions of "Image Caption"

From WHATWG Wiki
Jump to navigation Jump to search
(Begun explaining the problematic, this isn't very complement at the moment.)
 
(Completed <figure> with <caption>)
Line 21: Line 21:


=== <figure> with &lt;caption> ===
=== <figure> with &lt;caption> ===
:''Brief description of the solution and of how it address the problem at hand.''
A <figure> element contains illustrative content for the current section. It can contain a &lt;caption> element, either as the first or the last child, that will be used to describe or give a caption to the content of the figure.


<pre>
<pre>
Line 30: Line 30:
</pre>
</pre>


==== Details ====
==== Processing Model ====
:''Explanation of the changes introduced by this solution. It explains how the document is processed, and how errors are handled. This should be very clear, including things such as event timing if the solution involves events, how to create graphs representing the data in the case of semantic proposals, etc.''
The processing model for HTML files must be changed so that the &lt;caption> is no longer ignored when outside the context of a table. It could also be a good idea to add a new figure insertion mode that would prevent figure captions from being moved to the enclosing table when inside a table cell, otherwise &lt;figure> will break in table-based layouts.


<pre>
<pre>
Line 44: Line 44:
</pre>
</pre>


==== Limitations ====  
==== Limitations ====
:''Cases not covered by this solution in relation to the problem description; other problems with this solution, if any.''
&lt;caption> being ignored by current browsers when outside a table makes it impossible to style, and it'll also be terribly broken with table layouts when figure captions end up at the top (or the bottom) of the enclosing table.


==== Implementation ====  
==== Implementation ====
:''Description of how and why browser vendors would take advantage of this feature.''
Parsing changes in this section could be hard to implement is the &lt;caption> element's legacy within &lt;table>. So it is uncertain
 
Putting aside the parsing problem, there's not much else to implement for visual browsers. A good display model that could be used to display figures is already available in CSS 2.1:
 
<pre>
figure { display: table; }
caption { display: table-caption; }
</pre>
 
This would display the figure as a one-cell table, and the caption either at the top or at the bottom (depending on the [http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side caption-side] property). The interesting part of this model is that the caption's width is constrained by the width of the figure, making it the ideal choice for floated figures.


==== Adoption ====  
==== Adoption ====  
:''Reasons why page authors would use this solution.''
The syntax is pretty straightforward to use. "figure" and "caption" are commonly used terms to designate exactly this feature in the print world. It should be a natural choice to authors that wonder how to markup their images.
 
This markup won't work however if an author wants the caption to be elsewhere in the document. (In this proposal, &lt;caption> is pinned to the figure's content.) It does not seem a common use case however.


== Usage ==
== Usage ==
:''Some evidence is there that this feature is desparately needed on the web.''
:''Some evidence is there that this feature is desparately needed on the web.''

Revision as of 15:36, 16 November 2006

Image caption are often found on the web, but there is no standard markup for this.

Problem Description

Currently, most people use either a table, custom class names, or simply put the image inside a paragraph, each option either conveying a wrong meaning or being ambiguous with the rest of the content.

An interesting analysis has been done on the subject by Dan Cederholm in one of his SimpleQuiz. His conclusion:

So in this case, I might choose option A -- because visually it shows the relationship between the items better than the others. But I suppose this is bad semantics. Or maybe just another case where we don't have the 'perfect' set of defined elements for this (very) specific job.

And his option A was:

<p><img scr="..."><br />
   Caption Text</p>

In other word, he could not figure out anything good using current elements available in HTML, and, as most people do, had to create his own solution.

Setting a standard for such things -- an explicit association between the caption and the illustration -- would help image search engines, it could enable the automatic creation of a figure index for a page and the creation of assistive tools capable of handling illustrations better.

Proposed Solutions

<figure> with <caption>

A <figure> element contains illustrative content for the current section. It can contain a <caption> element, either as the first or the last child, that will be used to describe or give a caption to the content of the figure.

<figure>
  <caption>Caption Text</caption>
  <img src="...">
</figure>

Processing Model

The processing model for HTML files must be changed so that the <caption> is no longer ignored when outside the context of a table. It could also be a good idea to add a new figure insertion mode that would prevent figure captions from being moved to the enclosing table when inside a table cell, otherwise <figure> will break in table-based layouts.

<table>
<tr><td>
  <figure>
    <caption>Caption Text</caption>
    <img src="...">
  </figure>
</td></tr>
</table>

Limitations

<caption> being ignored by current browsers when outside a table makes it impossible to style, and it'll also be terribly broken with table layouts when figure captions end up at the top (or the bottom) of the enclosing table.

Implementation

Parsing changes in this section could be hard to implement is the <caption> element's legacy within <table>. So it is uncertain

Putting aside the parsing problem, there's not much else to implement for visual browsers. A good display model that could be used to display figures is already available in CSS 2.1:

figure { display: table; }
caption { display: table-caption; }

This would display the figure as a one-cell table, and the caption either at the top or at the bottom (depending on the caption-side property). The interesting part of this model is that the caption's width is constrained by the width of the figure, making it the ideal choice for floated figures.

Adoption

The syntax is pretty straightforward to use. "figure" and "caption" are commonly used terms to designate exactly this feature in the print world. It should be a natural choice to authors that wonder how to markup their images.

This markup won't work however if an author wants the caption to be elsewhere in the document. (In this proposal, <caption> is pinned to the figure's content.) It does not seem a common use case however.

Usage

Some evidence is there that this feature is desparately needed on the web.