It’s just data

HOWTO Embed MathML and SVG into HTML4

This is a proof of concept.  I’ve gotten it to work on Firefox, and believe similar techniques would work on Opera and nightlies of WebKit.  It does not add MathML or SVG support to browsers that don’t already have it, it merely enables browsers which already recognize these grammars in XHTML5 to render similar structures when found in HTML4 documents.

Instructions:

Examples:


Sam Ruby: HOWTO Embed MathML and SVG into HTML4

mad. props....

Excerpt from del.icio.us/wearehugh at

Sam Ruby: HOWTO Embed MathML and SVG into HTML4

wearehugh : Sam Ruby: HOWTO Embed MathML and SVG into HTML4 - mad. props. Tags : html mathml svg...

Excerpt from HotLinks - Level 1 at

The Beginning of the End

HTML-safe generation of embedded MathML....

Excerpt from Musings at

Any specific reason for using window.onload instead of window.addEventListener ?

Posted by Saravanan at

Saravanan: not really.  This was just proof of concept.  Longer term, it probably should do something like this.

Posted by Sam Ruby at

The Beginning of the End

HTML-safe generation of embedded MathML.... [more]

Trackback from Musings

at

To get it working in Opera 9 I made some minor modifications to your script. First you can’t use _proto_, commenting that line out makes the script continue. Then in the copy children for-loop you check the nodeNames in uppercase. It seems the nodeNames are in lowercase in Opera, and commenting out the uppercasing makes it work nicely.

Cheers
/Erik

Posted by Erik Dahlström at

First you can’t use __proto__

What should that test be?  After brief testing in opera, I found that the source object is an HTMLUnknownElement, but that test wasn’t the way to verify it.

I’d love to have a single version that supported both browsers, but I would prefer to have a version of that test (possibly with an || involved) instead of dropping that entirely.  The reason is for forward compatibility: in the event that one or both browsers ever support MathML in HTML4 directly, I’d like my script to automatically be disabled.

The casing issue is definitely something that can be handled.

Posted by Sam Ruby at

Revenge is a Dish Best Served Cold

Now fast-forward a couple of years. XHTML was the W3C’s baby. But with a not-particularly-long snippet of JavaScript, Sam Ruby has kicked the chair out from under XHTML. Actually, that’s not really the right image. Imagine a man with a chiseled jaw...

Excerpt from goer.org: Journal at

Why XHTML still serves a purpose

The W3C is a source of irritation to many web-developers.  It seems to produce heinously complex specification solving problems nobody has.  It’s tackling issues such as the semantic web, when much “simpler” issues such as, say, the...

Excerpt from Eamon Nerbonne at

It’s quite unfortunate that this approach does not appear to work with the Firefox XForms plugin.

Posted by James Snell at

Well, if you really wanted to test the name I guess you could, with a little string manipulation... Not sure this is recommended though.

var proto = source.toString().replace(/\[object ([a-zA-z]+)\]/gi, "$1");
  if (proto != "HTMLUnknownElement") continue;

Posted by Erik Dahlström at

links for 2006-12-07

HTML, SVG, and MathML The Beginning of the End | Musings “Sam Ruby has been busy. He’s been lobbying for changes in the HTML5 Specification which will, ultimately, enable embedding of MathML and SVG in HTML5 documents.” (tags:...

Excerpt from Bob Sutor's Open Blog at

The Frozen North

Brrrrr ... MathML!... [more]

Trackback from Musings

at

application/xhtml

In a matter of a weekend; rusty on COM, unfamiliar with the Mozilla codebase, class libraries, build process, trace facilities, test suites, and debugging aids; and therefore armed only with make, vi, and fprintf; I came up with this mode... [more]

Trackback from Sam Ruby

at

Blogs vs Wikis

Research blogs, research wikis and math....

Excerpt from Musings at

Embedding SVG files inline

I am in the middle of preparing1 a couple of SVG flow charts. They’re vector, so obviously I prefer them to image files. What I am not sure though is how to embed them within XHTML correctly. So far, I’ve looked at Adobe’s page,...

Excerpt from ckunte.com at

I really appreciated the tip on embedding SVG... and thought I would share what I did with it.

My current project is a supply chain management application that interfaces with Google maps for some segmentation/registration logic.  As part of this, I have to also integrate with dot to create graphs that manage hierarchical topologies within the data... some of which I have to display on the page.

I had just about resigned myself to popping up another window and putting SVG into it (or creating PNG files that I then loaded into image tags), when I found this article.

As a result - I am using an Ajax updater to make a request to a perl script - that generates a dot graph (using GraphViz).  I then pass the as_svg() result through this filter:

sub svgProcessor
{
  my ($result) = shift @_;
  if ( $result =~ /<svg/ ) {
  $result = ‘<svg’ . $';
  }
  while  ( $result =~ /(<([^< ]+)( .*)(\/\>))/i) {
  $result =  $` . “<$2$3></$2>” . $';
  }
  return ($result);

}

to handle the empty-tag syntax... and return it back in the return... amazingly enough it works like a champ. Thanks!

Tom

Posted by TomPei at

Bug 354587: SVG drawn by javascript incompletely rendered

Posted by Sam Ruby at

Did you know jsMath?

Posted by AndresVia at

SVG to Silverlight Workbench

Demo Notes:  Requires the Silverlight plugin to see the silverlight rendering, and a browser that supports SVG to see the SVG rendering. This is a work in progress.  Conversion of many SVG features ... [more]

Trackback from Sam Ruby

at

del.icio.us bookmarks for Saturday December 16 2006

7 Bookmarks, 49 Tags...

Excerpt from elearning2.0 linklog [main content + filecasts] at

Bloggy Matters

Open Source Movable Type, and my $0.02 on HTML5....

Excerpt from Musings at

del.icio.us bookmarks for Saturday December 16 2006

7 Bookmarks, 49 Tags...

Excerpt from elearning2.0 linklog [main content + filecasts] at

SFScon Slides

Slides from a presentation that I should be giving in just over two hours. For those interested in the sausage making: script, source, css, js.  The server script provides a dual purpose: it can be run as a CGI during development, ... [more]

Trackback from Sam Ruby

at

updated: Cross-browser implementation of progress element

What an amazing coincidence: the Webkit nightly contained a first implementation of the progress element. I created an application to test the element. It works as I expected, and is somewhat accessible, though Mac’s VoiceOver would only voice the...

Excerpt from MyTech at

[from der_niegel] Sam Ruby: HOWTO Embed MathML and SVG into HTML4

[link]...

Excerpt from Delicious/url/c1ec23824daf3a6de29367a58bfd8242 at

Answer by jmarranz for Inline SVG in Firefox

This example may be useful for you, explanation . SVG rendering support on load time and MIME text/html is a supported feature of ItsNat Java web framework, anyway it was inspired on this JS code , the latter can be useful for you in your context...

Excerpt from Inline SVG in Firefox - Stack Overflow at

Add your comment