# Blog de Frédéric

## Tag - wikipedia

Saturday, August 15 2015

## MathML Accessibility (part II)

As announced in a previous blog post, I was invited to two Mozilla Work Weeks in Toronto and Whistler during the month of June. Before these work weeks, the only assistive technology able to read MathML in Gecko-based browsers was NVDA, via the help of the third-party MathPlayer plugin developed by Design Science, as shown in the following video:

Thanks to the effort done during these work weeks plus some additional days, we have made good progress to expose MathML via accessibility APIs on other platforms: Mac OS X, Linux, Android and Firefox OS. Note that Firefox for iOS uses WebKit, so MathML should already be exposed and handled via Apple's WebKit/VoiceOver. If you are not familiar with accessibility APIs (and actually even if you are), I recommend you to read Marco Zehe's excellent blog post about why accessibility APIs matter.

Apple was the first company to rely on accessibility APIs to make MathML accessible: WebKit exposes MathML via its NSAccessibility protocol and it can then be handled by the VoiceOver assistive technology. One of the obvious consequence of working with open standards and open accessibility APIs is that it was then relatively easy for us to make MathML accessible on Mac OS X: We basically just read the WebKit source code to verify how MathML is exposed and did the same for Gecko. The following video shows VoiceOver reading a Wikipedia page with MathML mode enabled in Gecko 41:

Of course, one of the disadvantage is that VoiceOver is proprietary and so we are dependent on what Apple actually implements for MathML and we can not easily propose patches to fix bugs or add support for new languages. This is however still more convenient for users than the proprietary MathPlayer plugin used by NVDA: at least VoiceOver is installed by default on Apple's products and well-integrated into their user & accessibility interfaces. For instance, I was able to use the standard user interface to select the French language in VoiceOver and it worked immediately. For NVDA+MathPlayer, there are several configuration menus (one for the Windows system, one for NVDA and one for MathPlayer) and even after selecting French everywhere and rebooting, the math formulas were still read in English...

The next desktop platform we worked on was Linux. We continued to improve how Gecko expose the MathML via the ATK interface but the most important work was done by Joanmarie Diggs: making Orca able to handle the exposed MathML accessibility tree. Compared to the previous solutions, this one is 100% open and I was happy to be able to submit a couple of patches to Orca and to work with the Gnome Translation Team to keep the French translation up-to-date. By the way, if you are willing to contribute to the localization of Orca into your language feel free to join the Gnome Translation Project, help will be much appreciated! The following video shows how Orca reads the previous Wikipedia page in Nightly builds:

On mobile platforms (Android and Firefox OS) we use a common Javascript layer called AccessFu to handle Gecko's internal accessibility tree. So all of this is handled by Mozilla and hence is also 100% open. As I said in my previous blog post, I was not really aware of the internal details before the Work Weeks so it was good to get more explanations and help from Yura Zenevich. Although we were able to do some preliminary work to add MathML support to AccessFu in bug 1163374, this will definitely need further improvements. So I will not provide any demo for now :-)

To conclude this overview, you can check the status of accessibility on the Mozilla MathML Project page. This page also contains a table of MathML tests and how they are handled on the various platforms. At the end of September, I will travel to Toronto to participate to the Mozilla and FOSS Assistive Technology Meetup. In particular, I hope to continue improvements to MathML Accessibility in Mozilla products... Stay tuned!

Friday, October 24 2014

## A quick note for Mozillians regarding MathML on Wikipedia

As mentioned some time ago and as recently announced on the MathML and MediaWiki mailing lists, a MathML mode with SVG/PNG fallback is now available on Wikipedia. In order to test it, you need to log in with a Wikipedia account and select the mode in the "Math" section of your preferences.

Some quick notes for Mozillians:

• Although Mozilla intern Jonathan Wei has done some work on MathML accessibility and that there are reports about work in progress to make Firefox work with NVDA / Orca / VoiceOver, we unfortunately still don't have something ready for Gecko browsers. You can instead try the existing solutions for Safari or Internet Explorer (ChromeVox and JAWS 16 beta are supposed to be MathML-aware but fail to read the MathML on Wikipedia at the moment).

