WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.54k stars 4.21k forks source link

Add MathML Block #47198

Open EldarAgalarov opened 1 year ago

EldarAgalarov commented 1 year ago

Hi. It would be nice to have support for MathML blocks with basic functionality such as formula size, centering, etc. Now to insert MathML code the Custom HTML block should be used.

kathrynwp commented 1 year ago

Hi @EldarAgalarov have you given this plugin a try to add a MathML block?

https://wordpress.org/plugins/mathml-block/

I'm not sure enough people would use this block for it to be considered for inclusion in Core; the plugin has only 900 active installs.

EldarAgalarov commented 1 year ago

@kathrynwp Yes, I know about such plugins, but I prefer to be plugin-independent as much as possible, so i'm using just Custom HTML block at this moment :) MathML is part of HTML 5 standard so it sounds logical that Math ML Block should exists in the Gutenberg, like Heading, Paragraph, Table, Image blocks.

dmsnell commented 1 year ago

Having poked around on a math typesetting block myself, I'll share where I kind of left it off, and unfortunately why I think "MathML" isn't well-suited for core (hopefully "yet").

In short, MathML support in browsers is still somewhat abysmal. @adamsilverstein's block loads after page render to handle this by rendering the MathML via JavaScript; mine did the same thing but stored the generated rendered XML as a data URI to avoid a flash on initial page load (and to avoid pushing the cost of rendering to the client).

I would love a core formula block, but I think it'll be complicated by needing to serve a lot of different needs, which is good! Some people want to see a formula-builder UI so all they need to do is click buttons to generate a formula; others want LaTex syntax to quickly enter formulas as text. All that is fine I think, but needs people to do the work, plus it involves pulling in third-party libraries to parse the input formulas or present the UI (unless we want to write and maintain our own formula entry and rendering code).

So with the plugin space at least for now it's possible to choose your poison, so to speak, which might be much easier in the meantime than finding something that works for everyone. As I have a personal interest in this I'd be happy to review any code submissions or help guide along the project, but at the moment I'm not likely able to dedicate my time to creating such a block.

adamsilverstein commented 1 year ago

One great feature of the block inserter is the plugin search. If you type in /mathml the inserter will offer up the plugin and let you use it immediately. So using mathml currently is very low friction, although I support the idea of using native mathml support - and browser support is improving.

EldarAgalarov commented 1 year ago

In short, MathML support in browsers is still somewhat abysmal

Firefox supporting MathML for a long time Chromium added MathML back since 109

dmsnell commented 1 year ago

Agreed that Firefox's support looks pretty good, but a couple examples from Mozilla's test page shows some significant problems for Safari and for the Chrome version I have installed, which is 107.

In the following screenshots we have a LaTeX render on the left, an image of Firefox render in the middle, and the actual browser render on the right.

Essentially nothing in Chrome

Screenshot 2023-01-18 at 2 12 59 PM

Less severe problems here but still not a good experience, and these aren't exposed on particularly complicated formulas either.

Screenshot 2023-01-18 at 2 13 33 PM Screenshot 2023-01-18 at 2 13 42 PM

So even though Chrome has finally added support back in for MathML in their latest release (which was released just a week ago), that still leaves a pretty large group of readers behind and will for some time.

EldarAgalarov commented 1 year ago

Chrome version I have installed, which is 107

You should install version 109 and then you will get following: image image

Still worse than Firefox rendering, but much better than "rendering" of previous versions of Chromium :)

bgoewert commented 1 year ago

Somewhat related Trac ticket: https://core.trac.wordpress.org/ticket/13340

ellatrix commented 1 year ago

See also #35005. I think this would be interesting inline as well.