WEBVTT 00:00.000 --> 00:11.000 Next, we are going to talk about Matti Mel and Interup, with Eri, so no more French accent 00:11.000 --> 00:14.000 it's going to be too much in the same. 00:14.000 --> 00:20.000 So welcome, thank you all for being here today, my name is Eri, and I work at the web 00:20.000 --> 00:28.000 platform team at Igalia. So for those who don't know yet, Igalia is a known person's consultancy, 00:28.000 --> 00:32.000 which started in Galicia, a beautiful region in Spain. 00:32.000 --> 00:39.000 We are working on company with a flat structure and great people all over the world. 00:39.000 --> 00:43.000 We do a lot of things, but today we're going to focus on the first one, 00:43.000 --> 00:51.000 since I'm going to talk about how we made Matti Mel Interup, so what is Matti Mel? 00:51.000 --> 00:54.000 Don't worry, you don't need to know it from before. 00:54.000 --> 01:01.000 Similar to HTML or XML, it's a markup language, but for mathematics. 01:01.000 --> 01:09.000 So it was first published in 1998, the same CSS from before, but we're now at version 3, 01:09.000 --> 01:18.000 which is a W3C standard that is recommended recommendation and it is used in many applications 01:18.000 --> 01:24.000 with young browsers, like ebook readers or office streets. 01:24.000 --> 01:32.000 So here we have a very simple example of how writing an interior and a fraction would look. 01:32.000 --> 01:43.000 You see that the syntax is similar to how HTML or website would work, but we have operators and so on. 01:43.000 --> 01:50.000 So let's do a brief history, work up very, very brief, but as I said, it was first published in 1998, 01:50.000 --> 01:54.000 and it's 3 years later, mathematics version 2 followed. 01:54.000 --> 02:00.000 Around that time, Mozilla was the first to implement it, and it's still like that for a few years, 02:00.000 --> 02:08.000 until the next browser opera, which back then had its own engine, implemented it in 2007. 02:08.000 --> 02:17.000 The big milestone was when HTML5 came, it included mathematics as well as other things as a web standard, 02:17.000 --> 02:23.000 and from there, WebKit was implemented, the version that we're currently on landed, 02:23.000 --> 02:31.000 and the last one to the party was Chromium in 2012, but this only lasted for a year because it was removed. 02:31.000 --> 02:34.000 So what happened? 02:34.000 --> 02:43.000 The thing is that HTML3 is a very, very complex standard, it features more than 200 elements and very difficult rules. 02:43.000 --> 02:51.000 So it is intended to be a complete representation of mathematics, but this is not really feasible to implement in practice, 02:51.000 --> 02:54.000 especially in a moving target like the web. 02:54.000 --> 03:04.000 So as such, like the behavior was inconsistent across engines, and the code was very difficult to maintain, a lot of depth accumulated. 03:04.000 --> 03:16.000 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, 03:16.000 --> 03:20.000 but it is tailored for browser implementations. 03:21.000 --> 03:30.000 So instead of like having everything, they look at what is used in practice, and how we can have like the important things, 03:30.000 --> 03:41.000 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, 03:41.000 --> 03:46.000 and also it has a lot of tests which is good. 03:47.000 --> 03:54.000 So thanks to this, Chromium got back in the Mathematrain and in 2003. 03:54.000 --> 04:08.000 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, 04:09.000 --> 04:16.000 so like finally you can write a web page or write a thing using Mathematical and users will be able to see it. 04:16.000 --> 04:19.000 But the work is still not done. 04:19.000 --> 04:24.000 Oh, sorry, just one another example first. 04:24.000 --> 04:37.000 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, 04:37.000 --> 04:55.000 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. 04:55.000 --> 05:06.000 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. 05:06.000 --> 05:15.000 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. 05:15.000 --> 05:31.000 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. 05:31.000 --> 05:36.000 They are one of the most complicated programs ever. 05:36.000 --> 05:42.000 They have, it's not a great metric, but they have roughly the same amount of lines of code that the Linux kernel. 05:42.000 --> 05:45.000 So yeah, it's not easy. 05:45.000 --> 05:56.000 So what we do is there's this project called Interup, which is a browser effort to improve the interoperability of the world. 05:56.000 --> 06:02.000 So all browsers can tackle certain features that are very important. 06:02.000 --> 06:17.000 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. 06:17.000 --> 06:32.000 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. 06:32.000 --> 06:38.000 So what have we been up to this past few months? 06:38.000 --> 06:46.000 So first we've tackled a few CSS features that Mathematical Core introduces. 06:46.000 --> 07:00.000 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. 07:00.000 --> 07:05.000 If you have a lot of them and formulas get complicated and they couldn't look cool. 07:05.000 --> 07:15.000 So before this was a hard-coded set of very complicated rules but the beauty of Mathematical Core is saying, 07:15.000 --> 07:20.000 okay, we have CSS, we have things we can reuse that. 07:20.000 --> 07:36.000 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. 07:37.000 --> 07:44.000 Doing it in CSS makes it easy to write polyfields and to implement features, there's different things. 07:44.000 --> 07:53.000 Another example of, sorry, we also need another piece of the past cell because font size says don't change on the wrong. 07:53.000 --> 08:03.000 So we have this font size math with Chisano 3 word, it is implemented for all math elements. 08:04.000 --> 08:21.000 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. 08:21.000 --> 08:33.000 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. 08:33.000 --> 08:39.000 So for example, there was this scribblevel attribute, which did more or less the same as math depth. 08:39.000 --> 08:48.000 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. 08:48.000 --> 08:57.000 So browsers don't get any more complex and there's no more complementing, but existing web pages display as better as possible. 08:57.000 --> 09:09.000 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. 09:09.000 --> 09:13.000 That's because it has to fit inside of the square root. 09:13.000 --> 09:23.000 And if it was in the same height, it wouldn't, and especially in a more complex example, it would start to look messy. 09:23.000 --> 09:30.000 A text has this concept of cramped, which is more or less the same idea. 09:30.000 --> 09:41.000 This is also implemented as CSS property, and we have this user-agent style sheet that implements this behavior. 09:41.000 --> 09:55.000 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. 09:55.000 --> 10:03.000 So here we have a right-to-left mirroring, so okay. 10:03.000 --> 10:11.000 Make a note for font math fonts, because this is not displaying correctly because of math fonts. 10:11.000 --> 10:16.000 We will come back to that later, and internet connection. 10:16.000 --> 10:28.000 But what would happen is that there are some languages that right from right to left, and mathematics too, especially the Arabic mathematical notation. 10:28.000 --> 10:37.000 And usually, in some cases, they use the same Latin and Greek symbols, but flipped. 10:38.000 --> 10:50.000 We have two cases. So one is where we have brackets or other characters that have a corresponding inverse. 10:50.000 --> 11:05.000 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. 11:05.000 --> 11:12.000 Where just like changing a character is not possible. So that's called leaf level mirroring. 11:12.000 --> 11:22.000 And here we have an example of what could go wrong. So this is a clockwise counter integral, the clockwise part is important. 11:22.000 --> 11:34.000 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. 11:34.000 --> 11:53.000 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. 11:53.000 --> 12:03.000 So all of these is implemented in our browsers, except leaf level mirroring in WebKit, which we are working on. 12:03.000 --> 12:24.000 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. 12:24.000 --> 12:29.000 And it is very important to have a font family available. 12:29.000 --> 12:39.000 Browsers used to have a harco-ded list of these fonts, but that became, it didn't work for systems. 12:39.000 --> 12:51.000 It was ugly to have all of them there. So now we have a font family math, which is a CSS family. 12:51.000 --> 13:12.000 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. 13:12.000 --> 13:26.000 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. 13:26.000 --> 13:34.000 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. 13:35.000 --> 13:50.000 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. 13:50.000 --> 14:05.000 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. 14:05.000 --> 14:15.000 Font family math is quite important. I like being with a standard not only involves adding features, but also removing them. 14:15.000 --> 14:24.000 As we say, we have tons of legacy code, and that legacy code is based on standards that may no longer be available. 14:24.000 --> 14:34.000 So, for example, a mathematical, two hundred elements, but mathematical code only has about 30. 14:34.000 --> 14:46.000 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. 14:46.000 --> 14:58.000 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. 14:58.000 --> 15:05.000 What we do is the render as an embrow, which is HTML equivalent of deep. 15:05.000 --> 15:11.000 So instead of that fancy thing, we get the content, which at least is something. 15:11.000 --> 15:23.000 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. 15:24.000 --> 15:35.000 The other case is map variant, so in formulas, it's usually a convention that you write variables in italic. 15:35.000 --> 15:44.000 You can see it's slightly slanted, and this is still supported by mathematical core, and done by default on identifiers. 15:45.000 --> 16:13.000 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. 16:13.000 --> 16:16.000 So that's been deprecated. 16:16.000 --> 16:26.000 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. 16:26.000 --> 16:38.000 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. 16:38.000 --> 16:47.000 And the final thing is that, not always everything goes to plan, so there are some things that you have to live with. 16:47.000 --> 17:06.000 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. 17:06.000 --> 17:16.000 But all of the other things rely on them being the correct thing, and office is used a lot. 17:16.000 --> 17:23.000 So we can, and this has been a shipping form for years, so we can just say, okay, let's change everything. 17:23.000 --> 17:30.000 We need work around, and there are a few work around like this that we need to do. 17:30.000 --> 17:44.000 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. 17:44.000 --> 17:57.000 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. 17:57.000 --> 18:07.000 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. 18:07.000 --> 18:14.000 And all of these only works if there's communication between people making browsers and people writing the specs. 18:14.000 --> 18:20.000 So as part of our work, we also attend like the MathML working group meeting. 18:20.000 --> 18:28.000 We investigate and view issues, we talk with processors, and sometimes we may have contributions back to the spec. 18:28.000 --> 18:40.000 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. 18:40.000 --> 18:56.000 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. 18:56.000 --> 19:07.000 So what's next? We have a few more improvements, there's handling, position elements, and float in layout. 19:07.000 --> 19:20.000 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. 19:20.000 --> 19:30.000 And also a few more changes to stretching spacing, so all of the browsers don't change the layout too much. 19:30.000 --> 19:39.000 So thank you so much for joining, I hope that you'll learn a little bit about mathematics. 19:39.000 --> 19:48.000 Yeah, if you have any questions regarding open specification, please don't hesitate to contact us, and I have one more thing prepared. 19:48.000 --> 19:52.000 We can live with playing while we have the Q&A. 19:52.000 --> 20:07.000 It's a small project, but let me see if I can. Oh wait, it's there, it's already in a different page. 20:07.000 --> 20:18.000 Yeah, but oh, maybe it's not loading. We can start with the Q&A, and I'll get the work. 20:18.000 --> 20:24.000 Can I ship math and alt, normal web users today? 20:25.000 --> 20:43.000 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. 20:43.000 --> 20:59.000 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. 20:59.000 --> 21:12.000 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. 21:12.000 --> 21:25.000 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. 21:25.000 --> 21:30.000 Yeah, thanks a lot. 21:30.000 --> 21:43.000 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. 21:43.000 --> 21:56.000 Hi, thanks. I wonder if MassML Core has pseudo elements selectors to further customize certain elements. How rich is the API? 21:56.000 --> 22:16.000 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. 22:16.000 --> 22:34.000 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. 22:34.000 --> 22:46.000 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. 22:46.000 --> 23:03.000 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? 23:03.000 --> 23:28.000 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. 23:28.000 --> 23:31.000 And you didn't mention Safari? Is it not? 23:31.000 --> 23:43.000 Oh, WebKit is Safari for, sorry, WebKit is the Apple ports are Safari, and we also have WebKit for links. 23:43.000 --> 23:53.000 Can you speak on annotation, specifically with accessibility and also annotation, logic, annotation, other forms? 23:53.000 --> 24:11.000 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. 24:11.000 --> 24:19.000 Thank you. 24:19.000 --> 24:34.000 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. 24:34.000 --> 24:42.000 Like, as an example, you know, for HTML, you can't allow users to write script elements for very obvious reasons, hopefully. 24:42.000 --> 24:48.000 But I'm curious is there any equivalents of that kind of thing? 24:48.000 --> 25:00.000 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. 25:00.000 --> 25:06.000 You start with the Mass tag and then inside you can put the name row or whatever. 25:06.000 --> 25:16.000 If you put other tags, it will just fit it as a row and style row, which is one of the things we did. 25:16.000 --> 25:31.000 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. 25:31.000 --> 25:37.000 One last question? 25:37.000 --> 25:45.000 It may be a little bit out of your area, but you mentioned that sovereign tag fund had funded this. 25:45.000 --> 25:56.000 I was wondering if you had any thoughts about how infrastructure projects like this should be funded versus, you know what I mean? 25:56.000 --> 26:07.000 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. 26:07.000 --> 26:21.000 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, 26:21.000 --> 26:36.000 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, 26:36.000 --> 26:47.000 but they do have a lot of underlying value for accessibility, for cross-browser compatibility, for site-like Wikipedia, that's very useful. 26:48.000 --> 26:49.000 Thank you. 26:49.000 --> 26:54.000 Thank you so much, MatML.