Re: Inline borders

Michael Day writes:
> 
> 
> Hi,
> 
> Why doesn't adding a thick border to an inline element affect the height
> of the line it is on? This causes the border to overlap the text.

Yes, that is the way it was designed. The idea is to avoid irregular
line spacing. A common way to indicate links used to be to draw a (3D)
border around the anchor. Paragraphs would look very ugly if the
presence or absence of a border influenced the line height.

In CSS3's "Line" module[1] there will be a property
'line-stacking-strategy' that allows a choice of line height
calculation methods. The exact set of values is still being refined,
but it will have a way to use the "margin edge" of an inline element
(i.e., the height including borders and margins) rather than the value
of 'line-height' to determine the height of the line.

The model behind the 'line-stacking-strategy' is that there is a list
of factors that may or may not be taken into account when determining
the height of each line in the block. A "strategy" is simply a
particular subset of factors.

Of course, when a certain factor is not taken into account, there is a
risk that lines overlap, but that may be precisely what you want. The
factors are:

   1. the 'line-height' property of the block itself
   2. the margin edge of replaced elements in the line
   3. font height of each glyph in the line
   4. the 'line-height' of non-replaced elements in the line
   5. the margin edge of non-replaced element in the line
   6. the extent of the actual "ink" of each glyph in the line
   7. the margin edge of ruby annotation elements in the line
   8. grid: the height must be an exact multiple of the block line-height

CSS1 and 2 use factors 1,2 and 4. To take inline borders into account,
you would need a strategy that includes 5. Factor 6 is useful for
initial caps (':first-letter'), but it is rather expensive to
calculate, so its use may be restricted to only apply to
':first-letter'. Ruby annotations (7) in Chinese or Japanese texts are
usually written in the existing space between the lines, but you can
choose to expand the line height only where needed. The "grid" aspect
is special, in that it doesn't provide a minimum for the line height,
but restricts the height to specific values.

This formulation in terms of sets of independent aspects is due to
David Baron. XSL-FO also has a 'line-stacking-strategy' property, that
provides the three most common strategies (for 1-5, since XSL-FO has
no ruby and grid), but the way it is explained is rather harder to
understand, I think.

[1] http://www.w3.org/TR/css3-linebox/



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos/                              W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Friday, 18 April 2003 07:27:53 UTC