Re: inline box questions!! (yes, again :)

[At the bottom of this e-mail I suggest a clarification to the
definition of the 'outline-*' properties.]


On Thu, 16 Sep 1999, Ranjit Singhe wrote:

> below [snipped] is some html that i ran thru gecko.
> i'm also attaching a jpeg that is the screen shot of this html
> rendered by gecko.

Gecko is 100% correct. Yay!


> now for the question: why is the background decoration affected only
> by the base line height and not by the content?? intuitively (to
> me!) i would expect the yellow box to
> 1. surround all the text and the image; OR
> 2. surround all the text, but not replaced elements.
> instead, it seems to me to surround only the line-height size.

What happens is that each inline element (including the replaced
content box) is styled separately -- the contents of an inline box
have no effect on the parent box. Backgrounds on inline elements are
drawn around the font (the line- height property is irrelevant for
this). So the net effect is that the outermost SPAN element has its
background drawn around _its_ text, with the padding and border at a
certain offset from the font.

If you wanted the span and all its contents to have the border and
background, then try this (not yet implemented in Gecko though):


   <style type="text/css">
      .tmpB {
         outline: dashed black;
         font-style: italic;
         color: black;
      }
      IMG { border-style: solid; }
      .tmpB, .tmbB * {
         padding: 5px;
         background-color: yellow;
      }
   </style>

   <!-- ... -->

   <span class="tmpB">Some
   <big><big><big><big>te(y)xt</big></big></big></big> in a box, <img
   src="http://www.google.com/google.jpg"> with an embedded
   image.</span>

However, the spec is unclear as to how exactly children inlines should
affect an outline.

I believe that the following text should be added to the definition of
'outline' in the next version of CSS. It could be made clearer though.

   If an outline is drawn around an inline element, and that inline
   element has children, then the outline should be drawn around the
   outermost border edge of the children.

   Example:

      <style type="text/css">
         span { font-size: 4px; outline: thin solid; }
         big { font-size: 7px; padding: 1px; }
      </style>

      <span> A <big> B </big> D </span>

   This would render as:

             +--------+
             |        |
             | #####  |
             | ##  ## | 
      +------+ ##  ## +------+
      | ####   #####   ##### |
      |##  ##  ##  ##  ##  ##|
      |######  ##  ##  ##  ##|
      |##  ##  #####   ##### |
      +------+        +------+
             +--------+

This would allow for focus outlines to work sensibly -- with the
current definition, I think focus outlines on links with bigger text
inside them would not be drawn as expected and as drawn in web
browsers now.

--
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 Thursday, 16 September 1999 14:24:08 UTC