Block Model Additions: Border Overlap

Rationale:

Blocks may have borders. Within a table element, designers can control what 
happens to those borders when the blocks they surround are adjacent (visibly, 
but not necessarily within the HTML document). Borders can overlap, and there 
are rules about which border will show when the overlap occurs. Borders can 
touch. Borders can also be separated by some (small) distance and the border 
itself can be expanded to fill that gap, combining the two borders into a 
single, wider border. Borders can also overlap when the parent (table) element’s 
border combines with the children’s borders.

To provide similar border-overlap behavior in other situations (outside of 
tables) the following CSS style rules are proposed.

Proposal:

'border-overlap', 'border-overlap-top’, border-overlap-right’, 
border-overlap-bottom’, ‘border-overlap-left’
     Value:          normal | none | fill | lap | lap-min | lap-max
     Initial:        normal
     Applies to:     all elements except elements with table display types other 
than table-caption, table and inline-table
     Inherited:      yes
     Media:          visual

normal    use normal border overlap behaviors. (No overlap unless in a table.)
none      no overlap, use both full borders, touching if no space between them.
fill      if there is a margin (gap) between borders, expand it to fill the gap.
lap       use CSS 2.1 border overlap rules 
(http://www.w3.org/TR/CSS21/tables.html#borders).
lap-min   overlap borders, but draw only the thinnest one.
lap-max   overlap borders, drawing only the widest one.

‘border-overlap’ sets overlap styles for all four sides of the box. 
‘border-overlap-top’, ‘border-overlap-right’, ‘border-overlap-bottom’, and 
‘border-overlap-left’, set overlap rules for each block side (top, right, 
bottom, and left) separately.

If no border is styled for any side, there can be no overlap or fill, so the 
style value becomes ‘normal’. (Normal style behavior is no border overlap except 
within tables.)

If there is a margin between the borders (or padding between a parent and 
child’s borders), ‘fill’ expands the color of the first border (left or top) up 
to the next border, so there is a wide border between the blocks. If there is no 
margin, fill means the same as ‘none’ -- that is, the adjacent borders touch but 
do not overlap.

In the case of a margin (or padding) between the borders, all the styles except 
for ‘fill’ are assumed to mean ‘normal’. Since no border overlap is possible 
(without filling), ‘normal’ and ‘none’ mean no overlap. And all of the ‘lap’ 
styles are ignored as no overlap is possible.

When there is no margin (or padding) between the borders, ‘fill’ means ‘let the 
borders touch but do not overlap them. The ‘lap’ styles come into play here only.

To handle the case where adjacent elements (parent-child, left-right, or 
top-bottom) have different borders, the ‘lap’ styles decide which border style 
will be displayed. This assumes that the adjacent elements have the same 
border-overlap styles.

When the adjacent elements (again visibly adjacent, either side-by-side or 
parent-child appearance, not necessarily adjacent within the HTML file) have 
different border-overlap styles, some disambiguating rule needs to be 
formulated. I am currently considering the use of the FIRST element’s style as 
the controlling value. This would let the parent block’s border-overlap style 
overrule the child block’s and the first (topmost in vertical block sets and 
leftmost in horizontal block sets) block’s border-overlap style would overrule 
the subsequent block’s style.

Other rules are possible, such as: The further down on the border-overlap styles 
list, the higher priority; this means that everything overrides ‘normal’, ‘fill’ 
overrides ‘none’, ‘lap’ overrides ‘fill’, ‘lap-min’ overrides ‘lap’, and 
‘lap-max’ overrides ‘lap-min’.

The special border styles for within table elements (‘border-collapse’, 
‘border-spacing’, and ‘empty-cells’) have different assumptions than the 
proposed ‘border-overlap’ styles, as table cells (<td> or <th>) have no 
individual padding, border, or margin styles.


-- 
James Elmore

Received on Monday, 9 July 2007 00:43:01 UTC