Next, we are going to talk about Mademell and Interup with Erie.
So no more French accent, it's going to be a part of the music.
So welcome, thank you all for being here today, my name is Erie, and I work at the web
platform team at Igalia.
So for those who don't know yet, Igalia is an open source consultancy, which started in
Galicia, a beautiful region in Spain.
We are working on company with a flat structure and great people all over the world.
We do a lot of things, but today we're going to focus on the first one, since I'm going
to talk about how we made Mademell Interup Erie.
So what is Mademell?
Don't worry, you don't need to know it from before.
Similar to HTML or XML, it's a markup language, but for mathematics.
So it was first published in 1998, the same CSS for me, but we're now at version 3,
which is a W3C standard that is recommended in a recommendation, and it is used in many
applications with young browsers, like ebook readers or office streets.
So here we have a very simple example of how writing an Intrural Anifraxion
good look.
You see that the syntax is similar to how HTML or website would work, but we have operators
and so on.
So let's do our brief history, work up very, very brief, but as I said, it was first published
in 1998, and it's 3 years later, Mademell version 2 followed, around the time Masilla
was the first to implement it, and it's still like that for a few years, until the next
rows are opera, which nothing had its own engine implemented in 2007.
The big milestone was when HTML5 came, it included Mathemell as well as other things as
a web standard, and from there WebKit also implemented the version that we're currently
on landed, and the last one to the party was Chromium in 2012, but this only lasted for a
year because it was removed, so what happened?
The thing is that Mathemell 3 is a very, very complex standard, it features more than 200
elements, very difficult rules, so it is intended to be a complete representation of mathematics,
but this is not really physical to implement in practice, especially in a moving target,
like the web, so as such, like the behavior was inconsistent across engines, and the code
was very difficult to maintain, a lot of depth accumulated, so almost a decade passed,
because before we had a proposal, which is Mathemell Core, it is a subset of Mathemell 3,
a much smaller subset, but it is tailored for browser implementations, so instead of like having
everything, they look at what is used in practice, and how we can have like the important things,
and then mix in implementation details from text, and open type, and also try to reuse the things
that exist in browsers, as much as possible, like CSS, and also it has a lot of tests, which is good.
So, thanks to this, Chromium got back in the Mathemell 3, and in 2003, so now we are in a great
position, because for the first time in forever, all three major browser engines, except several,
have Mathemell support, and so like finally you can write a web page or write a thing
using Mathemell, and users will be able to see it, but the work is still not done,
oh, sorry, just one, another example first, this is a bit more complex, but we can see here that
we can use the features in the browser, just like we would in HTML or other things, we can have
animations, we can have links, we even have events, and we can modify the features,
like the Mathemell features, like we would other other things, so what I was saying is that
what is left, a lot actually, because we need to make sure that all of the browsers agree and follow
the standard, which can be tricky, because for Chromium, it may be easier, because they didn't
have any implementations, so you could write one from scratch, but for other browsers, as we saw,
sometimes there is up to 25 years of legacy code, and code that is being made for one standard,
then the next, and it is complicated, and browsers have very huge and very different code bases,
they are one of the most complicated programs ever, they have, it's not a great metric,
but they have roughly the same amount of lines of code that the Linux kernel, so yeah, it's not
easy, so what we do is there's this project called Interup, which is a cross browser effort
to improve the interoperability of the world, so all browsers can tackle certain features
that are very important, and it's decided between browser vendors, spec writers, developers,
all of them agree on a set of features to tackle each year, which is what was mentioned in the
text before, and this benefits all users, so this year, at the Galiah, we got an agreement
to work on mathematical code with the software and tech fund, which is part of an European agency
that invest on open source infrastructure, so what have we been up to this past few months,
so first we've tackled a few CSS features that mathematical core introduces,
first one is MathF, so if you look here, you can see that the subberscripts and the
inner members of fractions, they get progressively smaller because otherwise they couldn't fit,
if you have a lot of them and formulas get complicated and they couldn't look good, so before
this was a hard-coded set of very complicated rules, but the beauty of mathematical
core is saying, okay we have CSS, we have things we can reuse that, instead of this hard-coding,
we have this rules in the user agent style sheet of each browser, which implement all of that
complex behavior, just from these three rules, and doing it in CSS makes it easy to write
polyfields and to implement new features, there's different things, another example of, sorry,
we also need another piece of the puzzle because font sizes don't change on their own,
so we have this font size math with Chisano 3 word, it is implemented for all math elements,
and what it does is it gets inherited, it works the same as inheriting font size, but
if there's a math depth it will reduce progressively the size too much, the depth,
and also we try to keep compatibility with existing content as much as possible because
there's 25 years of existing content more than 25 years of existing content, so for example there was
this scribblevel attribute which did more or less the same as math depth, and now instead of having
to handle all of that and use the hard-coding rules, we just map it to math depth with
a set of rules, so browsers don't get any more complex and there's no more complementing,
but existing web pages display as better as possible. The other example is math shift, so
I know that it may not be easy to see, but the two on the left is much is a bit lower than
the two on the right, that's because it has to fit inside of the square root, and if it was in the
same height it wouldn't, and especially in a more complex example it would start to look messy,
a text has this concept of cramped which is more or less the same idea. This is also implemented
as CSS property, and we have this user agent style sheet that implements this behavior.
So I'm very happy to say that both math shift and math depth are now usable across every browser
in the latest versions, and enabled by default. So here we have a right-left mirroring,
so okay, make a note for font math fonts, because this is not displaying correctly because of
math fonts, we will come back to that later and internet connection, but what would happen is that
there are some languages that write from a right-to-left and mathematics too, especially the
Arabic mathematical notation, and usually in some cases they use the same Latin and Greek symbols,
but flipped, and we have two cases, so one is where we have rockets or other characters that have
a corresponding inverse, so for example we would change the right bracket to the left bracket in
in the other case, but there are more complex cases like square roots or one we will see next,
where just like changing a character is not possible, so that's called leaf level mirroring,
and here we have an example of what could go wrong, so this is a clockwise counter integral,
the clockwise part is important, so if we just mirror it like we put a mirror and for the other part,
it becomes a counter clockwise integral, which changes the meaning and it's wrong, so there's
an open type font feature called RTLM, so math fonts can provide a different set of symbols,
like in this case the last one, which are mirror but still have the correct meaning,
so all of these is implemented in our browsers except leaf level mirroring in web kit, which we are
working on, and now we go to font families, so math fonts are very important for good rendering
because they have a specific set of symbols and they also have rules for big operators like
integrals or square roots that can grow and have different things inside, and it is very important
to have a font family available, browsers used to have a harco-ded list of these fonts,
but that became, it didn't work for systems, it was ugly to have all of them there, so now we have
a font family math, which is a CSS and a family, and it's the way of saying give me a good
math font whatever it is, so here we have a comparison and the comparison is actually wrong, but
so the first one is using font family math, which in my system it resolves to lapping more
bit of math popular math font, the second one could be using a style font, it was like handwritten
math, which a website would provide, but we can see because we don't have internet, I didn't manage
to get internet connection, it's not loading the font from the website, so because we don't have
font family math, it's not falling back to a proper font, and the last one was intentionally
like that, you can see that for example the integral is not extending all the way down, the font
for the numbers and the font for the letters is different, and it's a best effort, and this is what
happened before in the in the mirroring example, because that only certain font super mirroring,
so I provided a specific one, and since it didn't load, everything was not as it should be, so
font family math is quite important, aligning with a standard not only involves adding features,
but also removing them, as we say we have tons of legacy code, and that legacy code is based on
standards that may no longer be available, so for example, a mathematical three have 200 elements,
but mathematical code only has about 30, so what do we do with the rest, with the ones that
we don't support, for example this M-thensed element, which added the correlations along the other
things, since we want to give some idea of the compatibility before, but we don't have the resources
for everything to make special rules for all of these elements, at least now, what we do is they
render as a name row, which is HTML equivalent of deep, so instead of that fancy thing,
we get the content, which at least is something, this does mean that we can do the same thing as before,
is just we have to combine different building blocks, but existing content at least renders
somewhat good, the other case is math variant, so in formulas, it's used to be a convention
that you write variables in italics, you can see it's slightly slanted, and this is still supported
by MathML Core and done by default on identifiers, however, we now use a text transform for this,
which is nice, but a lot of other cases were previously supported by MathML, like Gothic,
Test, or Mono Space, which it's better for implementation and for everything to just use the correct
unicode code point instead of having all of this complexity, so that's been deprecated, and
the thing with this is that we can just like say, okay, let's remove it from all browsers and
call it a day, because there are websites that still have this thing, so for now, it's a feature
that you can toggle to the Procades, and if you do, it will have the new thing, but we can just
see this, and the final thing is that, not always everything goes to plan, so there are some
things that you have to live with, so for example, there's some staking canryamath by Microsoft,
two of the open type fields are changed, and this wasn't realized until recently, so this
meant that, for example, Office relies on those two fields being changed, but all of the other things
rely on them being the correct thing, and Office is used a lot, so we can, and this has been
a shipping form for years, so we can just say, okay, let's change everything, we need work around,
and there are a few work-arounds like this that we need to do, but instead of having it in every
browser and having to update that code and keep track of it, what we do is, for example, in this
case, we went to hard pass, the text library, this used by all of these browsers, except
the Apple ports of work with, but those don't have canryamath to begin with, and we handle that
case there, so it's in the values, it's a similar thing that text us, for example, so people can
steal, use this font, because it's the default by Windowsystem, and all of these only works,
if there's communication between people making browsers and people writing the specs, so as part
of our work, we also attend like the MathML working group meeting, we investigate and view issues,
we talk with processors, and sometimes we may contributions back to the spec, the latest one is
quite funny, which is adding animations to mass CSS properties, because that's something you can't
do in a book, but you can do in a website, which is good, and I'm really happy to say that all
of the things that we've been talking about, have shipped across, or browsers, except of the
Procating Mathvariant that's there, but we didn't enable it by default to avoid breaking pages yet.
So what's next, we have a few more improvements, there's a handling position elements and float in layout,
we have a B, we operate the dictionary with each operator, it says if it's stretchy, if it's
an accent, and it's been updated and based on different specs, so we have to fix that, and also
a few more changes to stretching spacing, so all of the browsers don't change the layout too much.
So thank you so much for joining, I hope that you'll learn a little bit about mathematics.
Yeah, if you have any questions regarding Open Specification, please don't hesitate to contact us,
and I have one more thing prepared, we can leave it playing while we have the Q&A.
It's a small project, but let me see if I can avoid it, it's there, it's already in a different page here.
But, oh, maybe it's not loading. We can start with the Q&A, and I'll get you a working.
Can I ship MathML to normal web users today?
I think it's in a quite good state to be shipped, the fewer main things that are missing are
like small tweaks and small things, but it is ready, yes.
Thanks.
Yeah, first of all, thanks a lot. I'm from archive, the one with the X, and we have
used MathML Core in our HTML papers, which I was a resounding success, so big thanks to you,
and everyone working on this. It wasn't mentioned clearly, it is an incredible improvement for
accessibility people, being able to get a proper semantic correct read out of mathematical
text from HTML pages, so a big thanks for also all, and contraend you question, yes, it is,
you can ship it, we ship like a million of HTML pages generated from that code, so that
people can actually access. Yeah, thanks a lot.
Yeah, the copy accessibility, it's a real improvement, because you can have the
screen readers say what it's actually there with, and I'll pre-wander you much, you don't get that.
Hi, thanks. I wonder if MathML Core has pseudo elements selectors to further customize certain
elements. How rich is the API, I mean, basically? So, you can, for MathML Core, the elements are
in CSS, you can have the elements selected, like, for example, MO, and so, and you can
use the same selectors that you would use in CSS, or hover, or things. No, but I meant, for example,
for the operators, are there? Yes, each element is a different type of, like, elements of operators,
are MO, for example, and you can select those in CSS, and do all of the things that you could
normally do to style them. And it's actually a lot of the rules in MathML Core are done like that.
They select certain type of elements, and they apply styling to them. And this is only because
you're unlucky to be after the previous presentation, but do you also provide CSS for different
types of media, like TV or printed media, like, books? I'm not sure about that, but MathML,
regular MathML is implemented for books, for PDFs, for everything, and there's an effort to keep
MathML Core and MathML compatible between each other. So, if you bring something, it's going to
be translated to MathML, and it hopefully should work. And you didn't mention Safari? Is it not?
WebKit is Safari for, sorry, WebKit is the Apple ports are Safari, and we also have WebKit for
links. Can you speak on annotation, specifically with the accessibility, and also annotation,
logic, annotation, other forms? So, I'm not sure of the top of my head, but I think annotations
are not rendered by default by MathML, but they do still appear in the render tree. So,
regarding accessibility, they would like be read aloud. Thank you.
Yeah, I'm curious about if you know any issues, when it comes to allowing users to
author content on websites using MathML. So, it uses generated content. Like, as an example,
for HTML, you can't allow users to write script elements for various reasons, hopefully,
but I'm curious, is there any equivalents of that kind of thing?
Again, I would have to check, but I think it's inside of MathML, it's a different context
so it only allows certain elements. You start with the Math tag, and then inside,
you can put the name row or wherever. If you put other tags, it will just read it as a
row and style row, which is one of the things we did. So, I'm not sure if there's like script
support, but I don't think so, but I want to be careful and say that, we would have to take it out.
One last question?
It may be a little bit out of your area, but you mentioned that Sovereign Tech Fund had
funded this. I was wondering if you had any thoughts about how infrastructure projects
like this should be funded versus, you know what I mean?
It is a complicated question, and I think there's going to be a lot of discussion about these
for example in the other rooms. It is tricky, for example, MathML was stuck like this for an
long time, because it's not seen as an immediate necessity, maybe like other projects,
but it is really useful, it is used in a lot of places, so it's good to have funding to be able
to work on projects like this, which may not be like the most appealing at first, but they do have
a lot of funding, line value for accessibility, for cross browser, compatibility, for site
like Wikipedia, that everybody uses, but yeah. Thank you. Well, thank you so much.