• By default, the following MATH fonts are tried: Cambria Math, Latin Modern Math, STIX Math, Latin Modern Math (Web font). In my opinion, our support for Cambria Math (installed by default on Windows) is still not very good, so I'd recommend to use Latin Modern Math instead, which has the same "Computer Modern" style as the current PNG mode. To do that, go to the "Skin" section of your preferences and just add the rule math { font-family: Latin Modern Math; } to your "Custom CSS". Latin Modern Math is installed with most LaTeX distributions, available from the GUST website and provided by the MathML font add-on.

• You can actually install various fonts and try to make the size and style of the math font consistent with the surrounding text. Here are some examples:

/* Asana Math (Palatino style) */
.mw-body, mtext {
font-family: Palatino Linotype, URW Palladio L, Asana Math;
}
math {
font-family: Asana Math;
}

/* Cambria (Microsoft Office style) */
.mw-body, mtext {
font-family: Cambria;
}
math {
font-family: Cambria Math;
}

/* Latin Modern (Computer Modern style) */
.mw-body, mtext {
font-family: Latin Modern Roman;
}
math {
font-family: Latin Modern Math;
}

/* STIX/XITS (Times New Roman style) */
.mw-body, mtext {
font-family: XITS, STIX;
}
math {
font-family: XITS Math, STIX Math;
}

/* TeX Gyre Bonum (Bookman style) */
.mw-body, mtext {
font-family: TeX Gyre Bonum;
}
math {
font-family: TeX Gyre Bonum Math;
}

/* TeX Gyre Pagella (Palatino style) */
.mw-body, mtext {
font-family: TeX Gyre Pagella;
}
math {
font-family: TeX Gyre Pagella Math;
}

/* TeX Gyre Schola (Century Schoolbook style) */
.mw-body, mtext {
font-family: TeX Gyre Schola;
}
math {
font-family: TeX Gyre Schola Math;
}

/* TeX Gyre Termes (Times New Roman style) */
.mw-body, mtext {
font-family: TeX Gyre Termes;
}
math {
font-family: TeX Gyre Termes Math;
}

• We still have bugs with missing fonts and font inflation on mobile devices. If you are affected by these bugs, you can force the SVG fallback instead:

span.mwe-math-mathml-inline, div.mwe-math-mathml-display {
display: none !important;
}
span.mwe-math-mathml-inline + .mwe-math-fallback-image-inline {
display: inline !important;
}
div.mwe-math-mathml-display + .mwe-math-fallback-image-display {
display: block !important;
}

• You might want to install some Firefox add-ons for copying MathML/LaTeX, zooming formulas or configuring the math font.

• Finally, don't forget to report bugs to Bugzilla so that volunteers can continue to improve our MathML support. Thank you!

Wednesday, January 29 2014

## New MathML Firefox add-ons on AMO

While the patches for MathML integration in MediaWiki are progressively being reviewed and merged and while we are working on the support for Open Type fonts with a MATH table in Gecko, I finally found time to check the progress in Mozilla's add-on SDK. In particular, since the last time I tried (some years ago) they have introduced a cleaner interface for content scripts as well as the possibility to use XPCOM for missing features. Hence I have been able to update some of my experimental MathML add-ons. I have submitted two new add-ons to Mozilla's AMO that I hope could be useful to some people:

• MathJax Native MathML, an add-on to force MathJax to switch to Gecko's MathML support without having to use the MathJax menu to change the output mode and works even on Websites where that menu is disabled. This also removes MathJax's automatic rescaling and inline-block span that are currently causing random rendering bugs with Gecko's native MathML (and will confuse possible future line-breaking support anyway).
• MathML Copy (at the moment only partially reviewed by the AMO team), an add-on to copy MathML and TeX into the clipboard. For MathML, two flavors are copied: the source as plain text (to paste in your favorite text editor) and the MathML as HTML (to paste in Thunderbird, MDN, any Gecko-based HTML editor etc). Copying TeX is only possible when it is provided via the standard MathML annotation method, which is the case in e.g. LaTeXML and Instiki documents as well as in Wikipedia in the future.

