UserJS for MathML 2.0

UserJS for MathML 2.0

Writing UserJS for MathML is much more sad story then I originally expected, so frankly speaking I regret that I promised to write it. But in any case some sketch is available and you can try it. Current approach works in Opera 9TP2 only (previous versions of Opera had bugs that affected vertical alignment). You can install mathml.js and try this example. Note that MathML support is incomplete (check list of supported elements) and buggy. Note also that UserJS is unlikely to work properly if minimal requirements listed below are not satisfied.
1. Any entity reference (excluding predefined ones & < > " ') should be declared in internal DTD subset (before any external entity).
/* By default Opera uses non-validating parser, that can be reconfigured to load external entities (see 'XML Load External Entities' option in opera:config user preferences), but it is not a solution as loading external DTDs drastically slows down loading of pages */
2. XHTML documents with MathML content should be served as application/xhtml+xml, application/xml or text/xml and not text/html.
3. MathML elements should be placed in namespace http://www.w3.org/1998/Math/MathML
that can be declared either explicitly in markup or supplied via default attribute value declared in internal DTD subset (never rely on default attribute declaration in external DTDs).

Annotated version of mathml.js will be posted later. Script is in public domain and can be copied, modified and redistributed without any restrictions. You can help by supplying examples of MathML pages, providing feedback, implementing missing features and writing test cases.
Taking into account my negative attitude towards MathML and JS script-tease I am unlikely to devote much time to this script, so final version will be available soon but will have incomplete MathML support.

P.S. In Opera 9 TP2 you can set up UserJS directory from
-[Tools]
--[Preferences]
---[Sites]
----[Default settings]
-----[Scripting]
------[My javascript files]

Then place mathml.js in directory specified there. To uninstall script just delete mathml.js or rename it to mathml.txt

Updated version of mathml.js is available. The following changes were made:
Fixed bug spoiling rendering of indices, radicals and matrices nested inside 'mstyle', 'menclose' and 'mpadded' elements.
Added workaround for Opera bug #196167 affecting rendering of under and over scripts produced using 'munderover' construction.
Fixed bug in handling of 'separators' attribute of 'mfenced' element.

Another update is available.
Here changelog:
1. Fixed bug affecting MathML formulae embedded in DocBook, TEI and other XML formats that are not XHTML based.
2. Added support for under and over lines like

<mover>
	<mi>Base</mi>
	<mo>¯</mo>
</mover>
<munder>
	<mi>Base</mi>
	<mo>_</mo>
</munder>

3. Deprecated 'display' attrubute of 'math' element is recognized now (but still it is better to use 'mode' attribute).


P.S. I tried to find some articles written in MathML, to check how UserJS works on real pages.
Googling took a lot of time but finally I found some at http://hermes.aei.mpg.de/
UserJS does not seem to like some of them (nor do I).

Updated version of mathml.js is ready. Changed rendering of fractions and radicals. Now rendering of radicals should be more reliable.

Another update.
Fixed problem with text indent property that being inherited from ancestors may spoil formatting of math formulae.
Added (incomplete) workaround for bug #144060 that produced line break in inappropriate places (inside fractions, matrices, radicals).

New version is available.
Now document tree is rearranged in single reflow that should slightly speed up rendering. Bug that affected rendering of nested multiscripts is fixed. Handling of over/under bars and over/under braces is slightly improved.
Note also that new UserJS passes stress tests.

Edit. Another update was uploaded today with additional workaround for bug #144060.

Most impressive. :-)

Originally posted by White Lynx:

Edit. Another update was uploaded today with additional workaround for bug #144060.

Just wondering - are you aware that the URI is served as application/octet-stream?

M.

Just wondering - are you aware that the URI is served as application/octet-stream?

Damn. You are right. I did not notice that, as my Opera still treats it as application/xhtml+xml and it actually was served with proper MIME type some time ago, but it seems that recently geocities (mis)changed MIME types of .xslt and .xhtml documents. So in future I will either move tests to different host or maybe will serve test pages as text/xml

@per {Many Thanks}

New version of mathml.js is available.
Added partial support for accents. The problem with accents is that their position depends on font metrics and since it is hard to predict what fonts are available on user's PC acurate rendering of accents is difficult.
Decent solution for the problem is to use Unicode combining diacritical marks, however this part of Unicode standard is not supported by current browsers including Opera. Current implementation supports only widely used accents: tilde, hat, dot, double dot, bar for Latin characters (and not Greeks or operators).
If precomposed Unicode character is available script uses single Unicode character like ã else if appropriate Unicode character does not exist (not all accented Latin letters used in mathematics are included in Unicode standard as a separate characters) then either pair letter + combining diacritical mark like q̃ is used (some pairs work reasonably in Opera) otherwise when combining diacritics fail accent is roughtly positioned with CSS.
I also tried SVG based solution in hope to remove dependance on font metrics, but it does not work well, so Unicode based solutions are used when possible and CSS in other cases for rough positioning.

P.S. If someone uses recent weekly builds note that UserJS directory in latests builds can
be specified via
-[Tools]
--[Preferences]
---[Advanced]
----[Content]
-----[JavaScript Options]
------[My Javascript Files]

Note also that in build 8265 mathml.js and other math related UserJS or style sheets does not work
due to regression in Opera's CSS rendering engine. Bug is reported as #200471 and hopefully will not be institutionalized.

#200471 seems fixed in 8303

BTW I added a link to this on the Wikipedia Browser comparison pages - please add / change the links if you know of better resources for e.g. MathML CSS etc...

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#endnote_OpMATHML

Many thanks non-troppo. In build 8303 bug #200471 is fixed indeed, so UserJS and style sheets work properly again.

As a side remark, I would like to mention that current UserJS has two tangible limitations, it does not resize brackets/operators and does not fully support accents (in addition there are other limitations of course but these two show up most often). Here is page illustrating handling of accents by current UserJS. In future we will take care of these issues, however I don't know yet which way to go, if STIX project will provide reasonable set of fonts in near future maybe we will use STIX glyphs to assemble large brackets and similar stuff, in this case UserJS will require STIX fonts, otherwise we may follow SVG based solution (especially if Opera bug with SVG background images and issue with SVG in generated content will be fixed in near future) which will not require any particular fonts, one more way to go is pure CSS provided that CSS3 border-radius property will be implemented in Presto.

If someone has any suggestions on what other things should be implemented next, feel free to post here.

P.S. Content type related issues on Geocities server mentioned by Moose are settled. XML documents now are served as application/xml and XHTML as application/xhtml+xml

Hello, White Lynx,

I'm sorry for my arrogance, but I've never used Opera before. I got on that forum since I'm very interested in Opera's development in the matter of mathML.

So, could you explain, please, where I should install your script. Thank a lot.

Olyalyu

It is a user javascript, you can read the official docs here for instructions:

http://www.opera.com/support/tutorials/userjs/

Specifically:

http://www.opera.com/support/tutorials/userjs/using/#writingscripts

so save the script somewhere and point opera to that directory

Thanks for your quick reply, non-troppo.

So, I have installed the script+restared Opera and when I try to see the example pages, it doesn't work as well as it doesn't work with my own mathML pages.

To what extend is it supposed to work? Is is supposed to show some real mathematical conotation?

Tanks again.
Olyalyu

i'll let maestro Lynx answer that one (though read his first post above for a list of supported features and he states it is buggy!). but it works for me e.g. here: http://geocities.com/chavchan/userjs/stress.xml

I'm sorry for my arrogance, but I've never used Opera before. I got on that forum since I'm very interested in Opera's development in the matter of mathML.

