Re: Display Property Suggestion

I'll give a brief outline first:

The display property should be extended to also take a url() in
conjunction with one of the keywords, thus:

  [ inline | block | list-item | run-in | compact | 
    marker | table | inline-table | table-row-group |
    table-header-group | table-footer-group | table-row |
    table-column-group | table-column | table-cell |
    table-caption ] <uri>? | none | inherit

The box that would be taken by the content is replaced, as replaced
elements are now, but with the <uri>. If it cannot be drawn, then the
contents are drawn instead (in the case of some psuedo-elements, the
content would actually be taken from the content property).

Also, the url() function should accept attr() too:
   
   url(attr(attributename))

----------

Here is my reasoning behind all this:

On Fri, 23 Oct 1998, Daniel Glazman wrote:
>
> graphic { display : image ;
>           content : url(attr(GRAPHICNAME))
>         }
> 
This isn't really general enough, IMHO.

Really, we are looking for some way of specifying where replaced
content comes from.

Replaced elements have intrinsic dimensions, so width:auto and
height:auto is enough to size them. However, we have three problems:
alternative text, specifying the url, and specifying that the thing in
question is replace.

I think we can do the last two quite easily by adding "url()" to the
list of accepted values of the display keyword. This would be _in
addition_ to one of the other keywords.

Hence: 

   graphic { display: inline url(attr(graphicname)) }

although note that IIRC nested functional notation is not yet allowed.
I suggest that it should be.

This leaves just the alternative content problem.

We could just say that if the element in question is not empty
(content is not ''), and the UA cannot (or has been configured not to)
render the replaced content, then it should render the contents of the
element.

Assume that the "graphic" element above can contain alternative
content:

   <graphic graphicname="movie.mov">
     <graphic graphicname="photo.jpeg">
       Text description.
     </graphic>
   </graphic>

Then

   graphic { display: block url(attr(graphicname));
             width: auto; height: auto; }

allows for graceful degradation easily (if the movie can't be replaced
in, then the photo is tried, if that doesn't work then the text is
displayed). This copes with HTML4's OBJECT. 

This can actually cope with the IMG element too:

   img:before { display: inline url(attr(src)); content: attr(alt); 
                width: auto; height: auto; }

By the rules given above, this tries to display the IMG's replaced
content inline, but failing that display's the alt text.

-- 
Ian Hickson

Received on Wednesday, 28 October 1998 13:38:25 UTC