[go: up one dir, main page]

CSS Block Model Additions: Caption

Just so that things don't get too dull, here is some possible text defining the 
inclusion of <caption> elements in all 'block' elements. This is based on CSS 
2.1 (because I don't have access to the CSS 3 Table specification. I checked the 
HTML 5 specification and prefer my solution to the one proposed there (<figure> 
with contained <legend>), because that forces an additional layer of nesting.)



<caption> elements

The user may specify that any block will have a caption. The <caption> element, 
if specified, must be the first element inside the block element. If more than 
one caption element exists inside a single block, only the first one is used and 
the rest are ignored.

A block which contains a caption is drawn with the block margin moved out on one 
side enough to place the caption between the border and the margin. If no margin 
is present, the caption (and its defined bounding box, including margins) are 
treated as the margin on the caption side of the block. If no border is present, 
the caption is drawn between the padding and the margin. Boxes which have no 
borders or padding will have the caption drawn between the content and the margin.

Normal rules for margin-collapse apply to captions. The usual case will have the 
caption margin closest to the rest of the block remain and the caption margin 
farthest from the block collapse into the block’s margin. [If ‘margin-collapse’ 
styles are approved, this will be controllable.]

The ‘caption-side’ property specifies where the caption will be drawn. [In CSS 
2.1, the values for ‘caption-side’ were ‘top’, ‘bottom’, or ‘inherit.’ I prefer 
to use ‘before’, ‘after’, and ‘inherit’ to include captions in blocks when text 
flow is (for example) top-to-bottom. If text flow is top-to-bottom and lines 
stack right-to-left (as in some Chinese texts), ‘before’ will be on the right of 
the block and the caption will be displayed top-to-bottom.]

'caption-side'
     Value:              before | after | inherit
     Initial:            before
     Applies to:         'block-caption' elements
     Inherited:          yes
     Percentages:        N/A
     Media:              visual
     Computed value:     as specified

This property specifies the position of the caption box with respect to the
containing block. Values have the following meanings:

before
     Positions the caption box before the containing box, in the direction of 
line-stacking.

bottom
     Positions the caption box after the containing box, in the direction of 
line-stacking.

To align caption content horizontally within the caption box, use the 
'text-align' property.

In this example, assuming standard English text, the 'caption-side' property 
places captions after (below) blocks. The caption will be as wide as the block 
parent, and caption text will be left-justified.

caption { caption-side: after; width: auto; text-align: left }


-- 
James Elmore
22162 Windward Way
Lake Forest, CA 92630
Home	(949) 830-9534
Email	James.Elmore@cox.net

Received on Wednesday, 4 July 2007 21:29:44 UTC