Next, we are going to talk about Matti Mel and Interup, with Eri, so no more French accent
it's going to be too much in the same.
So welcome, thank you all for being here today, my name is Eri, and I work at the web
platform team at Igalia. So for those who don't know yet, Igalia is a known person's 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 Matti Mel Interup, so what is Matti Mel?
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 from before, but we're now at version 3,
which is a W3C standard that is recommended 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 interior and a fraction would 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 a brief history, work up very, very brief, but as I said, it was first published in 1998,
and it's 3 years later, mathematics version 2 followed.
Around that time, Mozilla was the first to implement it, and it's still like that for a few years,
until the next browser opera, which back then had its own engine, implemented it in 2007.
The big milestone was when HTML5 came, it included mathematics as well as other things as a web standard,
and from there, WebKit was 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 HTML3 is a very, very complex standard, it features more than 200 elements and very difficult rules.
So it is intended to be a complete representation of mathematics, but this is not really feasible 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 before we had a proposal, which is Mathematical Core, it is a subset of Mathematical 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 are 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 Mathematrain 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 Mathematical support,
so like finally you can write a web page or write a thing using Mathematical 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 Mathematical 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 implementation, 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 and 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 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 Igalia, we got an agreement to work on Mathematical Core with the software and tech fund, which is part of an European agency that invests 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 Intermembers 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 cool.
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-coded thing, we have this rules in the user-aging stylesheet of each browser, which implement all of that complex behavior, just from these three rules.
Doing it in CSS makes it easy to write polyfields and to implement features, there's different things.
Another example of, sorry, we also need another piece of the past cell because font size says don't change on the wrong.
So we have this font size math with Chisano 3 word, it is implemented for all math elements.
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 to match the depth.
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-coded 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-to-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 right from 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.
We have two cases. So one is where we have brackets or other characters that have a corresponding inverse.
So for example, we would change the right brackets to the left bracket 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 WebKit, 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 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 the first one is using font family math, which in my system it resolves to let him order math popular math font.
The second one would 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.
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.
This is what happened before in the mirroring example, because that only certain font support mirroring, so I provided a specific one, and since it didn't load, everything was not as it should be.
Font family math is quite important. I like being 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, two hundred 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 was this emphenced element, which added decorations along the other things.
Since we want to keep 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 the render as an embrow, 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 map variant, so in formulas, it's usually a convention that you write variables in italic.
You can see it's slightly slanted, and this is still supported by mathematical core, and done by default on identifiers.
However, we now use text transform for this, which is nice, but a lot of other cases were previously supported by mathematical, 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.
The thing with this is that we can just 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 deprecate this, 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 around 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 WebPit, 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 still use this font, because it's the default by Windows system.
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 have 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 deprecating math variant 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 handling, position elements, and float in layout.
We have a big operator dictionary with each operator, 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 live with playing while we have the Q&A.
It's a small project, but let me see if I can. Oh wait, it's there, it's already in a different page.
Yeah, but oh, maybe it's not loading. We can start with the Q&A, and I'll get the work.
Can I ship math and alt, 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 really, yes.
First of all, thanks a lot. I'm from archive, the one with the X, and we have used MassML Core in our HTML papers, which have also 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 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.
I've seen accessibility, it's a really improvement because you can have the screen readers say what it's actually there with and up when there are too much, you don't get that.
Hi, thanks. I wonder if MassML Core has pseudo elements selectors to further customize certain elements. How rich is the API?
So, you can, for MassML Core, the elements are like, 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.
Yes, each element is a different type of 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 MassML 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 print media like books?
I'm not sure about TV, but MassML regular MassML is implemented for books, for PDFs, for everything, and there's an effort to keep MassML Core and MassML compatible between each other. So, if you print something, it's going to be translated to MassML and it hopefully should work.
And you didn't mention Safari? Is it not?
Oh, 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 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 MassML, 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 MassML, so it uses generated content.
Like, as an example, you know, for HTML, you can't allow users to write script elements for very obvious 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 MassML, it's a different context. So, it only allows certain elements.
You start with the Mass tag and then inside you can put the name row or whatever.
If you put other tags, it will just fit 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, yes.
One last question?
It may be a little bit out of your area, but you mentioned that sovereign tag 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 this, for example, in the other rooms.
It is tricky, for example, MatML was stuck like this for a long time, because it's not seen as an necessity, like 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 underlying value for accessibility, for cross-browser compatibility, for site-like Wikipedia, that's very useful.
Thank you.
Thank you so much, MatML.