Can Kestrels do Math? MathML support in Opera Kestrel

(Opera Labs article - cutting edge!) Traditionally, Mathematical formulas have been hard to represent using good old fashioned CSS and HTML, but a solution does exist. First, MathML, a specialised Markup language tailored specially for dealing with Math on web pages, has been around for a while. Second, the W3C has recently created a working draft called the MathML for CSS profile (http://www.w3.org/TR/mathml-for-css/,) which deals with displaying MathML using CSS. In this article, Charles McCathieNevile shows you how you can test drive this technology early using Opera Kestrel.


( Read the article )

Nice. Is support for Ruby (the annotation markup) also possible/pending? *crosses hands*

Something better than http://my.opera.com/community/forums/topic.dml?id=163010

Post edited Thursday, 27. September 2007, 12:11:32

Wouldn't it be more sensible to add a UserJS that checks if MathML is present on the page before applying the CSS? Because I don't think mathematicians would appreciate a "render MathML" button...

Unfortunately, I can't think of a bullet proof way for a UserJS to apply a stylesheet to a document (i.e. without giving the page script-access to it).

Or is this just a prototype and you will include this in your parser? I.e. when MathML is encountered, apply stylesheet?


Anyways, I think a large part of the work that went into this was done by White_Lynx (correct me if I'm wrong), so I think thanks should go to him

Originally posted by _Grey_:

Wouldn't it be more sensible to add a UserJS that checks if MathML is present on the page before applying the CSS? Because I don't think mathematicians would appreciate a "render MathML" button...

White Lynx has his MathML UserJS that works that way (svg version). Some MathML can't be styled using CSS, so that script reorders the MathML so it can be displayed. It works fine (at least for pages that don't use entities).

The examples linked in this article unfortunately break the userJS, because they have the stylesheet linked in. You can remove the stylesheet with the following addition to the userJS (inside the math:math test):

// loop over PI's
( function () {
    for ( var i=0; i<document.childNodes.length; i++) {
        if (document.childNodes[i].nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
            if (document.childNodes[i].textContent.indexOf("mathml.css") !== -1 ) {
                document.removeChild(document.childNodes[i]);
            }
        }
    }
})();

Wow! It doesn't even bug me about installing special fonts like Camino does!

However when I zoom in, some elements become blurry, even though they're rendered from SVG.

Also it's too bad that Opera can't copy markup to clipboard, so in practice such markup isn't more useful than an image - I'll still have to retype all equations to get them in another app

This should be included in the default user stylesheet selector list.

i.e: Where the stylesheet list from View > Style > style selector list shows.

@JeroenH: Thanks for sharing! Haven't checked back on that thread in a long time (now subscribed).

I don't understand why the page breaks, though. CSS has cascading in mind, so either style should overwrite the other (supposing the stylesheets are essentially the same). Is it the XSLT that breaks it?
Also I added the line "if(window.opera.version()>=9.5)" to the beginning of the svg version, since I use the same UserJS folder for all versions of Opera...

edit: Have replaced the stylesheet inside the UserJS. With the "new" mathml.css, it works splendid without breaking it, so I guess there is a difference in CSS.

Post edited Thursday, 27. September 2007, 20:05:07

Originally posted by _Grey_:

Wouldn't it be more sensible to add a UserJS that checks if MathML is present on the page before applying the CSS? Because I don't think mathematicians would appreciate a "render MathML" button...

...

Or is this just a prototype and you will include this in your parser? I.e. when MathML is encountered, apply stylesheet?

This is just a prototype. Feedback / usage determines a lot of what we do (hint ). The idea is indeed to put it into the parser if people are going to use this (which will enhance the performance as well).

Originally posted by _Grey_:

Anyways, I think a large part of the work that went into this was done by White_Lynx (correct me if I'm wrong), so I think thanks should go to him

The work that went into this was pretty much all done by White_Lynx - both at Opera and at W3C - and indeed he deserves big thanks

Originally posted by dantesoft:

Nice. Is support for Ruby (the annotation markup) also possible/pending? *crosses hands*

Yeah, it is definitely possible to use the same approach to do most of ruby (there are a couple of things that are still tricky).

I'm generally not allowed to spill implementation plans and roadmaps though.

Originally posted by shoust:

This should be included in the default user stylesheet selector list.

i.e: Where the stylesheet list from View > Style > style selector list shows.

That's one possibility, if there isn't enough usage to justify a more native implementation.

If you're already using user.css, then add an @import at the top of your user.css to import the mathml.css

A slightly quicker way than described in the article, is dropping the mathml.css file in your \profile\styles\user\ directory, and restart Opera. You then can use the View > Style menu instead of the User mode toggle.

But the linked MathML examples in the article are already including this stylesheets directly, so they are not exactly a good testcase for userstyle usage...

Nice. Is support for Ruby (the annotation markup) also possible/pending?

Yes, it is mostly possible, but support for rbspan attribute is a little bit tricky as equivalent functionality it is not in CSS tables model yet. I don't know whether there are plans for Ruby however, but it makes sense to add at least some Ruby support.

Or is this just a prototype and you will include this in your parser?

Yep, the article was posted just to collect feedback before MathML ends up in Opera.

Some MathML can't be styled using CSS, so that script reorders the MathML so it can be displayed.

Yep, the idea of MathML Basic (aka CSS profile) was to resolve some of those problems on MathML side and add a few extensions to CSS3 so browsers could handle MathML reusing CSS visual formatting model.

Also it's too bad that Opera can't copy markup to clipboard

Yep it would be useful to have something like that in context menu. One can also write bookmarklet, the one below for example extracts equations from page and shows their source.

javascript:var formulae = document.getElementsByTagNameNS('http://www.w3.org/1998/Math/MathML','math'), i = 0, out = "";while(formulae[i]){out = out + "\n" + (document.implementation.createLSSerializer()).writeToString(formulae[i++]);}window.location = "data:text/plain;charset=utf-8," + (escape(out)).replace(/%u([0-9A-F]{4})/g,'%26%23x$1%3B');

CSS has cascading in mind, so either style should overwrite the other
(supposing the stylesheets are essentially the same).

Stylesheets are different the one used in UserJS assumes that MathML is preprocessed by JS, the one posted here assumes that markup complies to CSS profile.

But the linked MathML examples in the article are already including this stylesheets directly

Just for your convenience, otherwise it is not supposed to be there. You can try normal (unstyled) examples including some articles.

Originally posted by porneL:

However when I zoom in, some elements become blurry, even though they're rendered from SVG.

Yeah, that's the first thing i notcied. I've edited mathml.css a bit and, to me, it looks so much better without filters:

http://files.myopera.com/profiT/test/MathML%20Stress%20Tests.xhtml

I think that Connexions (http://www.cnx.org/) uses a lot of MathML.

If only Wikipedia gave me formulas in MathML instead of PNG ...

Soon, I think. Look at its OGG support, it's getting better and better.

Stelt: in Wikipedia under 'My Preferences' click on the 'Math' tab and select MathML.

+1 on this feature from a grad student in math. It'd be so cool if math sites could use this. MathWorld works decently with images, but I've run across content on other sites that are simply ASCII (like x^2, not LaTeX) and so hard to read. Of course, for sites to really use this it'd probably require broader support, but if one browser gets the ball rolling, that can really help.

/me shouts http://www.math.union.edu/~dpvc/jsMath/ and hides

Originally posted by profiT:

Yeah, that's the first thing i notcied. I've edited mathml.css a bit and, to me, it looks so much better without filters:
http://files.myopera.com/profiT/test/MathML%20Stress%20Tests.xhtml

Yes, this version looks crispier for me.

@Robin_reala: I've tried and it doesn't work for me. Despite being logged in, having MathML (experimental) enabled, cleared cache, I still get PNGs instead of MathML. And Wikipedia still serves all their pages as text/HTML, so even if MathML-namespaced markup was there, it would be lost in tagsoup anyway.

I would like to see the same type of stylesheet created for Ruby Support. That would be entirely awesome. :3

For Ruby you can try this stylesheet:

ruby
{display:inline-table;
text-align:center;
white-space:nowrap;
-o-table-baseline:2;}
ruby > rb, rbc, rtc
{display:table-row;}
ruby > rt, rbc + rtc
{display:table-header-group;}
rbc > rb, rtc > rt
{display:table-cell;
padding:1px;}
rt
{font-size:0.5em;
line-height:1.2em;}
rp 
{display:none;}

It handles most of Ruby (exception is rbspan attribute which is not handled properly). For quick look check styled example (or unstyled after enabling browser.css).



P.S. By the way in beta1 and recent weekly builds MathML stylesheet did not work properly due to bugs affecting white-space processing (used to cause line breaks inside fraction numerator/denominators) and handling of MathML attributes (many attributes are ignored). Those were fixed in internal builds and fixes are supposed to end up in public builds soon.

FYI, in latest weekly builds of Opera 9.5 MathML is enabled by default.

I've already seen MathML at work in my browser and the results seem to be quite satisfying. If only such stylesheet was made to support Ruby I'd be truly ecstatic!

Hey Duncan, welcome to the forums!
This MathML project started out as a UserJS before the Opera devs decided to support it natively. No doubt, White Lynx's work influenced Opera's decision to include MathML support, and probably made it easier on the devs, too. Similarly, there's a Ruby UserJS that is developed by Kai Lapis that you can get over at the UserJS Forum. Perhaps someday Opera will support Ruby natively, too. Dowload the UserJS for Ruby