Image Caption Examples - Revision history

Annevk: Reverted edits by MxoRto (Talk); changed back to last version by Michel Fortin

2007-07-31T17:08:43Z

Reverted edits by MxoRto (Talk); changed back to last version by Michel Fortin

← Older revision		Revision as of 17:08, 31 July 2007
Line 30:		Line 30:
	----		----

	MacWorld magazine website uses two-row tables to add a caption to screenshots in [http://www.macworld.com/2006/06/firstlooks/flciviv/index.php this article]. Interestingly, they're not using the		MacWorld magazine website uses two-row tables to add a caption to screenshots in [http://www.macworld.com/2006/06/firstlooks/flciviv/index.php this article]. Interestingly, they're not using the <caption> element with is meant to be used inside <table>. By using it, they could have saved themselves the trouble of specifying a width for each of their screenshots without having the image description extending the table. Here is a simplified version of the markup used on this page:

			<pre>
			<table width="310" align="right">
			<tr><td>
			<img src="...">
			</td></tr>
			<tr><td>
			<p>[Caption Text or Image Description]</p>
			</td></tr>
			</table>
			</pre>

			----

			Wikipedia thumbnail image with caption can be reduced to this once the links are removed:

			<pre>
			<div class="thumb tright">
			<img src="..." alt="[Caption Text]" longdesc="..." />
			<div class="thumbcaption">
			[Caption Text]
			</div>
			</div>
			</pre>

			----

			Some documents ([http://www.stanford.edu/group/hopes/basics/basichd/a2.html example]) simply put the caption text inside the image.

			== Other Examples ==

			http://developer.apple.com/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/chapter_4_section_2.html

			<pre>
			<div>
			<a name="..." title="[Caption Text]"></a>
			<p>[Caption Text]</p>
			<img src="..." alt="[Caption Text]">
			</div>
			</pre>

			----

			http://medicine.plosjournals.org/perlserv?request=get-document&doi=10.1371/journal.pmed.0020228

			<pre>
			<div class="figureFM">
			<a name="..." id="..."></a>
			<img src="..."/>
			<h5>[Caption Text]</h5>
			</div>
			</pre>

			----

			http://www.darsie.net/string/

			<pre>
			<table WIDTH="346">
			<tr><td>
			<img align=top src="..." ALT="Photo of Position 1">
			</td></tr>
			<tr><td>
			Position 1
			</td></tr>
			</table>
			</pre>

			== Mailing List References ==
			* [http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/2006-June/006828.html Rep: image captions], 27 June 2006 -- Michel Fortin

MxoRto at 11:53, 13 July 2007

2007-07-13T11:53:16Z

← Older revision		Revision as of 11:53, 13 July 2007
Line 30:		Line 30:
	----		----

	MacWorld magazine website uses two-row tables to add a caption to screenshots in [http://www.macworld.com/2006/06/firstlooks/flciviv/index.php this article]. Interestingly, they're not using the <caption> element with is meant to be used inside <table>. By using it, they could have saved themselves the trouble of specifying a width for each of their screenshots without having the image description extending the table. Here is a simplified version of the markup used on this page:		MacWorld magazine website uses two-row tables to add a caption to screenshots in [http://www.macworld.com/2006/06/firstlooks/flciviv/index.php this article]. Interestingly, they're not using the

	~~<pre>~~
	~~<table width="310" align="right">~~
	~~<tr><td>~~
	~~<img src="...">~~
	~~</td></tr>~~
	~~<tr><td>~~
	~~<p>[Caption Text or Image Description]</p>~~
	~~</td></tr>~~
	~~</table>~~
	~~</pre>~~

	~~----~~

	~~Wikipedia thumbnail image with caption can be reduced to this once the links are removed:~~

	~~<pre>~~
	~~<div class="thumb tright">~~
	~~<img src="..." alt="[Caption Text]" longdesc="..." />~~
	~~<div class="thumbcaption">~~
	~~[Caption Text]~~
	~~</div>~~
	~~</div>~~
	~~</pre>~~

	~~----~~

	~~Some documents ([http://www.stanford.edu/group/hopes/basics/basichd/a2.html example]) simply put the caption text inside the image.~~

	~~== Other Examples ==~~

	~~http://developer.apple.com/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/chapter_4_section_2.html~~

	~~<pre>~~
	~~<div>~~
	~~<a name="..." title="[Caption Text]"></a>~~
	~~<p>[Caption Text]</p>~~
	~~<img src="..." alt="[Caption Text]">~~
	~~</div>~~
	~~</pre>~~

	~~----~~

	~~http://medicine.plosjournals.org/perlserv?request=get-document&doi=10.1371/journal.pmed.0020228~~

	~~<pre>~~
	~~<div class="figureFM">~~
	~~<a name="..." id="..."></a>~~
	~~<img src="..."/>~~
	~~<h5>[Caption Text]</h5>~~
	~~</div>~~
	~~</pre>~~

	~~----~~

	~~http://www.darsie.net/string/~~

	~~<pre>~~
	~~<table WIDTH="346">~~
	~~<tr><td>~~
	~~<img align=top src="..." ALT="Photo of Position 1">~~
	~~</td></tr>~~
	~~<tr><td>~~
	~~Position 1~~
	~~</td></tr>~~
	~~</table>~~
	~~</pre>~~

	~~== Mailing List References ==~~
	* [http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/2006-June/006828.html Rep: image captions], 27 June 2006 -- Michel Fortin

Michel Fortin: Adding a reference to the mailing list archive

2006-11-17T14:51:13Z

Adding a reference to the mailing list archive

← Older revision		Revision as of 14:51, 17 November 2006
Line 98:		Line 98:
	</table>		</table>
	</pre>		</pre>

			== Mailing List References ==
			* [http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/2006-June/006828.html Rep: image captions], 27 June 2006 -- Michel Fortin

Michel Fortin: Image Caption Usage moved to Image Caption Examples

2006-11-17T14:08:49Z

Image Caption Usage moved to Image Caption Examples

← Older revision	Revision as of 14:08, 17 November 2006
(No difference)

67.68.112.91: Precised relation with the Image Caption page.

2006-11-17T02:25:21Z

Precised relation with the Image Caption page.

← Older revision		Revision as of 02:25, 17 November 2006
Line 1:		Line 1:
	This page is a collection of sample usage for images with captions from around the web. Markup samples provided here have been reformatted and often simplified by removing presentational elements to better illustrate what "defines" the figure in them.		This page is a collection of sample usage for images with captions from around the web. Markup samples provided here have been reformatted and often simplified by removing presentational elements to better illustrate what "defines" the figure in them.

			These real-world examples provides support for the [[Image Caption]] proposal.

	----		----

67.68.112.91: Examples of actual usage of image captions.

2006-11-17T02:15:37Z

Examples of actual usage of image captions.

New page

This page is a collection of sample usage for images with captions from around the web. Markup samples provided here have been reformatted and often simplified by removing presentational elements to better illustrate what "defines" the figure in them.

----

Some images in the CSS 2.1 specification ([http://www.w3.org/TR/CSS21/colors.html#img-bg-repeat example 1], [http://www.w3.org/TR/CSS21/tables.html#img-cell-align example 2]) use class names to add captions to figures. Reduced to a simpler form, the markup looks like this:

<pre>
<div class="figure">
<p><img src="..." alt="[caption text]">
<p class="caption">[Caption Text]
</div>
</pre>

(Note: Removed form this simplified markup is the [D] link to a long description that was put beside the image.)

----

Articles form the Salon.com magazine ([http://www.salon.com/opinion/blumenthal/2006/11/16/baker_rescue/index_np.html example]) use this markup for accompaniment photographs:

<pre>
<div class='article_photo_right'>
<img src='...'><br />
<p class='article_photo_credit'>Photo: [Photograph's Name]</p>
<p class='article_photo_caption'>[Caption Text]</p>
</div>
</pre>

----

MacWorld magazine website uses two-row tables to add a caption to screenshots in [http://www.macworld.com/2006/06/firstlooks/flciviv/index.php this article]. Interestingly, they're not using the <caption> element with is meant to be used inside <table>. By using it, they could have saved themselves the trouble of specifying a width for each of their screenshots without having the image description extending the table. Here is a simplified version of the markup used on this page:

<pre>
<table width="310" align="right">
<tr><td>
<img src="...">
</td></tr>
<tr><td>
<p>[Caption Text or Image Description]</p>
</td></tr>
</table>
</pre>

----

Wikipedia thumbnail image with caption can be reduced to this once the links are removed:

<pre>
<div class="thumb tright">
<img src="..." alt="[Caption Text]" longdesc="..." />
<div class="thumbcaption">
[Caption Text]
</div>
</div>
</pre>

----

Some documents ([http://www.stanford.edu/group/hopes/basics/basichd/a2.html example]) simply put the caption text inside the image.

== Other Examples ==

http://developer.apple.com/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/chapter_4_section_2.html

<pre>
<div>
<a name="..." title="[Caption Text]"></a>
<p>[Caption Text]</p>
<img src="..." alt="[Caption Text]">
</div>
</pre>

----

http://medicine.plosjournals.org/perlserv?request=get-document&doi=10.1371/journal.pmed.0020228

<pre>
<div class="figureFM">
<a name="..." id="..."></a>
<img src="..."/>
<h5>[Caption Text]</h5>
</div>
</pre>

----

http://www.darsie.net/string/

<pre>
<table WIDTH="346">
<tr><td>
<img align=top src="..." ALT="Photo of Position 1">
</td></tr>
<tr><td>
Position 1
</td></tr>
</table>
</pre>