Welcome to forums. Note that script works in recent versions of Opera as previous versions had bugs on CSS side, Opera 9TP2 or latest weekly builds should be OK.

So, could you explain, please, where I should install your script. Thank a lot.

Actually you don't need to instal anything, just save it on your PC (create new folder and save mathml.js there) and then specify path to that folder in Opera preferences. More specifically in My Javascript Files input box.
-[Tools]
--[Preferences]
---[Advanced]
----[Content]
-----[JavaScript Options]
------[My Javascript Files]

(for location of 'My Javascript Files' input box in Opera 9 TP2 preferences see first post)

So, I have installed the script+restared Opera and when I try to see the example pages

Example pages should work, try http://geocities.com/chavchan/userjs/stress.xml
It is not necessary to restart Opera, it will pick up script even without restart once you save script locally in directory specified in Opera preferences as described above. Make sure that path to directory is correct and script is saved with .js extension.

it doesn't work as well as it doesn't work with my own mathML pages.

Please post url of your pages here and I will tell you whether there are any with problems and if so why they occur.

To what extend is it supposed to work? Is is supposed to show some real mathematical conotation?

It is supposed to handle most of presentational MathML with limitations listed at
http://geocities.com/chavchan/userjs/support.xml#mathml


You are also encouraged to try ISO 12083 mathematical markup (ISO standard for embedding mathematics in SGML, ISO 12083 formulae are suitable for embedding in XML and XHTML too as roughly speaking XML was designed to be subset of SGML with stricter syntax). I think you will like it more then MathML.

Updated version of mathml.js is available. The following changes were made:

1. Fixed bug spoiling rendering of nested radicals like
<mfrac>
<mn>1</mn>
<msqrt><mo>−</mo><mi>g</mi></msqrt>
</mfrac>
2. Improved workaround for CSS bug #144060 in Presto rendering engine
3. Accents (over dot, double dot, tilde, hat, caron, over bar) now are rendered using CSS,
rendering is not accurate, in future it may be enhanced using border-radius properties or
maybe by involving SVG. Unicode based approaches are no longer used (as they were too fonts dependent and unrealiable).
4. Improved support for over/under braces

Hello, White Lynks,

and thank you ery much for your reply. Well I did everything as you describe, but I don't really see any MathML in Opera. Tried your example in Mozilla and it works fine thought.

Anyways, the reason I'm interested in MathML on Opera is that I'm working on developing an extension for Dreamweaver that will be a kind of formula editor and will insert generated MathML into a user document. The problem that I have now is that since DW uses for rendering Opera engine, it is not possible to have any acceptable preview. Well, if the engine would support MathML, Macromedia would have developd that functionality iself I suppose :-).

Since I'm mostly interested in a Representation MathML, I have a big problem. I will try to research more on ISO 12083 though.

I'm very open for all tips and suggestions and would greatly appreciate any of them.

Cheers, Olyalyu

Well I did everything as you describe, but I don't really see any MathML in Opera.

Strange. If javascript is enabled, UserJS directory is specified properly and script has .js extension Opera should pick it up. I don't understand what else could cause problem.
Does it work if instead enabling UserJS one embeds mathml.js in page itself?
Like

<script type="text/javascript" href="mathml.js"/>

What version of Opera do you use? Does preview function of TeX2XML convertor work properly for you?

Tried your example in Mozilla and it works fine thought.

Formulae 23-27 fail in Mozilla as they use elements of content MathML.

The problem that I have now is that since DW uses for rendering Opera engine, it is not possible to have any acceptable preview. Well, if the engine would support MathML, Macromedia would have developd that functionality iself I suppose :-)

Adding UserJS to DW is not an option, but you can embed mathml.js script into page itself

<script type="text/javascript" href="mathml.js"/>

and see how it works.It is unlikely to work in current versions of DW as CSS bug fixes were made in recent builds of Presto rendering engine, DW most likely uses older builds that had bugs on CSS side.

As I remember, DW basically install a copy of Opera somewhere in its path. I imagine one could replace the opera library and upgrade manually (though whether DW extensions are allowed to do that is another matter), and I also imagine one could manually set the embedded opera to use a UserJS directory (I remember seeing an opera6.ini, though it was some time ago). I've never tried that so this is idle speculation on my part!

Updated version is available. The following changes were made:

1. Size of brackets and fences produced via 'mfenced' element is content dependent now
2. Size of N-ary operators is increased (set to 1.3em)
3. Formatting of radicals slightly changed

One more example of real world MathML. There is math related blog (Musings, by Jacques Distler). Blog uses MathML to display formulae and can be viewed in Opera with current UserJS.

Hello,

thank you guys for your answers. I have finally managed to get UserJS to work after I installed Opera9. And it looks great I must say, White Lynx.

Now I'll see how I can achive in DW and if there is a way of creating a preview of some sort. I will let you know how it is going.

Thanks again,
Olyalyu

Another update is available.
Changes are minor and affect positioning of accents.



P.S.
For those who want to modify script, improve formatting or implement missing features there is
annotated version of script that is (slightly) easier to read/edit.

Hello, White Lynx,

I have another question. Is there any CSS available that one can apply to XHTML that is containing MathML?

I'm still trying to figure out the way to create some kind of Math-ML preview in Dreamweaver.
Accordingly to information I found DW supports CSS2.

Thanks in advance.

Olyalyu

Is there any CSS available that one can apply to XHTML that is containing MathML?

Unfortunately MathML does not admit universal CSS style sheet that would handle all (or most) of MathML constructions properly. So pure CSS solution is not available, current UserJS modifies MathML part using DOM2 Core (in future we may use faster XSLT transformations instead of DOM) to make it suitable for further formatting with CSS.

Recently I tried to rewrite UserJS for MathML to make it faster. CSS part basically remains the same while EcmaScript + DOM is replaced with XSLT. Note that at the moment XSLT version handles only XHTML + MathML documents (not MathML embedded in other documents like DocBook or TEI), this issue will be fixed later.

You can try new version and in case of technical problems post them here, previous version that uses DOM is still available.

Note that at the moment XSLT version handles only XHTML + MathML documents (not MathML embedded in other documents like DocBook or TEI), this issue will be fixed later.

Fixed version is available.

