HTML5 with MathMl, SVG, HTML foreignObject in SVG, and character entities

A similar document without a foreignObject that validates

Back on 12 April 2008 I built an HTML page with SVG served as text/html off of the college server. At that time the page could only be rendered by Amaya 10. This past June Mozilla Developer Preview 3.7 alpha 5 rendered the page with namespaces still present. I removed the namespaces and added a MathMl chunk and the page both renders and validates.

A check of FireFox 3.6.6 with html5.enable set to true also renders the page.

The complication comes with foreignObject. A similar page renders correctly in FireFox 3.6.6 with html5.enable set to true, but does not correctly render in Mozilla Developer Preview 3.7 alpha 5.The page renders everything except the SVG that follows the HTML foreignObject inside the SVG chunk.

The new Gecko 1.9.3 HTML5 enabled parser is quoted as supporting foreignObject in SVG, and this remains true for XHTML parsed by the XML parser. I have an XHTML5 page that is valid XHTML with an HTML foreignObject in an SVG chunk. I copied the chunk, deleted the namespace calls, and found that the resulting page rendered correctly in 3.6.6 but not in 3.7a5. This is puzzling and remains under study as I write this.

Opera Version 10.60 Build 3445 does not render either the MathMl nor the SVG in the html5 document. Opera 10.60 does render MathMl and SVG in XHTML5 documents. Support for foreignObject, appears to be absent based on a MathMl object in SVG and an XHTML object in SVG. Since Opera reports that foreignObject is supported back in Opera 9, I am somewhat baffled. The cited pages render in FireFox and both validate.

Google Chrome 5.0.375.99 beta can render XHTML5 including foreignObject chunks but not SVG and MathMl served at HTML, let alone pages with foreignObject.

At this time the page served as text/html with foreignObject does not validate. The problem is that the validator objects to the second appearance of the html tag. Removal of the tag, however, causes the foreignObject to fail to render at all.

The above was originally posted in a blog.

MathML

$a=\frac{\Delta ѵ}{\Delta t}$

SVG

HTML

1. A Haier microwave oven consumes 1250 Watts at 120 volts. What is the current in amperes used by the microwave?
2. A Haier microwave oven consumes 1250 Watts at 120 volts. What is the resistance of the microwave in Ohms (Ω)?

Figure as flow (block) element with figcaption

Figure is a block-level element and cannot be enclosed in a p or a element. To use a link you have to include it inline inside an element such as figcaption.

Formulas

Voltage V = current i × Resistance r in Ohms (Ω)

Power = current i × Voltage V

SVG with HTML foreign object

This HTML table in an SVG code block does not validate as of 04 July 2010. Mozilla Developer Preview 3.7 alpha 5 does, however, render this unsightly beast of a code block. Thus this apparently does not conform to the Polyglot HTML working draft yet does parse correctly in the new Gecko 1.9.3 HTML5 parser.