Style, Multimedia, Relationships and HTML
-Ash on Jan 18 1998

1. Abstract
This article starts with : how adding style standards preserved the difference between structural markup and presentation attributes. It tries to extend style to support multimedia and points out why that’s a bad idea. It introduces a concept of relationships between the different XML applications that will be popular in their own domain.

2. HTML
HTML is an excellent language to represent how the user agent (browser) renders the document. <H1>Heading 1</H1> tell the browser to use the standard font, color, etc. for the <H1> tag. In other words, HTML defines the structure not the presentation. It was never intended to be used as a markup language for presentation. When the web mania swept the world, designers found side effects of how the browser rendered the HTML tags very useful for presentation. <TABLE> tags and invisible GIFs were used to for positioning Text and Graphics. Presentation tags were added like <Font>, <Blink> and <layer>. While the designers succeeded in creating a better-looking web, they had effectively created a web that was unusable for search engines, browser creators (bloating their browser to replicate the visual side effects of the other browsers). They left the web unusable for new user agents like speech browsers, webTV, etc. and any other program trying to make sense of HTML.

3. What is Style ?
The main problem was their hacking was merging two different concepts: structural markup and presentation attributes together. HTML defines the structural markup. Presentation attributes are independent of HTML and define style. CSS1 was the first step in the standards to define style. As the designers proved, Presentation is a very important part of the web. So important that it deserves to have an independent standard. CSS is independent of HTML and can also be used with any XML application. CSS defines the style that the browser will use to render the tag. Using HTML and Stylesheets, you can get the best of both worlds: structural markup and presentation.
4. Multimedia Style sheets
StyleSheets so far are used mainly for static presentation. One way to enhance them would be to add multimedia styles to spice things up. Multimedia style sheets could add dynamic effects like animation, synchronized music and a wide variety of multimedia effects to HTML elements. IE4 has limited support for filters and transitions, but we need to go beyond this.

<Style>
.AnimatePolygon { Path:Polygon(8, 50,100, 50,150, 100,100, 100,250, 50,250, 50,275, 25,150, 0,150); Duration:10 }
.AnimateOval { Path: Oval(50,50,400,200); Duration:10}
</Style>

<DIV>Hi there</DIV>HTMLPath

This is how sample animated styles using CSS can look like. Need to move your HTML elements around the place, add a multimedia style to your HTML element. Drop these styles into your HTML page. No messing around with scripting code.

Style attributes can be extended to support 3D Styles and Transformations, 3D effects to HTML elements, 3D lights, Sound and Music synchronization, etc.

However, while the resulting styles may be simpler than scripting, It is no different than randomly adding HTML tags. Adding Multimedia standards to style, again merges multiple standards together.

5. The Problem
The above solution does not take into account standards like PGML. Add vector paths to style sheets means duplicating the entire vector graphics primitives. Using styles to add 3D effects to HTML elements would mean duplicating some of the work that went into VRML. The reason why the above solution does not scale is multiple standards are meshed, in a big bad standard.

6. What’s needed ?
We need to go back to the basics and define what we are trying to do. Animating an HTML element using a Vector graphics path, in-effect means the HTML element follows a path defined by a vector graphics element. The two things are bound by a relationship – path.

Stated another way:
Relationship { HTML Element, Path , Vector Graphic Element }

6.1 HTML Element using a 2D path
HTMLherethere

Note : The XML syntax below is used to illustrate the idea of Relationships. I am NOT advocating it’s use.

One way to express that would be
<HT:DIV ID=”ID_DIV”>HTML here there everywhere</HT:DIV>
<PG:POLYGON ID=”ID_POLYGON”>…</PG:POLYGON>

<ELEMENT ID=”HT:ID_DIV”>
<RELATION>
<PATH DURATION=”10″ … >
<ELEMENT ID=”PG:ID_POLYGON” />
</PATH>
</RELATION>
</ELEMENT >

