RE: The outline property on inline elements

On Mon, 12 Jul 1999, Chris Wilson wrote:

> I would object very strongly to this change.  The original point of
> outline borders (I made the original proposal) was to provide CSS with
> a way to duplicate (actually, to provide control over) focus outlines,
> which typically are a minimum box when possible - because the focus is
> on a SINGLE element, not a collection of line boxes.

I take it the outline visible on focused links in IE5 is representative of
the effect expected by using 'outline', right?


David: I believe the way IE5 does the outline is fine. The spec is quite
open, really, about how outline should be rendered.

In the case you quote:

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

vs.

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

The "minimum outline" version can "easily" be made by simply not drawing
an outline where the outlines would overlap (a relatively simple way of
doing it, compared to the "lets actually work out the minimum outline"
manner). The outline is drawn around each piece of _text_ in an inline
box, much like a border is drawn around the text in an inline box, but
ignoring padding. Around replaced elements or block elements, the outline
is simply drawn around the box.

This method results in nicer looking outlines for inlines spanning
multiple lines, or with odd letters in the text.

Here is an example of what this causes if line-height is quite small,
making the outlines of successive lines overlap:

               +----------------------------------+
      This is a|long piece of text with some of it|
     +---------+                                +-+
     |outlined -- most of it, in fact, including|
     +-----------------+    +-------------------+
                       |####|
     +-----------------+####+--------------------+
     |this line with an #### image in it. This is| 
     +           +-------------------------------+
     |now the end|of the long paragraph.
     +-----------+

Notice that where the outline would overlap, it is not drawn. Also, notice
that the outline goes _around_ the image.

Here is another example, with line-height set to a larger value, meaning
that the lines do not overlap:

               +----------------------------------+
      This is a|long piece of text with some of it|
               +----------------------------------+
     +--------------------------------------------+
     |outlined -- most of it, in fact. But this is|
     +--------------------------------------------+
     +-----------+
     |now the end|of the long paragraph.
     +-----------+

And here is an example with the outline broken over two lines, with no
chance of overlapping:
                                         +------+
      This is a short piece of text, with|only a|
     +----------+                        +------+
     |little bit|outlined.
     +----------+

This is effectively the way that IE5 does it now with the focus outline of
anchors -- although it doesn't support 'outline', nor the other outlines
styles.

-- 
Ian Hickson
: Is your JavaScript ready for Nav5 and IE5?
: Get the latest JavaScript client sniffer at 
: http://developer.netscape.com/docs/examples/javascript/browser_type.html

Received on Friday, 16 July 1999 18:26:50 UTC