Re: brainstorming -- SVG -- SMIL-like declarations in HTML

Hi David.

Dailey, David P.:
> I mentioned earlier today that I hoped to give some specificity to the
> sorts of things I was hoping for vis a vis declarative animation --
> SMIL like stuff.

It should be pointed out that IE does actually support SMIL in HTML
documents, with HTML+TIME [1,2].  This seems to be slightly different
from SMIL Animation[3] or the SMIL 2 timing[4] and animation[5] modules.

> I should preface these remarks by saying I'm not sure if consensus
> has been established anywhere yet on how one assigns colors to an
> identified object in a web page.
>
> 1. 
> <div id="Q" style="background:red">
> <div id="Q" bgcolor="red">
> <div id="Q" onbuild="function (){this.color="red"}>
> I don't really care how we end up doing it (though I will express
> dismay at the oddities associated with doing it at the current time)

All of those are possible.  Are you asking what’s the “accepted” way of
doing it?  If it’s just stylistic, then an external CSS stylesheet is
probably better.

> Nor do I know if there is a common understanding about how one is
> expected to rotate an image in a web page:
>
> 2.
> <div style="rotate:2*pi/5"><img src="Q.jpg"></div>??
>  
> The last time I looked into it was some years ago. It seems as though
> IE had one way to do it and Netscape didn't, but I don't really
> remember. One ought to be able to rotate an image, it seems, though
> this isn't the point.

Rotations and other transformations don’t fit nicely into the CSS box
model.  In Opera at least you could have an SVG fragment within your
HTML that draws a rotated image.

> There does seem to be a way to translate things:
>  
> 3.
> <div id="Q" style="position:absolute;left:200;top:100"><img src="Q.jpg"></div>
>  
> ( I will hope that someone can tell me it is easier than this in some
> existing standard -- since it seems a bit cumbersome)

No, that’s how you’d do it.

> So let's assume in some standardized markup syntax, we have a way of
> specifying color, rotation and position of the content in a div tag
> and let us, for sake of glossing over the exact nature of that syntax,
> encode the pseudo-markup as:
>
> <pseudo>
> 1.
> <div><style color="red"></div>
>  
> 2. 
> <div><style rotation="72"><img src="Q.jpg"></style></div>
>  
> 3. 
> <div><style x="50%" y="100"><img src="Q.jpg"></style></div>
> </pseudo>

I don’t think you need a special syntax like this.  Allowing arbitrary
affine transformations is a different issue I think, but for the other
things you mention there are ways to do them currently, and these can
fit in to the SMIL model of animating attributes nicely.

> Then why can't we let people do something like:
>  
> <pseudo>
> 1. <div><style color="red">
> 
>     <animate attributeName="color"  dur="15s" 
> 
>      values="green;yellow;magenta;white;cyan " repeatCount="indefinite"/>
> 
> </style>
> 
> </div>

In HTML+TIME in IE, you’d do this with:

  <html xmlns:t="urn:schemas-microsoft-com:time">
  <head>
    <?import namespace="t" implementation="#default#time2">
  </head>
  <body>
    <div style="color: red">
      <t:animate attributeName="color"
                 values="green;yellow;magenta;white;cyan" dur="15s"
                 repeatCount="indefinite"/>
      some text
    </div>
  </body>
  </html>

> 2. <div><style rotation="72"><animate attributeName="rotation"  dur="15s" 
> 
>      values="35;0;35" repeatCount="indefinite"/>
> 
> <img src="Q.jpg"></style></div>
>  
> (again this is pseudo-markup -- the way of doing this in SVG would be to use an animateTransform)

I don't think transforms can be done in HTML+TIME in IE.

> 3. 
> <div><style x="50%" y="100">
> <animate attributeName="x"  dur="15s" 
> 
>      values="10%;90%;10%" repeatCount="indefinite"/>
> 
> <img src="Q.jpg">
> </style></div>
>  
> </pseudo>
>  
> with results much as one would expect in SVG/SMIL as seen in Opera or IE/ASV?

As above, just use the animate element much like with SMIL.

> The code, involved in such declarative animations (I
> think most would agree) would be a whole lot simpler
> than what is involved in doing it with script (see
> http://srufaculty.sru.edu/david.dailey/pictures/graphics.htm as a
> simple example of rotating and translating "an image" with event
> handlers.)

I like the idea of being able to use SMIL in HTML documents.  I wonder
if, as with CSS being used for styling, there might be a case for taking
some animations out of the HTML and having them applied
externally–perhaps with XBL?  (SVG being more of a final form language,
there’s not so much of an issue with the “pollution” of
styles/animations in the document.)

Cameron

[1] http://www.w3.org/TR/NOTE-HTMLplusTIME
[2] http://msdn.microsoft.com/workshop/author/behaviors/reference/time2_entry.asp
[3] http://www.w3.org/TR/smil-animation/
[4] http://www.w3.org/TR/2005/REC-SMIL2-20050107/smil-timing.html
[5] http://www.w3.org/TR/2005/REC-SMIL2-20050107/animation.html

-- 
Cameron McCormack, http://mcc.id.au/
 xmpp:heycam@jabber.org  ▪  ICQ 26955922  ▪  MSN cam@mcc.id.au

Received on Monday, 26 March 2007 02:50:45 UTC