HTML Element using a 3D path
For a 3D path the relationship would be
Relationship { HTML Element, Path , VRML Element }
In this case the HTML element would be animated on a 3D path.

<HT:DIV ID=”ID_DIV”>HTML here there everywhere</HT:DIV>
<VR:POLYLINE ID=”ID_POLYLINE”> … </VR:POLYLINE>

<ELEMENT ID=”HT:ID_DIV>
<RELATION>
<PATH DURATION=”10″ … >
<ELEMENT ID=”PG:ID_POLYLINE” />
</PATH>
</RELATION>
</ELEMENT >

6.2 HTML Text using Images Textures
Relationship { HTML Element, Surface , HTML Image Element }
In this case the HTML element’s surface could be rendered using the image as the fill attribute for the HTML Text surface.
   HTMLherethere   <HT:DIV ID=”ID_DIV”>HTML here there everywhere</DIV>
<HT:IMG ID=”ID_IMG” SRC=”texture.jpg” />

<ELEMENT ID=”HT:ID_DIV>
<RELATION>
<SURFACE …>
<ELEMENT ID=”HT:ID_IMG” />
</SURFACE>
</RELATION>
</ELEMENT >

6.3 Images on 3D objects
Relationship { VRML Element, Surface , HTML Image Elements }
In this case the VRML element’s surface would show the image element.
   cubes   <VR:CUBE ID=”ID_CUBE”> … </VR:CUBE>
<HT:IMG ID=”ID_IMG” SRC=”texture.jpg” />
<PG:ELLIPSE ID=”ID_ELLIPSE”>…</PG:ELLIPSE>

<ELEMENT ID=”VR:ID_CUBE>
<RELATION>
<SURFACE REPEAT=TRUE … >
<ELEMENT ID=”HT:ID_IMG” />
</SURFACE>
</RELATION>

<RELATION>
<PATH DURATION=”10″ … >
<ELEMENT ID=”PG:ID_ELLIPSE” />
</PATH>
</RELATION>
</ELEMENT>

6.4 Lights
Relationship { HTML Element, Lighting , VRML Element }   lights   <HT:IMG ID=”ID_IMG” SRC=”texture.jpg” />
<VR:CONE ID=”ID_CONE”>…</VR:CONE>

<ELEMENT ID=”HT:ID_IMG>
<RELATION>
<LIGHT COLOR=”yellow”  … >
<ELEMENT ID=”VR:ID_CONE” />
</LIGHT>
….
</RELATION>
</ELEMENT>

6.5 Mathematical Relationships
Two HTML elements cannot be linked together. You cannot specify the last row or column of the table as sum of it’s elements. MML allows mathematical expressions to be specified and we use it to develop relationships between HTML elements.

<HT:DIV ID=”ID_DIV1″>33</DIV>
<HT:DIV ID=”ID_DIV2″>44</DIV>
<HT:DIV ID=”ID_DIVSUM”> </DIV>

<ELEMENT ID=”HT::ID_DIVSUM>
<RELATION>
<ML:SUM>
<ELEMENT ID=”HT:ID_DIV1″ />
<ELEMENT ID=”HT:ID_DIV2″ />
</ML:SUM>
….
</RELATION>
</ELEMENT>

6.6 Other Relationships
There are many other realtionships possible. ALL XML applications will have to have some relationships with each other.

7. Conclusion
One very important standard that need to be addressed is one of how the different XML applications interact together. Will we be able MathML to specify that the last row or column is sum of it’s elements. How would Sound and Music languages interact with HTML. Can we place different video streams on 3D objects. How can we do all this, without making the definition language complicated. If XML is going to be the universal format, then it’s applications need to develop relationships with their siblings and not live in their individual islands.

8. Links
The W3C is in-charge of the HTML and XML standards. Microsoft’s Dynamic HTML supports some amount of datatype integration in IE4, via scripting languages and DirectX components.

9. References
XML 1.0 standard
HTML 4.0 standard
Math ML standard