The outline property on inline elements

[ Parts of this post are based on part of a post I made to
netscape.public.mozilla.layout. ]

I think the following statement, in CSS2's definition of the
outline property [1], should be changed

  Outlines may be non-rectangular. For example, if the element is
  broken across several lines, the outline is the minimum outline that
  encloses all the element's boxes.

It is unclear from this statement whether it is line boxes or inline
boxes that are to be enclosed.  The wording makes it seem like inline
boxes (the boxes of the element) rather than line boxes (the boxes that
enclose each line and extend from top of the the highest element in the
line to the bottom of the lowest, including the half-leading around
each element, which the inline boxes do not).

The inline boxes are often separated by line-height (which does not add
to the size of their inline boxes, but increases the size of the line
boxes since the half leading is [font-size - line-height]/2).  Thus
such a minimum outline would be enclosing areas, possibly large ones,
that are not in the element's boxes.  For example, with a line-height
of four (so the effect is visible with ASCII art), the outline would be
very strangely shaped if it were the minimum such outline:

             _________________________
This is some |text that has an inline|
             |          --------------
             |          |
_____________|          |
|element with an outline|in it.
-------------------------

This makes me think that some solution with the line boxes, rather than
the inline boxes, would be better.  However, it would be complicated to
specify and to implement, because the inline elements aren't associated
with parts of the line box.  It still might be better for simple cases
like the one above.  However, it would cause even worse problems in
complicated (but perhaps more common) situations.  For example, if
there is an image (or a tall first letter) in the line, the outline
would have to be strangely shaped (with the outline dotted this time):

                       ---------                    ................
                       |       |                    .              .
                       | IMAGE |                    .              .
                       |       |                    .              .
This is a line with an --------- in it, and this is . an inline box.
.................                                   ................
.with an outline.
.................

This I think the best solution is to have the outline go just outside
the border for inline elements, with the one difference with borders
being that it is drawn at line breaks, where the border is open.

I really don't see much reason, especially considering the
complications, to prefer (as CSS2 does):

                         ---------------------
This is a paragraph with |a very long inline |
--------------------------                   |
|box in it that is split over multiple lines.|
----------------------------------------------

over:
                         --------------------
This is a paragraph with |a very long inline|
-------------------------====================-
|box in it that is split over multiple lines.|
----------------------------------------------

since the rules necessary to achieve the first effect cause serious
problems in what are probably the more common cases of short inline
elements (such as anchors).

I think this should be an erratum to CSS2.

David

[1] http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines

-- 
L. David Baron     Rising Sophomore, Harvard     dbaron@fas.harvard.edu
Links, SatPix, CSS, etc.        < http://www.fas.harvard.edu/~dbaron/ >
Summer Intern, Netscape - however, opinions are entirely my own, etc.

Received on Saturday, 10 July 1999 14:38:58 UTC