A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on IRC (such as one of these permanent autoconfirmed members).

Difference between revisions of "Diagrams in HTML"

From WHATWG Wiki
Jump to: navigation, search
Line 95: Line 95:
 
</html>
 
</html>
 
</pre>
 
</pre>
 +
 +
''Make sure to [http://software.hixie.ch/utilities/js/live-dom-viewer/?%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%09%3Ctitle%3EHTML%20Extensibility%20Test%3C%2Ftitle%3E%0A%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%09%3Ch1%20id%3D%22test_of_extensibility%22%3ETest%20of%20Extensibility%3C%2Fh1%3E%0A%09%3Cp%3EThis%20is%20a%20test%20of%20an%20extensibility%20point%20in%20text%2Fhtml%2C%20with%20a%20fallback%20mechanism.%3C%2Fp%3E%0A%09%0A%09%3Cext%3E%0A%09%09%3Cfallback%3E%0A%09%09%09%3Cimg%20src%3D%22image%22%2F%3E%0A%09%09%3C%2Ffallback%3E%0A%09%09%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%09%09%20%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%09%09%20%20%20%20%20width%3D%22100%25%22%20height%3D%22100%25%22%0A%09%09%20%20%20%20%20version%3D%221.1%22%3E%0A%0A%09%09%09%3Ctitle%3EMy%20Title%3C%2Ftitle%3E%0A%09%09%09%3Cdesc%3Eschepers%2C%2001-04-2008%3C%2Fdesc%3E%0A%09%09%09%3Ccircle%20id%3D%22circle_1%22%20cx%3D%2275%22%20cy%3D%2225%22%20r%3D%2220%22%20fill%3D%22lime%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E%09%09%0A%09%3C%2Fext%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E test your proposals]... :-)''
  
 
== <svg> as document element ==
 
== <svg> as document element ==

Revision as of 05:28, 1 April 2008

Please put ideas for what it should look like here.

Each example should have a green circle, with an embedded HTML table, and should say how to handle tokeniser errors and tree construction errors.

Hardcoded element names

 <p>
   Hello world.
   <svg viewbox="0 0 10 10">
     <circle x=5 y=5 r=5 stroke=green>
     <foreignObject> <table><tr><td>1<td>2<tr><td>3<td>4</table> </foreignObject>
   </svg>
 </p>

Tokeniser recovers from errors by ignoring them and moving on.

Tree construction recovers from errors by closing the <svg> element.

<ext>

For some discussion, see the IRC logs.

 <p>Hello world. 
    <ext>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
          <circle x="5" y="5 r="5" stroke="green"/>
       </svg>
    </ext> 
 </p>

(The <ext> element would have a name that doesn't clash with existing content. Inside you can use XML.)

Unfortunately, whatever syntax we end up using, people will copy and paste it from documents that were written by competent authors that tested it against the new UAs, into documents written by authors who don't know about this, and who don't have the new UA, thus creating new "legacy documents" that use whatever syntax we come up with. -Hixie

I think this risk is minimal, since it clearly wouldn't work in the legacy UAs, and so the mistake will have less reason to propagate. -Shepazu

We should define a content model for where the <ext> element can occur, and if there are implications for different locations (such as inside a table, a paragraph, the head, etc). The simplest thing, at least for SVG (and probably MathML), would be that it would have the same restrictions as an element. Also, there should be a default block model for <ext> in CSS.

Note that this is similar to IE's "XML islands" with the <xml> element. It's believed that there are some conflicts with the <xml> element itself, since it creates a separate document that is tied to the <xml> element in the DOM, but more research is needed.

What's the error handling intended to be for this idea? How is embedded HTML handled?

Error Handling

The main options seem to be:

  1. strict XML parsing (not favored by many)
  2. very permissive error handling (as in HTML5); this idea is controversial and has many open issues, which should be detailed below
  3. moderate error handling, as detailed in SVG Tiny 1.2
  4. other ideas?

The chief risk with permissive error handling is that it would create content that is not compatible across different UAs, including mobile devices and authoring tools.

Embedded HTML

The case of content inside a <foreignObject> element could be subject to the parsing model of the root document. (Note that this is only a partial solution, and more thought and details are needed.)

For content outside <foreignObject>, it should follow the XML processing rules.

Fallback Behavior

This is an opportunity to get nice fallback behavior, as well.

Here's a possible suggestion, where the raster image would show in UAs that didn't support the <ext> syntax, and the SVG would show in those that did (and which support SVG). In UAs which support <ext> and not SVG, the fallback would also be the raster. The fallback content should be inside a wrapper element (<fallback>), so that you can have rich fallback options, such as an image map, a table, or whatever.

<html lang="en">
<head>
	<title>HTML Extensibility Test</title>

</head>
<body>
	<h1 id="test_of_extensibility">Test of Extensibility</h1>
	<p>This is a test of an extensibility point in text/html, with a fallback mechanism.</p>
	
	<ext>
		<fallback>
			<img src="anIsland.png"/>
		</fallback>
		<svg xmlns="http://www.w3.org/2000/svg"
		     xmlns:xlink="http://www.w3.org/1999/xlink"
		     width="100%" height="100%"
		     version="1.1">

			<title>My Title</title>
			<desc>schepers, 01-04-2008</desc>
			<circle id="circle_1" cx="75" cy="25" r="20" fill="lime" />
		</svg>		
	</ext>

</body>
</html>

Make sure to test your proposals... :-)

<svg> as document element

This is not a syntax proposal but I'd like to able to have SVG graphics in text/html without the need to wrap it inside HTML and without having implied <html>, <body>, etc. (I being Anne.)

Rationale:

  • It's often easier to generate text/html documents than other types of documents (Live DOM Viewer, PHP)
  • It allows you to use text/html-style syntax for SVG graphics which makes authoring easy.
  • It makes creating graphics that use features from HTML and MathML easier.
<svg viewbox="0 0 10 10">
  <circle x=5 y=5 r=5 fill=lime>
  <foreignObject> <table><tr><td>1<td>2<tr><td>3<td>4</table> </foreignOBJECT>
</svG>

It's not clear that authoring would be easier with looser error handling, and introduces the incompatibilities mentioned above. A safer approach would be to first introduce the more conservative syntax, then observe how it is used and specify from real-world use cases incrementally. It's also not clear how this is to be distinguished from SVG content with embedded HTML (MIME Type?). -Shepazu