As usual, there is room for improvements and bug fixes, but that's a start. In particular I would be happy to get translations for the two strings of the MathML Copy add-on: "Copy MathML Formula" and "Copy TeX Source". Also, because I used the add-on SDK these add-ons are unfortunately only available for Firefox at the moment...

Monday, January 13 2014

## Introduction

As mentioned during the Mozilla Summit and recent MathML meetings, progress has recently be made to the way mathematical equations are handled on Wikipedia. This work has mainly be done by the volunteer contributor Moritz Schubotz (alias Physikerwelt), Wikimedia Foundation's developer Gabriel Wicke as well as members of MathJax. Moritz has been particularly involved in that project and he even travelled from Germany to San Francisco in order to meet MediaWiki developers and spend one month to do volunteer work on this project. Although the solution is essentially ready for a couple of months, the review of the patches is progressing slowly. If you wish to speed up the integration of what is probably the most important improvements to MediaWiki Math to happen, please read how you can help below.

## Current Status

The approach that has been used on Wikipedia so far is the following:

• Equations are written in LaTeX or more precisely, using a specific set of LaTeX commands accepted by texvc. One issue for the MediaWiki developers is that this program is written in OCaml and no longer maintained, so they would like to switch to a more modern setup.
• texvc calls the LaTeX program to convert the LaTeX source into PNG images and this is the default mode. Unfortunately, using images for representing mathematical equations on the Web leads to classical problems (for example alignment or rendering quality just to mention a few of them) that can not be addressed without changing the approach.
• For a long time, registered users have been able to switch to the MathJax mode thanks to the help of nageh, a member of the MathJax community. This mode solves many of the issues with PNG images but unfortunately it adds its own problems, some of them being just unacceptable for MediaWiki developers. Again, these issues are intrinsic to the use of a Javascript polyfill and thus yet another approach is necessary for a long-term perspective.
• Finally, registered users can also switch to the LaTeX source mode, that is only display the text source of equations.

## Short Term Plan

Native MathML is the appropriate way to fix all the issues regarding the display of mathematical formulas in browsers. However, the language is still not perfectly implemented in Web rendering engines, so some fallback is necessary. The new approach will thus be:

• The TeX equation will still be edited by hand but it will be possible to use a visual editor.
• texvc will be used as a filter to validate the TeX source. This will ensure that only the texvc LaTeX syntax is accepted and will avoid other potential security issues. The LaTeX-to-PNG conversion as well as OCaml language will be kept in the short term, but the plan is to drop the former and to replace the latter with a a PHP equivalent.
• A LaTeX-to-MathML conversion followed by a MathML-to-SVG conversion will be performed server-side using MathJax.
• By default all the users will receive the same output (MathML+SVG+PNG) but only one will be made visible, according your browser capabilities. As a first step, native MathML will only be used in Gecko and other rendering engines will see the SVG/PNG fallback ; but the goal is to progressively drop the old PNG output and to move to native MathML.
• Registered users will still be able to switch to the LaTeX source mode.
• Registered users will still be able to use MathJax client-side, especially if they want to use the HTML-CSS output. However, this is will no longer be a separate mode but an option to enable. That is, the MathML/SVG/PNG/Source is displayed normally and progressively replaced with MathJax's output.

Most of the features above have already been approved and integrated in the development branch or are undergoing review process.

## How can you help?

The main point is that everybody can review the patches on Gerrit. If you know about Javascript and/or PHP, if you are interested in math typesetting and wish to get involved in an important Open Source project such as Wikipedia then it is definitely the right time to help the MediaWiki Math project. The article How to become a MediaWiki hacker is a very good introduction.

When getting involved in a new open source project one of the most important step is to set up the development environment. There are various ways to setup a local installation of MediaWiki but using MediaWiki-Vagrant might be the simplest one: just follow the Quick Start Guide and use vagrant enable-role math to enable the Math Extension.

The second step is to create a WikiTech account and to set up the appropriate SSH keys on your MediaWiki-Vagrant virtual machine. Then you can check the Open Changes, test & review them. The Gerrit code review guide may helpful, here.

If you need more information, you can ask Moritz or try to reach people on the #mediawiki (freenode) or #mathml (mozilla) channels. Thanks in advance for your help!