Damn! Avoid XSLT version of UserJS as it crashes Opera 9 final. In addition there is regression (bug #214180) in Opera 9 that affects vertical-alignment of fractions.

Instead you can use updated UserJS with workarounds for Opera 9 Final. It uses DOM (XSLT version will be returned once we find out what causes the crash).

Bug that caused crash is fixed in internal builds, so next version of Opera will be able to process XSLT based UserJS again.

Perhaps my character set does not contain the correct symbol for the square root. Here's what the sample script looks like when I run it on my computer.squareroots.png

Does anyone else have similar issues, or is this just me?

It was rendered like this using the first script on this page, and the most recent script as of this post.

Perhaps my character set does not contain the correct symbol for the square root. Here's what the sample script looks like when I run it on my computer. Perhaps my character set does not contain the correct symbol for the square root. Here's what the sample script looks like when I run it on my computer.

At the moment it looks so by design, we will probably address issue with drawing radicals later (either by using scalable graphics or maybe some sophisticated borders). Today it just provides minimalistic formatting that does not depend on font metrics.

XSLT related crash was fixed in Opera 9.01. UserJS was updated, so now the following scripts are available:

Latest version of mathml.js for Opera 9.0

Latest version of mathml.js for Opera 9.01

Good job, thanx for the update.

In near future mathml.js and relevant documentation
will be moved to the following address
http://xml-maiden.com/userjs/mathml/

At the moment it looks so by design, we will probably address issue with drawing radicals later

Updated UserJS that should draw radicals better is available at

http://xml-maiden.com/userjs/mathml/902/mathml.js

It should work in Opera 9.01 or later (incompatible with 9.00 however).
In this version canvas is used to draw radicals, try it, if canvas will
not cause any side affects then in next version we will use it for stretchy delimiters
and accents as well.

My only suggestion is, since it is running on document load to make it a greasemonkey-type script. Basically this means name it 'mathml.user.js' and add a special header at the top.

A little about GreaseMonkey scripts - Excerpt:

To tell Opera that a script file uses Greasemonkey notation, the name of the file containing the script must end with .user.js.
...
Using Greasemonkey notation is equivalent to creating a 'BeforeEvent.load' event listener in a normal User JavaScript.

Here is your script reformatted in greasemonkey style. I also standardized the code a little but didn't change anything major otherwise:

// ==UserScript==
// @name Processor for MathML 2.0 Presentational Markup
// @author George Chavchanidze
// @ujs:category browser: enhancements
// @ujs:modified 11:39 22.09.2006
// add excluded sites here (if the script causes problems on those sites)
// @exclude http://www.some.example.com/*
// ==/UserScript==

(function() {
	if (document.getElementsByTagNameNS('http://www.w3.org/1998/Math/MathML', 'math').length) {
    var style = document.createElementNS('http://www.w3.org/1999/xhtml', 'style'),
        cssstylesheet = document.createTextNode('math{line-height:1.5em;white-space:nowrap;text-indent:0;}math[mode="display"], math[display="block"]{display:block;text-align:center;page-break-inside:avoid}mfrac{display:inline-table;border-collapse:collapse;white-space:nowrap;text-align:center;line-height:1em;margin:0 2px;vertical-align:0.8em;}mfrac > *{line-height:1.5em;}mfrac > *:first-child{display:inline-table;vertical-align:text-bottom;}mfrac[linethickness="0"] >  * + * {border-top:none;}mfrac[linethickness="2"] >  * + * ,mfrac[linethickness="medium"] >  * + * {border-top:solid medium;}mfrac[linethickness="3"] >  * + * ,mfrac[linethickness="thick"] >  * + * {border-top:solid thick;}mfrac > * + *{display:table-row;border-top:solid thin;}math[mode="display"] mfrac, math[display="block"] mfrac{font-size:1em;vertical-align:0.9em;}mfrac mtable, mfrac matrix, mfrac vector, mfrac piecewise{margin-bottom:2px;margin-top:2px;}msub mfrac > *, msup mfrac > *, msubsup mfrac > *, [sub] mfrac > *, [sup] mfrac > *, [stack] mfrac > *, mmultiscripts mfrac > *, munder mfrac > *, mover mfrac > * {font-size:0.8em;}[sup], [sub], [stack]{display:inline-table;white-space:nowrap;line-height:1.2em;}[ssup], [ssub]{display:table-caption;caption-side:top;text-align:right;line-height:1.2em;margin-bottom:-1em;}[ssub]{margin-top:-1em;margin-bottom:0;caption-side:bottom;}[ssup], [hide], [ssub], [isub], [isup]{font-size:0.7em;}[cell], [mask]{display:table-cell;}[mask]{vertical-align:bottom;}[hide], [cut]{display:block;height:0;overflow:hidden;}[tail]{display:table-row;}[cap]{display:table-caption;line-height:1.2em;margin-bottom:-0.7em;}[isub]{display:block;line-height:1.2em;margin-top:-0.7em;}msub > * + *, msup > * + *, mrow[SubScript], mrow[SuperScript]{font-size:0.7em;line-height:1em;vertical-align:-0.8ex;}msup > * + *, mrow[SuperScript]{vertical-align:1.4ex;}mrow[IndiceS]{display:inline-table;white-space:nowrap;font-size:0.7em;border-collapse:collapse;line-height:1.1em;vertical-align:1.1em;}mrow[IndiceS] > mrow{display:inline-table;vertical-align:text-bottom;text-align:left;}mrow[IndiceS="PreScripts"] > mrow{text-align:right;}mrow[IndiceS] > mrow + mrow{display:table-row;}mover, munder{display:inline-table;text-align:center;}mover{display:inline-block;}mover > *:first-child, munder > *{display:block;}munder > *{white-space:nowrap;display:table-row;}mo[OverBrace], mo[UnderBrace], mo[UnderLine]{display:block;content:"";height:3px;border-style:solid;border-width:1px 1px 0 1px;}mo[UnderBrace]{border-style:solid;border-width:0 1px 1px 1px;}mo[UnderLine]{height:0;border-width:1px 0 0 0;}mo[AccentType] + *{line-height:1.1em;}mo[AccentType="\\02c9"],mo[AccentType="\\02dc"],mo[AccentType="\\02c6"],mo[AccentType="\\02c7"],mo[AccentType="\\02d9"],mo[AccentType="\\00a8"]{display:block;min-width:0.3ex;margin:0 0.2ex -0.9ex 0.2ex;}mo[AccentType="\\02c9"]:before, mo[AccentType="\\02dc"]:before, mo[AccentType="\\02c6"]:before, mo[AccentType="\\02c7"]:before, mo[AccentType="\\02d9"]:before, mo[AccentType="\\00a8"]:before{display:block;content:"";}mo[AccentType="\\02c9"]:before{border-bottom:solid 1px;}mo[AccentType="\\02c6"]:before{border-style:solid;border-width:1px 1px 0 1px;height:1px;}mo[AccentType="\\02c7"]:before{border-style:solid;border-width:0 1px 1px 1px;height:1px;}mo[AccentType="\\02d9"]:before{border-top:solid 1px;margin:0 auto;width:1px;}mo[AccentType="\\00a8"]:before{border-left:solid 1px;border-right:solid 1px;margin:0 auto;width:2px;height:1px;}mo[AccentType="\\02dc"]:before{border-right:solid 1px;border-bottom:solid 1px;height:1px;}mo[AccentType="\\02dc"]:after{display:block;content:"";border-left:solid 1px;height:1px;}munder > * + *, mover > *:first-child{font-size:0.7em;line-height:1.2em;}canvas.radical{width:0.8em;height:0.6em;display:inline-block;color:inherit;vertical-align:text-bottom;}radical{display:inline-table;white-space:nowrap;margin-top:1px;}radix, radicand{display:table-cell;}radix{vertical-align:bottom;line-height:0.1em;text-align:right;}deg{font-size:0.6em;line-height:1.2em;display:block;padding-right:1px;}radicand{padding:1px 4px 0 2px;border-width:1px 0 0 1px;border-style:solid;}msub, msup, msubsup, mmultiscripts, matrix, mfrac, munder, mover, mroot, vector, piecewise, mrow, mfenced{white-space:nowrap}matrix, vector, piecewise, mtable{display:inline-table;border-collapse:collapse;vertical-align:middle;text-align:center;margin:1px;}matrixrow, piece, otherwise, vector > *, mtr, mlabeledtr {display:table-row}matrixrow > *, piece > *, otherwise:after, mtd{display:table-cell;line-height:1.7em;white-space:nowrap;padding:1px 8px}otherwise:after{content:"Otherwise"}matrixrow:before, matrixrow:after,vector > *:before, vector > *:after,mtable[MatriX] > mtr:before, mtable[MatriX] > mtr:after{display:table-cell;content:"\\00A0";border-bottom:solid 1px;border-left:solid 1px;border-top:hidden}matrixrow:after, vector > *:after, mtable[MatriX] > mtr:after{border-left:none;border-right:solid 1px}matrixrow:first-child:before, matrixrow:first-child:after, vector > *:first-child:before, vector > *:first-child:after,mtable[MatriX] > mtr:first-child:before, mtable[MatriX] > mtr:first-child:after{border-top:solid 1px}determinant + matrix > matrixrow:before,determinant + matrix > matrixrow:after{content:normal}determinant + matrix{border-right:solid 1px;border-left:solid 1px}mtable[DeterminanT]{border-left:solid 1px;}mtable[DeterminanT]{border-right:solid 1px;}piecewise, mtable[PieceWise]{border:dashed 1px gray}piece > *:first-child, mtable[PieceWise] > mtr > mtd:first-child{text-align:right}piece > * + *,  mtable[PieceWise] > mtr > mtd + mtd{text-align:left}mphantom {visibility:hidden}merror{outline:solid thin red}merror:before{content:"Error: "}mfenced:before{content:"("}mfenced:after{content:")"}mfenced[open]:before{content:attr(open)}mfenced[close]:after{content:attr(close)}mfenced[resize]:before, mfenced[resize]:after{content:normal;}mfenced[resize]{display:inline-table;margin:2px 2px;}mfenced[resize] > mrow{display:table-row;}mfenced[resize] > mrow > mrow{display:table-cell;padding:0 2px;}squarel, squarer, roundle, roundrig, roundbotle, roundbotrig, while, whir, barle, norle, barig, norig,ceile, ceirig, floorle, floorig{display:table-cell;}barle, norle, barig, norig{width:1px;border-style:solid;border-width:0 1px;}barle{border-width:0 0 0 1px;}barig{border-width:0 1px 0 0;}squarel, squarer, roundle, roundrig, while, whir,ceile, ceirig, floorle, floorig{width:4px;border-style:solid;border-width:1px 0 1px 1px;}ceile{border-width:0 0 1px 1px;}ceirig{border-width:0 1px 1px 0;}floorle{border-width:1px 0 0 1px;}floorig{border-width:1px 1px 0 0;}squarer, roundrig, whir{border-width:1px 1px 1px 0;}roundle, roundrig{vertical-align:top;width:3px;}roundbotle, roundbotrig{vertical-align:bottom;}while, whir{width:1px;}roundle:before, roundrig:before,roundbotle:before, roundbotrig:before{display:block;content:"";width:2px;height:2px;border-style:solid;border-width:1px 0 0 1px;position:relative;z-index:1;}roundle:before, roundrig:before{top:-3px;}roundle:before{left:2px;}roundrig:before{right:2px;border-width:1px 1px 0 0;}roundbotle:before, roundbotrig:before{top:2px;}roundbotle:before{border-width:0 0 1px 1px;right:1px;}roundbotrig:before{border-width:0 1px 1px 0;left:1px;}curle, curig{display:table-cell;vertical-align:middle;}curle:before, curig:before{display:block;content:"";height:1px;width:1px;border-style:solid;border-width:1px 1px 1px 0;}curig:before{border-width:1px 0 1px 1px;}maction[actiontype="highlight"]:hover{background-color:yellow;color:black;}maction[actiontype="toggle"] > * + *,maction[actiontype="toggle"]:hover > *:first-child{display:none}maction[actiontype="toggle"]:hover > *:first-child + *{display:inline-block;}maction[actiontype="statusline"] > * + *, maction[actiontype="tooltip"] > * + *{display:none}maction[actiontype="statusline"]:hover > * + *, maction[actiontype="tooltip"]:hover > * + *{position:fixed;display:block;top:0;left:0;background-color:InfoBackground;color:InfoText;padding:0.5ex;border:solid 1px}mspace[linebreak="goodbreak"]:before{content:"\\200B";white-space:normal;}mspace[linebreak="newline"]:before, mspace[linebreak="indentingnewline"]:before {content:"\\000A"; white-space:pre;}mglyph[alt]:before{content:attr(alt);}mi[normal], mi[mathvariant="normal"],mn[normal], mn[mathvariant="normal"],mo[normal], mo[mathvariant="normal"],ms[normal], ms[mathvariant="normal"],mtext[normal], mtext[mathvariant="normal"]{font-style:normal;}mi, mi[mathvariant="italic"], mi[mathvariant="bold-italic"],mi[mathvariant="sans-serif-italic"], mi[mathvariant="sans-serif-bold-italic"],mn[mathvariant="italic"], mn[mathvariant="bold-italic"],mn[mathvariant="sans-serif-italic"], mn[mathvariant="sans-serif-bold-italic"],mo[mathvariant="italic"], mo[mathvariant="bold-italic"],mo[mathvariant="sans-serif-italic"], mo[mathvariant="sans-serif-bold-italic"],ms[mathvariant="italic"], ms[mathvariant="bold-italic"],ms[mathvariant="sans-serif-italic"], ms[mathvariant="sans-serif-bold-italic"],mtext[mathvariant="italic"], mtext[mathvariant="bold-italic"],mtext[mathvariant="sans-serif-italic"], mtext[mathvariant="sans-serif-bold-italic"]{font-style:italic;}mi[mathvariant="bold"], mi[mathvariant="bold-italic"], mi[mathvariant="bold-sans-serif"], mi[mathvariant="sans-serif-bold-italic"],mn[mathvariant="bold"], mn[mathvariant="bold-italic"], mn[mathvariant="bold-sans-serif"], mn[mathvariant="sans-serif-bold-italic"],mo[mathvariant="bold"], mo[mathvariant="bold-italic"], mo[mathvariant="bold-sans-serif"], mo[mathvariant="sans-serif-bold-italic"],ms[mathvariant="bold"], ms[mathvariant="bold-italic"], ms[mathvariant="bold-sans-serif"], ms[mathvariant="sans-serif-bold-italic"],mtext[mathvariant="bold"], mtext[mathvariant="bold-italic"], mtext[mathvariant="bold-sans-serif"], mtext[mathvariant="sans-serif-bold-italic"]{font-weight:bold;}mi[mathvariant="monospace"], mn[mathvariant="monospace"],mo[mathvariant="monospace"], ms[mathvariant="monospace"],mtext[mathvariant="monospace"]{font-family:monospace;}mi[mathvariant="bold-sans-serif"], mi[mathvariant="bold-sans-serif"], mi[mathvariant="sans-serif-italic"], mi[mathvariant="sans-serif-bold-italic"],mn[mathvariant="bold-sans-serif"], mn[mathvariant="bold-sans-serif"], mn[mathvariant="sans-serif-italic"], mn[mathvariant="sans-serif-bold-italic"],mo[mathvariant="bold-sans-serif"], mo[mathvariant="bold-sans-serif"], mo[mathvariant="sans-serif-italic"], mo[mathvariant="sans-serif-bold-italic"],ms[mathvariant="bold-sans-serif"], ms[mathvariant="bold-sans-serif"], ms[mathvariant="sans-serif-italic"], ms[mathvariant="sans-serif-bold-italic"],mtext[mathvariant="bold-sans-serif"], mtext[mathvariant="bold-sans-serif"], mtext[mathvariant="sans-serif-italic"], mtext[mathvariant="sans-serif-bold-italic"]{font-family:sans-serif;}ms:before, ms:after {content:"\\0022"}ms[lquote]:before {content:attr(lquote)}ms[rquote]:after {content:attr(rquote)}mo[OperatoR]{font-size:1.3em;vertical-align:-0.1ex;}math{border-left:solid 1px transparent;}mrow[SheLL="WorkAround"]:before{font-size:xx-small;content:" ";}'),
        parent, xslstylesheet, xslt, processor;
    style.setAttribute('type', 'text/css');
    style.appendChild(cssstylesheet);
    if (document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'head').length)
      parent = document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'head')[0];
    else
      parent = document.documentElement;
    parent.insertBefore(style, parent.firstChild);
  	xslstylesheet = '<?xml version="1.0" encoding="utf-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:xhtml="http://www.w3.org/1999/xhtml" version="1.0"><xsl:output method="xml" encoding="utf-8"/><xsl:strip-space elements="mml:math"/><xsl:template match="mml:msup"><xsl:choose><xsl:when test="child::mml:*[position()=1][descendant-or-self::mml:mfrac or descendant-or-self::mml:mtable or descendant-or-self::mml:msqrt or descendant-or-self::mml:mroot or descendant-or-self::mml:matrix or descendant-or-self::mml:piecewise]"><mml:mrow><mml:mrow sup="."><mml:mrow ssup="."><xsl:apply-templates select="*[position()=2]"/></mml:mrow><mml:mrow cell="."><xsl:apply-templates select="*[position()=1]"/></mml:mrow><mml:mrow mask="."><mml:mrow hide="."><xsl:apply-templates select="*[position()=2]"/></mml:mrow></mml:mrow></mml:mrow></mml:mrow></xsl:when><xsl:otherwise><mml:msup><mml:mrow><xsl:apply-templates select="*[position()=1]"/></mml:mrow><mml:mrow><xsl:apply-templates select="*[position()=2]"/></mml:mrow></mml:msup></xsl:otherwise></xsl:choose></xsl:template><xsl:template match="mml:msub"><xsl:choose><xsl:when test="child::mml:*[position()=1][descendant-or-self::mml:mfrac or descendant-or-self::mml:mtable or descendant-or-self::mml:msqrt or descendant-or-self::mml:mroot or descendant-or-self::mml:matrix or descendant-or-self::mml:piecewise]"><mml:mrow><mml:mrow sub="."><mml:mrow cell="."><xsl:apply-templates select="*[position()=1]"/></mml:mrow><mml:mrow mask="."><mml:mrow hide="."><xsl:apply-templates select="*[position()=2]"/></mml:mrow></mml:mrow><mml:mrow ssub="."><xsl:apply-templates select="*[position()=2]"/></mml:mrow></mml:mrow></mml:mrow></xsl:when><xsl:otherwise><mml:msub><mml:mrow><xsl:apply-templates select="*[position()=1]"/></mml:mrow><mml:mrow><xsl:apply-templates select="*[position()=2]"/></mml:mrow></mml:msub></xsl:otherwise></xsl:choose></xsl:template><xsl:template match="mml:msubsup"><xsl:choose><xsl:when test="child::mml:*[position()=1][descendant-or-self::mml:mfrac or descendant-or-self::mml:mtable or descendant-or-self::mml:msqrt or descendant-or-self::mml:mroot or descendant-or-self::mml:matrix or descendant-or-self::mml:piecewise]"><mml:mrow><mml:mrow stack="."><mml:mrow cap="."><mml:mrow mask="."><mml:mrow cut="."><xsl:apply-templates select="*[position()=1]"/></mml:mrow></mml:mrow><mml:mrow cell="."><mml:mrow isup="."><xsl:apply-templates select="*[position()=3]"/></mml:mrow></mml:mrow></mml:mrow><mml:mrow cell="."><xsl:apply-templates select="*[position()=1]"/></mml:mrow><mml:mrow mask="."><mml:mrow hide="."><xsl:apply-templates select="*[position()=3]"/></mml:mrow></mml:mrow><mml:mrow tail="."><mml:mrow mask="."><mml:mrow cut="."><xsl:apply-templates select="*[position()=1]"/></mml:mrow></mml:mrow><mml:mrow cell="."><mml:mrow isub="."><xsl:apply-templates select="*[position()=2]"/></mml:mrow></mml:mrow></mml:mrow></mml:mrow></mml:mrow></xsl:when><xsl:otherwise><mml:msubsup><mml:mrow><xsl:apply-templates select="*[position()=1]"/></mml:mrow><mml:mrow IndiceS="PostScripts"><mml:mrow><xsl:apply-templates select="*[position()=3]"/></mml:mrow><mml:mrow><xsl:apply-templates select="*[position()=2]"/></mml:mrow></mml:mrow><mml:mrow SheLL="WorkAround"/></mml:msubsup></xsl:otherwise></xsl:choose></xsl:template><xsl:template match="mml:mmultiscripts"><mml:mmultiscripts><xsl:if test="mml:mprescripts"><xsl:choose><xsl:when test="not(*[position() mod 2 = 1 and preceding-sibling::mml:mprescripts and not(self::mml:none)])"><mml:mrow SuperScript="PreScript"><xsl:apply-templates select="*[position() mod 2 = 0 and preceding-sibling::mml:mprescripts and not(self::mml:none)]"/></mml:mrow></xsl:when><xsl:when test="not(*[position() mod 2 = 0 and preceding-sibling::mml:mprescripts and not(self::mml:none)])"><mml:mrow SubScript="PreScript"><xsl:apply-templates select="*[position() mod 2 = 1 and preceding-sibling::mml:mprescripts and not(self::mml:none)] "/></mml:mrow></xsl:when><xsl:otherwise><mml:mrow IndiceS="PreScripts"><mml:mrow><xsl:apply-templates select="*[position() mod 2 = 0 and preceding-sibling::mml:mprescripts and not(self::mml:none)]"/></mml:mrow><mml:mrow><xsl:apply-templates select="*[position() mod 2 = 1 and preceding-sibling::mml:mprescripts and not(self::mml:none)] "/></mml:mrow></mml:mrow><mml:mrow SheLL="WorkAround"/></xsl:otherwise></xsl:choose></xsl:if><xsl:apply-templates select="*[position()=1]"/><xsl:if test="not(*[position()=2 and self::mml:mprescripts])"><xsl:choose><xsl:when test="not(*[position() mod 2 = 1 and position() > 1 and not(preceding-sibling::mml:mprescripts) and not(self::mml:none)])"><mml:mrow SubScript="NormaL"><xsl:apply-templates select="*[position() mod 2 = 0 and not(self::mml:mprescripts) and not(preceding-sibling::mml:mprescripts) and not(self::mml:none)]"/></mml:mrow></xsl:when><xsl:when test="not(*[position() mod 2 = 0 and not(self::mml:mprescripts) and not(preceding-sibling::mml:mprescripts) and not(self::mml:none)])"><mml:mrow SuperScript="NormaL"><xsl:apply-templates select="*[position() mod 2 = 1 and position() > 1 and not(preceding-sibling::mml:mprescripts) and not(self::mml:none)] "/></mml:mrow></xsl:when><xsl:otherwise><mml:mrow IndiceS="PostScripts"><mml:mrow><xsl:apply-templates select="*[position() mod 2 = 1 and position() > 1 and not(preceding-sibling::mml:mprescripts) and not(self::mml:none)] "/></mml:mrow><mml:mrow><xsl:apply-templates select="*[position() mod 2 = 0 and not(self::mml:mprescripts) and not(preceding-sibling::mml:mprescripts) and not(self::mml:none)]"/></mml:mrow></mml:mrow><mml:mrow SheLL="WorkAround"/></xsl:otherwise></xsl:choose></xsl:if></mml:mmultiscripts></xsl:template><xsl:template match="mml:mover"><mml:mrow SheLL="InlineTable"><mml:mover><xsl:apply-templates select="*[position()=2]"/><xsl:apply-templates select="*[position()=1]"/></mml:mover><mml:mrow SheLL="WorkAround"/></mml:mrow></xsl:template><xsl:template match="mml:munderover"><mml:mrow SheLL="InlineTable"><mml:munder><mml:mrow><mml:mover><xsl:apply-templates select="*[position()=3]"/><xsl:apply-templates select="*[position()=1]"/></mml:mover></mml:mrow><xsl:apply-templates select="*[position()=2]"/></mml:munder><mml:mrow SheLL="WorkAround"/></mml:mrow></xsl:template><xsl:template match="mml:munder"><mml:mrow SheLL="InlineTable"><mml:munder><xsl:apply-templates/></mml:munder><mml:mrow SheLL="WorkAround"/></mml:mrow></xsl:template><xsl:template match="mml:mfrac"><mml:mrow SheLL="InlineTable"><mml:mfrac><xsl:if test="@linethickness"><xsl:attribute name="linethickness"><xsl:value-of select="@linethickness"/></xsl:attribute></xsl:if><xsl:apply-templates/></mml:mfrac><mml:mrow SheLL="WorkAround"/></mml:mrow></xsl:template><xsl:template match="mml:mroot"><mml:mroot><radical><radix><deg><xsl:apply-templates select="*[position()=1]"/></deg><xhtml:canvas class="radical" width="100" height="100"/></radix><radicand><xsl:apply-templates select="*[position()=1]"/></radicand></radical></mml:mroot></xsl:template><xsl:template match="mml:msqrt"><mml:msqrt><radical><radix><xhtml:canvas class="radical" width="100" height="100"/></radix><radicand><xsl:apply-templates/></radicand></radical></mml:msqrt></xsl:template><xsl:template match="mml:mfenced[descendant-or-self::mml:mfrac or descendant-or-self::mml:mtable or descendant-or-self::mml:msqrt or descendant-or-self::mml:mroot or descendant-or-self::mml:matrix or descendant-or-self::mml:piecewise]"><mml:mfenced resize="auto"><mml:mrow><xsl:choose><xsl:when test="@open=\'{\'"><curle/><roundle/><roundbotle/></xsl:when><xsl:when test="@open=\'[\'"><squarel/></xsl:when><xsl:when test="@open=\'&#x27e6;\'"><while/><squarel/></xsl:when><xsl:when test="@open=\'|\'"><barle/></xsl:when><xsl:when test="@open=\'||\'"><norle/></xsl:when><xsl:when test="@open=\'||\'"><norle/></xsl:when><xsl:when test="@open=\'&#x2308;\'"><ceile/></xsl:when><xsl:when test="@open=\'&#x230A;\'"><floorle/></xsl:when><xsl:when test="@open=\'}\'"><roundbotrig/><roundrig/><curig/></xsl:when><xsl:when test="@open=\')\'"><roundbotrig/><roundrig/></xsl:when><xsl:when test="@open=\']\'"><squarer/></xsl:when><xsl:when test="@open=\'&#x27e7;\'"><squarer/><whir/></xsl:when><xsl:when test="@open=\'|\'"><barig/></xsl:when><xsl:when test="@open=\'||\'"><norig/></xsl:when><xsl:when test="@open=\'&#x2309;\'"><ceirig/></xsl:when><xsl:when test="@open=\'&#x230B;\'"><floorig/></xsl:when><xsl:otherwise><roundle/><roundbotle/></xsl:otherwise></xsl:choose><mml:mrow><xsl:apply-templates/></mml:mrow><xsl:choose><xsl:when test="@close=\'}\'"><roundbotrig/><roundrig/><curig/></xsl:when><xsl:when test="@close=\']\'"><squarer/></xsl:when><xsl:when test="@close=\'&#x27e7;\'"><squarer/><whir/></xsl:when><xsl:when test="@close=\'|\'"><barig/></xsl:when><xsl:when test="@close=\'||\'"><norig/></xsl:when><xsl:when test="@close=\'&#x2309;\'"><ceirig/></xsl:when><xsl:when test="@close=\'&#x230B;\'"><floorig/></xsl:when><xsl:when test="@close=\'{\'"><curle/><roundle/><roundbotle/></xsl:when><xsl:when test="@close=\'(\'"><roundle/><roundbotle/></xsl:when><xsl:when test="@close=\'[\'"><squarel/></xsl:when><xsl:when test="@close=\'&#x27e6;\'"><while/><squarel/></xsl:when><xsl:when test="@close=\'|\'"><barle/></xsl:when><xsl:when test="@close=\'||\'"><norle/></xsl:when><xsl:when test="@close=\'||\'"><norle/></xsl:when><xsl:when test="@close=\'&#x2308;\'"><ceile/></xsl:when><xsl:when test="@close=\'&#x230A;\'"><floorle/></xsl:when><xsl:otherwise><roundbotrig/><roundrig/></xsl:otherwise></xsl:choose></mml:mrow></mml:mfenced></xsl:template><xsl:template match="mml:mfenced/mml:*[following-sibling::mml:*[position() = 1]]"><xsl:copy-of select="."/><xsl:choose><xsl:when test="parent::mml:mfenced[@separators] and string-length(parent::mml:mfenced/@separators) >= position()"><xsl:value-of  select="substring(parent::mml:mfenced/@separators,position(),1)"/></xsl:when><xsl:when test="parent::mml:mfenced[@separators] and string-length(parent::mml:mfenced/@separators) &lt; position()"><xsl:value-of  select="substring(parent::mml:mfenced/@separators,string-length(parent::mml:mfenced/@separators),1)"/></xsl:when><xsl:otherwise><xsl:text>,</xsl:text></xsl:otherwise></xsl:choose></xsl:template><xsl:template match="mml:mtable"><mml:mtable><xsl:if test="preceding-sibling::mml:*[position()=1 and self::mml:mo and (translate(string(.),\'[{( \',\'[[[\') = \'[\')] and (not(following-sibling::mml:*[position()=1 and self::mml:mo]) or following-sibling::mml:*[position()=1 and self::mml:mo and (translate(string(.),\'])} \',\']]]\') != \']\')])"><xsl:attribute name="PieceWise">NormaL</xsl:attribute></xsl:if><xsl:if test="preceding-sibling::mml:*[position()=1 and self::mml:mo and translate(string(.),\' \',\'\') = \'|\'] and following-sibling::mml:*[position()=1 and self::mml:mo  and translate(string(.),\' \',\'\') = \'|\'])"><xsl:attribute name="DeterminanT">NormaL</xsl:attribute></xsl:if><xsl:if test="preceding-sibling::mml:*[position()=1 and self::mml:mo and translate(string(.),\'[{( \',\'[[[\') = \'[\'] and following-sibling::mml:*[position()=1 and self::mml:mo  and translate(string(.),\']}) \',\']]]\') = \']\']"><xsl:attribute name="MatriX">NormaL</xsl:attribute></xsl:if><xsl:apply-templates/></mml:mtable></xsl:template><xsl:template match="mml:mi"><mml:mi><xsl:if test="@mathvariant"><xsl:attribute name="mathvariant"><xsl:value-of select="@mathvariant"/></xsl:attribute></xsl:if><xsl:if test="string-length(.)>1"><xsl:attribute name="mathvariant">normal</xsl:attribute></xsl:if><xsl:apply-templates/></mml:mi></xsl:template><xsl:template match="mml:mo"><xsl:choose><xsl:when test="translate(.,\' ([{|\',\'\') = \'\' and following-sibling::*[position() = 1 and self::mml:mtable]"/><xsl:when test="translate(.,\' )]}|\',\'\') = \'\' and preceding-sibling::*[position() = 1 and self::mml:mtable]"/><xsl:otherwise><mml:mo><xsl:if test="@mathvariant"><xsl:attribute name="mathvariant"><xsl:value-of select="@mathvariant"/></xsl:attribute></xsl:if><xsl:choose><xsl:when test="translate(.,\' &#x220f;&#x2210;&#x2211;&#x222b;&#x222c;&#x222d;&#x222e;&#x222f;&#x2230;&#x2231;&#x2232;&#x2233;&#x22c0;&#x22c1;&#x22c2;&#x22c3;&#x2a00;&#x2a01;&#x2a02;&#x2a03;&#x2a04;&#x2a05;&#x2a06;&#x2a0a;&#x2a0b;&#x2a0c;\',\'\') = \'\'"><xsl:attribute name="OperatoR"><xsl:value-of select="translate(.,\' \',\'\')"/></xsl:attribute><xsl:apply-templates/></xsl:when><xsl:when test="(parent::mml:mover and preceding-sibling::mml:*[position() = 1]) or (parent::mml:munderover and preceding-sibling::mml:*[position() = 2]) or (parent::mml:*[self::mml:mrow or self::mml:mstyle or self::mml:menclose or self::mml:mpadded or self::mml:mphantom][(parent::mml:mover and preceding-sibling::mml:*[position() = 1]) or (parent::mml:munderover and preceding-sibling::mml:*[position() = 2])])"><xsl:if test="translate(.,\' ^~&#x00af;&#x02c6;&#x02c7;&#x02dc;&#x02d8;&#x02c9;&#x02d9;&#x00a8;&#x007e;\',\'\') = \'\'"><xsl:attribute name="AccentType"><xsl:value-of select="translate(.,\'&#x00af;&#x02d8;&#x23dc;&#x23;^~ \',\'&#x02c9;&#x02c7;&#x23b4;&#x23b4;&#x02c6;&#x02dc;\')"/></xsl:attribute></xsl:if><xsl:if test="translate(.,\' &#x23b4;&#x23dc;&#x23de;\',\'\') = \'\'"><xsl:attribute name="OverBrace"><xsl:value-of select="translate(.,\' \',\'\')"/></xsl:attribute><xsl:apply-templates/></xsl:if></xsl:when><xsl:when test="(parent::mml:munder and preceding-sibling::mml:*[position() = 1]) or (parent::mml:munderover and preceding-sibling::mml:*[position() = 1] and following-sibling::mml:*[position() = 1]) or (parent::mml:*[self::mml:mrow or self::mml:mstyle or self::mml:menclose or self::mml:mpadded or self::mml:mphantom][(parent::mml:munder and preceding-sibling::mml:*[position() = 1]) or (parent::mml:munderover and preceding-sibling::mml:*[position() = 1] and following-sibling::mml:*[position() = 1])])"><xsl:if test="translate(.,\' &#x23b5;&#x23dd;&#x23df;\',\'\') = \'\'"><xsl:attribute name="UnderBrace"><xsl:value-of select="translate(.,\' \',\'\')"/></xsl:attribute></xsl:if><xsl:if test="text() = \'_\' or text() = \' _\' or text() = \'_ \' or text() = \' _ \'"><xsl:attribute name="UnderLine">_</xsl:attribute></xsl:if><xsl:apply-templates/></xsl:when><xsl:when test="translate(.,\'+=>&lt;&#x00B1;&#x2212;&#x2213;&#x2214;&#x22D6;&#x22D7;&#x22D8;&#x22D9;&#x22DA;&#x22DB;&#x22DC;&#x22DD;&#x22DE;&#x22DF;&#x22E0;&#x22E1;&#x2238;&#x2239;&#x223A;&#x223B;&#x223C;&#x223D;&#x223E;&#x223F;&#x2241;&#x2242;&#x2243;&#x2244;&#x2245;&#x2246;&#x2247;&#x2248;&#x2249;&#x224A;&#x224B;&#x224C;&#x224D;&#x224E;&#x224F;&#x2250;&#x2251;&#x2252;&#x2253;&#x2254;&#x2255;&#x2256;&#x2257;&#x2258;&#x2259;&#x225A;&#x225B;&#x225C;&#x225D;&#x225E;&#x225F;&#x2260;&#x2261;&#x2262;&#x2263;&#x2264;&#x2265;&#x2266;&#x2267;&#x2268;&#x2269;&#x226A;&#x226B;&#x226C;&#x226D;&#x226E;&#x226F;&#x2270;&#x2271;&#x2272;&#x2273;&#x2274;&#x2275;&#x2276;&#x2277;&#x2278;&#x2279;&#x227A;&#x227B;&#x227C;&#x227D;&#x227E;&#x227F;&#x2280;&#x2281;&#x2282;&#x2283;&#x2284;&#x2285;&#x2286;&#x2287;&#x2288;&#x2289;&#x228A;&#x228B;&#x2208;&#x2209;&#x220A;&#x220B;&#x220C;&#x220D; \',\'\') = \'\'"><xsl:text> </xsl:text><xsl:value-of select="."/><xsl:text> </xsl:text></xsl:when><xsl:when test="text() = \'-\' or text() = \' -\' or text() = \'- \' or text() = \' - \'"><xsl:text> &#x2212; </xsl:text></xsl:when><xsl:otherwise><xsl:apply-templates/></xsl:otherwise></xsl:choose></mml:mo></xsl:otherwise></xsl:choose></xsl:template><xsl:template match="*|@*"><xsl:copy><xsl:apply-templates select="node()|@*"/> </xsl:copy></xsl:template></xsl:stylesheet>',
  	xslt = (new DOMParser()).parseFromString(xslstylesheet, 'application/xml'),
  	processor = new XSLTProcessor();
  	processor.importStylesheet(xslt);
  	document.replaceChild(processor.transformToFragment(document.documentElement, document), document.documentElement);
  	for (var i = 0, documentElement, radicals; documentElement = document.childNodes[i]; i++) {
      if (documentElement.nodeType == 1) {
        radicals = documentElement.getElementsByTagName('radix');
        for (var j = 0, radical, ctx; radical = (radicals[j] && radicals[j].lastChild); j++) {
          ctx = radical.getContext('2d');
          ctx.strokeStyle = document.defaultView.getComputedStyle(radicals[j], null).getPropertyValue('color');
          ctx.lineWidth = 10;
          ctx.beginPath();
          ctx.moveTo(0, 40);
          ctx.lineTo(50, 0);
          ctx.lineTo(100, 100);
          ctx.stroke();
        }
      }
    }
  }
})();

