Re: replaced inlines [was: vertical-align content-generated image?]

Ian Hickson wrote:
> 
> In the relevant CSS3 module, I would hope to see some way of 
> specifying the content of replaced elements, which would go 
> some way towards fixing this. Do you have any syntax ideas? 
> That would be most helpful...

Kinda hard to translate a text without the text. What exactly 
do you want to express? Or are you looking for something original? 
Syntax isn't the same as concept...

Some things to think about-- [slightly off-topic]

I) The relationship between infinity and 'display' 
  (This is pretty neat)

  If I have an inline box, I can put an infinite number of 
  empty inline boxes around it and an infinite number of 
  empty inline boxes just inside it, and still wind up with 
  the same thing.*

    (* Except it breaks explicit inheritance.)
  
  I can do the same thing with 'display: block' and 
  'display: table'.
  
  But, I can't do that with 'display: inline-block' or 
  'display: inline-table' (both of which behave like 
  replaced inlines) because they create line boxes within
  the containing inline-block/inline-table and align 
  themselves to the baseline.

  Likewise, if I have an inline box, I can put an infinite
  number of empty inline boxes just before it and an infinite 
  number of empty inline boxes right after it, and still wind 
  up with exactly the same thing.

  And /this/ not only applies to 'inline', 'block', and 
  'table' but to 'inline-block' and 'inline-table' as well.

II) Do all empty inlines exist, or just some of them?

  There was a discussion in March on line boxes and such-like.
  I remember you gave an argument where you gave an example
  and began reducing it.[1] So, I'm going to do something
  similar here.

  Here's your basic image case--
  Given the following HTML code:
    <IMG src="pic.gif" alt="a picture">

  and the following CSS rules:
    IMG {
          font-size: smaller;
          vertical-align: bottom;
    }

  Assuming an appropriate default stylesheet, <IMG> has
  'display: inline'. So, we construct our frame tree:
    [IMAGE]

  and draw a diagram:

      parent line box
  ___/________________________________________________________
  ------------------------------------------------------------
              

                     <IMG> box
                  __/______________________
      parent     |                         |
     / baseline  |                         |
  ,,,,,,,,,,,,,,,|,,,,,,,,,,,,,,,,,,,,,,,,,|,,,,,,,,,,,,,,,,,,
      parent     |                         |
     / inline    |                         |
  ---------------|-------------------------|------------------
  ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ

  Ok. Now suppose I added the following rule:
    IMG:before {
          content: 'p'
    }

  We wind up with the following tree:

  <INLINE>
    <inline>p</inline>
    [image]
  </INLINE>

  The <IMG> box is no longer that of a replaced element, but
  a regular inline box. I cannot apply width or height to it,
  but vertical-align still applies--with the following result:

      parent line box
  ___/________________________________________________________
  ------------------------------------------------------------
      <IMG> inline             IMG:before inline
                  \-----------/-----------------------------
                   : :      :/ _________________________   :
                   : :      : |                         |  :
      parent       : :      : |<-image box              |  :
     / baseline    : :      : |                         |  :
  ,,,,,,,,,,,,,,,,,:,:,ppp,,:,|,,,,,,,,,,,,,,,,,,,,,,,,,|,,:,,
                   : : p  p : |                         |  :
      parent       :.:.ppp..:.|_________________________|..:
     / inline      : : p   ^<IMG> baseline                 :
  ------------------------------------------------------------
  ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ

  And now, I append another CSS rule:

    IMG:before {
          content: "";
    }

  IMG:before becomes an empty inline:
    <INLINE>
      <inline/>
      [image]
    </INLINE>

  However, empty inlines still affect line layout[2], so to
  draw a diagram of the resulting layout, all I have to
  do is delete the "p" from my previous one:

      parent line box
  ___/________________________________________________________
  ------------------------------------------------------------
                       IMG:before inline
                   ---/-------------------------------
     <IMG> inline->: ::  _________________________   :
                   : :: |                         |  :
      parent       : :: |<-image box              |  :
     / baseline    : :: |                         |  :
  ,,,,,,,,,,,,,,,,,:,::,|,,,,,,,,,,,,,,,,,,,,,,,,,|,,:,,,,,,,,
                   : :: |                         |  :
      parent       :.::.|_________________________|..:
     / inline      :^<IMG> baseline                  :
  ------------------------------------------------------------
  ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ

  Curiously enough, the default value for 'content' is the
  empty string ("").[3] I can just delete those IMG:before rules
  and get the same result. 
  Oh, wait.. my diagrams don't match..

  So, which obscure clause did I skip this time?

~fantasai

----references----
[1] Hickson, Ian. "Re: CSS 2: Table Cells and the "line-height"
      Property", www-style. (2001-03-20).
    http://lists.w3.org/Archives/Public/www-style/2001Mar/0119.html

[2] http://www.w3.org/TR/REC-CSS2/visudet.html#line-height

[3] http://www.w3.org/TR/REC-CSS2/generate.html#content

Received on Saturday, 2 June 2001 19:01:26 UTC