Programatical changes I made:

1. moved all 'var ___' statements, that were not in the for loops, to the one var statement starting on the 3rd line
2. removed the variable 'parser' as it was only referenced once and was not required
   

   parser = new DOMParser(), xslt = parser.parseFromString(xslstylesheet,"application/xml"),

   
   Became:
   

   xslt = (new DOMParser()).parseFromString(xslstylesheet, 'application/xml'),

   
   NOTE: the same could be done for the variables 'cssstylesheet' and 'xslstylesheet' but they are so long and cumbersome that I didn't feel it necessary.
3. This line was causing errors:
   

   for(var k = 0, radical; radical = radicals[k].lastChild; k++){

   
   At the end of radicals it would call radicals[radicals.length] which is null then it tries to access null.lastChild and throws an error. I changed it to this:
   

   for (var j = 0, radical, ctx; radical = (radicals[j] && radicals[j].lastChild); j++) {

   
   And (&&) clauses return the result of the last true statement or false. This fixed the error.

Thats it from me. If you haven't yet, I would recommend you submit this to userjs.org. This is an awesome well-made script. Thanks so much.

I attached the file also for easy reading/downloading:
mathml.user.js

Here is your script reformatted in greasemonkey style. I also standardized the code a little but didn't change anything major otherwise

WOW! Many thanks. I will update the script soon to take into account your changes and add/rewrite stuff that deals with stretchy delimiters.

If you haven't yet, I would recommend you submit this to userjs.org.

It was submitted once, but I am not sure when and which version. At this stage we don't care much about spreading the script, currently it is almost frozen and no serious modifications are made. We are waiting for CSS related changes and bug fixes in Opera that are expected to simplify formatting of mathematics, then we will rewrite script from top to bottom to make it smaller, faster, more complete and post it on somewhat more visible place to make sure that it is easily accessible for Opera users.

This is what I love about the Opera community... People are so friendly and donate so much time and energy to each other. It's really nice. Thanks a lot, White Lynx and fearphage. If it's not the browser itself that makes me love Opera, it's its community.

Thanks - I've wanted to view MathML in Opera for ages (most recently at <URL:http://golem.ph.utexas.edu/string/>), and just found your site through Google (of course:).

I just found this script and it's looking great. Thanks for working on it!

Unfortunately, these aren't rendering: &Integral; − &longrightarrow;

I'm assuming this is not being fulfilled as detailed in the first post in this thread:
1. Any entity reference (excluding predefined ones & < > " ') should be declared in internal DTD subset (before any external entity).

Could you explain what that means or what I need to do?

Yep, the problem is that by default Opera does not load exteranl DTDs where MathML entities are defined. You can avoid using those entities by using actual Unicode characters instead like in this example
http://xml-maiden.com/temp/unicode.xml
or you can replace them with character references like in this examples
http://xml-maiden.com/temp/decimal.xml
http://xml-maiden.com/temp/hexadecimal.xml
you can also continue to use entity references but declare them in internal DTD subset like in this example
http://xml-maiden.com/temp/character.xml

P.S. On a side note, future versions of mathml.js will probably be maintained by Opera Software, update should be expected after Opera 9.5 preview.

Originally posted by White Lynx:

P.S. On a side note, future versions of mathml.js will probably be maintained by Opera Software, update should be expected after Opera 9.5 preview.

Hummm, thanx for the info.

Thanks for the examples.

Those who are testing Opera 9.5 alpha can try updated UserJS that takes advantage of some CSS3 stuff implemented in Kestrel.

Actually we have two different versions available for testing, pick up the one you like (XSLT based one is larger but faster). UserJS was rewritted from top to bottom, this should improve handling of complex indices, resizing of fences and handling of mo tokens.

Nice work on the new version, looks far better now (you could try to convince the WhatWG once again :-) ), the roots and fences are already way smoother for example.

For future versions: any chance of doing the images in SVG instead of PNG? That would make things not only smooth, but also sharp.

And why not use "DOMContentLoaded" instead of "load"? For Musings, Opera does run the script before it first draws the site if I change that.

Edit: SVG version: svgs.zip You may use them in the script if you want to.

Originally posted by White Lynx:

Those who are testing Opera 9.5 alpha can try updated UserJS that takes advantage of some CSS3 stuff implemented in Kestrel.

Thanks.

you could try to convince the WhatWG once again

Actually I don't know what to do. There is no consensus among browsers vendors and we can't do anything alone when it comes to standardizing things. So we will probably stick to MathML at least until better times.

For future versions: any chance of doing the images in SVG instead of PNG? That would make things not only smooth, but also sharp.

Yep, I was using SVG for a while but sometimes it was causing Opera to crash, that crash seems to be fixed now and should not affect public builds, but it was difficult to reproduce so I am not sure yet whether it is ok to return back to SVG.

And why not use "DOMContentLoaded" instead of "load"?

You can do that in XSLT based version. In DOM based one it might trigger incremantal rendering bug that causes generated content to disappear, that bug will be fixed soon and we can try to run script before onload in future.

Edit: SVG version: svgs.zipYou may use them in the script if you want to

Many thanks. One of the advantages that I thought SVG was supposed to have, is possibility to inherit color using currentColor keyword so color of SVG fences could match that of text. But unfortunately currentColor does not seem to inherit color accross documents, so I had either to give fences shadow or to add dasharray to ensure that they are visible on any background. So that shadow is one of the reasons why fences look worse then they are supposed to look. In UserJS of course we can first check current color from getComputedStyle (goodbuy DOMContentLoaded) and set SVG stroke color appropriately. We may do just that in future.

Originally posted by White Lynx:

One of the advantages that I thought SVG was supposed to have, is possibility to inherit color using currentColor keyword so color of SVG fences could match that of text. But unfortunately currentColor does not seem to inherit color accross documents, so I had either to give fences shadow or to add dasharray to ensure that they are visible on any background. So that shadow is one of the reasons why fences look worse then they are supposed to look. In UserJS of course we can first check current color from getComputedStyle (goodbuy DOMContentLoaded) and set SVG stroke color appropriately. We may do just that in future.

Yeah, I noticed the color problem in your articles and the Mozilla tests, unfortunately. But, isn't the future XBL based? That would be the ideal language to implement MathML in a CSS browser it seems to me... I guess currentColor does work there since you're in the same document if you inline the svg.

Originally posted by White Lynx:

Actually I don't know what to do. There is no consensus among browsers vendors and we can't do anything alone when it comes to standardizing things. So we will probably stick to MathML at least until better times.

I think your userjs is showing that Mozilla probably took the wrong approach for MathML, which will always remain a niche technology, it's broken now there for quite some time. The userJS, along with itex2mml for creating content seems quite nice already. Let's hope this gets sorted out somehow. I like creating HTML better than LaTeX, but I have not yet tried creating a real work with maths using HTML, partially because the old script was not really nice to hand in, but more so because MathML is not really hand authoring friendly.

I think your userjs is showing that Mozilla probably took the wrong approach for MathML, which will always remain a niche technology,

Maybe, but situation was different in 1998-99 when MathML work started there. Also 10-15 years ago mathematics was not considered as niche technology, it was essential ingradinet of any formatting framework (DSSSL had a set of math properties, not to mention TeX). Now focus seems to be shifted on 'cool' stuff and even few changes on CSS side that are needed to accomodate minimal math formatting requirements take time to be incorporated as very few people care about issue.

it's broken now there for quite some time.

Yep, but on the other hand it is much easier to handle it with CSS as David Baron fixed inline-tables and inline-blocks so handling MathML now should be that big issue. You can check this demo (it covers only particular serialization of MathML, but it makes a point from formatting point of view) in recent Cairo builds (Gecko 1.9 from march or later). Demo bypasses native MathML rendered, it also works in Opera 9.2/9.5, Prince 6r2/r3 and is one bug away from working in Safari 3 (baseline alignment of inline-tables in Webkit).

I like creating HTML better than LaTeX,

Me to, in XML you get clear treelike structure, LaTeX is very non uniform and difficult to parse. On the other hand MathML vent too far beyound capturing basic structure.

but I have not yet tried creating a real work with maths using HTML, partially because the old script was not really nice to hand in, but more so because MathML is not really hand authoring friendly.

Yep, formatting problems and CSS integration issues will be sorted out somehow, but syntax still remains to be the problem that keeps users away from MathML. Unfortunately there is no consensus in Math WG on dropping token elements and its difficult to make radical changes at this stage (there are many non-browser MathML implementations so one needs to care about backwards compatibility) so MathML will probably remain difficult for authoring. Using converters like itex2mml could be a good workaround, the problem is that it is diffult to get everything right when generating token elements and locating base of indices as such information is usually not present in input.