Make WordPress Core

Opened 14 years ago

Closed 16 months ago

Last modified 9 months ago

#13340 closed defect (bug) (fixed)

wpautop breaks inline MathML

Reported by: nicholaswilson's profile nicholaswilson Owned by: joedolson's profile joedolson
Milestone: 6.2 Priority: normal
Severity: normal Version: 2.9.2
Component: Formatting Keywords: needs-dev-note has-patch has-testing-info has-unit-tests commit
Focuses: accessibility Cc:

Description

wpautop treats inline <math> tags as block; they in fact may be placed block or inline, with their flow model dependent on the mode or CSS display property.

Trivial to fix; just needs someone to commit the change. Remove "|math" from $allblocks in file wp-includes/formatting.php. math tags on their own will be wrapped in a paragraph, which is fine.

As a very convenient enhancement, please replace on line 210:

     if ($br) {
-        $pee = preg_replace_callback('/<(script|style). ....
+        $pee = preg_replace_callback('/<(script|style|math) ...

to prevent MathML being polluted with breaks (current required workaround people are using is to have the whole block on one line, which is very messy to edit).

Attachments (1)

13340.diff (1.8 KB) - added by wojtek.szkutnik 14 years ago.

Download all attachments as: .zip

Change History (43)

#1 @nicholaswilson
14 years ago

  • Cc nicholas@… added

#2 @wojtek.szkutnik
14 years ago

  • Keywords has-patch added

Adding the patch. All looks pretty straightforward to me, shouldn't break anything.

#3 @wojtek.szkutnik
14 years ago

  • Cc wojtek.szkutnik@… added

#4 @wojtek.szkutnik
14 years ago

  • Keywords gsoc added

#5 @hakre
14 years ago

  • Keywords needs-testing needs-unit-tests added

wpautop() related/informative tickets:

Related: #1706
Related: #2833
Related: #3007
Related: #3833
Related: #4857
Related: #4298
Related: #5250
Related: #6984
Related: #7988
Related: #9437
Related: #10033
Related: #10490
Related: #11678
Related: #12061
Related: #13327

Informative: #7937
Informative: #9744

AutoP tickets get only fixed in very specific situations. In any case they need extensive testing because of backward compabilities and side-effects and therefore normally Unit-Tests.

#6 @nacin
14 years ago

  • Milestone changed from Awaiting Review to 3.1

This looks straightforward.

#7 @nacin
13 years ago

  • Keywords 3.2-early added
  • Milestone changed from 3.1 to Future Release
  • Type changed from defect (bug) to enhancement

Not knowing anything about MatML, I want confirmation before doing anything like this.

enhancements can go to 3.2.

#8 @WraithKenny
12 years ago

  • Keywords wpautop added

#9 @chriscct7
10 years ago

  • Keywords 3.2-early gsoc removed

Can anyone confirm this works per @nacin?

#10 @ericlewis
9 years ago

Can anyone offer boilerplate to reproduce the issue here?

#11 @ericlewis
9 years ago

<math> is a separate markup language which is a subset of XML. It is not supported by modern browsers. It would be odd to support this as a first-class citizen of wpautop().

#12 @ericlewis
8 years ago

  • Keywords has-patch needs-testing needs-unit-tests wpautop removed
  • Milestone Future Release deleted

Closing this out as per my previous comments, feel free to reopen with follow-up if the feature is justified.

#13 @ericlewis
8 years ago

  • Resolution set to wontfix
  • Status changed from new to closed

#14 @hughie.molloy
7 years ago

<math> tag has been a support element in HTML5 since 2011. https://www.w3.org/wiki/HTML/Elements/math
Please consider reopening this as it makes a huge difference to inline formatting.

Purposed:
http://i.imgur.com/HwB7yvx.png

Current:
http://i.imgur.com/18Xtcj2.png

Plain Text:
<h3>Quantum quandary</h3>At first sight, magnetic monopoles seem to be incompatible with quantum mechanics. That is because in quantum mechanics, electromagnetic fields have to be described in terms of a scalar potential <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>ϕ</mi></math> and vector potential <math xmlns="http://www.w3.org/1998/Math/MathML"><mi mathvariant="bold">A</mi></math>. The magnetic field is given by the curl of the vector potential, <math xmlns="http://www.w3.org/1998/Math/MathML"><mi mathvariant="bold">B</mi><mo>=</mo><mi mathvariant="bold">∇</mi><mo>×</mo><mi mathvariant="bold">A</mi></math>, and it follows from elementary vector calculus that the field must then be sourceless, <math xmlns="http://www.w3.org/1998/Math/MathML"><mi mathvariant="bold">∇</mi><mo>.</mo><mi mathvariant="bold">B</mi><mo>=</mo><mn>0</mn></math>. In other words, magnetic field lines cannot end. So how can there be magnetic monopoles?

#15 @conner_bw
5 years ago

Chiming in with a me too.

If I apply this patch it fixes the issue:

https://core.trac.wordpress.org/attachment/ticket/13340/13340.diff

For obvious reasons, I won't patch wp-includes/formatting.php, WordPress must do it...

Or, let us filter those strings? Example:

$allblocks = apply_filters( 'autop_allblocks', 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary' );
$allblocks = '(?:' . $allblocks . ')';

// ... snip ...

// Replace newlines that shouldn't be touched with a placeholder.
$newline_preservation_helper = apply_filters( 'autop_newline_preservation_helper', 'script|style' );
$pee = preg_replace_callback( '/<(' . $newline_preservation_helper . ').*?<\/\\1>/s', '_autop_newline_preservation_helper', $pee );

#17 @SteelWagstaff
4 years ago

  • Resolution wontfix deleted
  • Status changed from closed to reopened
  • Summary changed from wpautop breaks inline MathMl to wpautop breaks inline MathML

Hi all,

While it’s true that browser support for MathML is incomplete, MathML has been a W3C recommendation for more than 15 years, the 3rd version (released in 2014) is an ISO standard, and it has been a standard element in the HTML5 specification since 2014 (references: https://www.w3.org/TR/MathML/ + https://www.w3.org/2015/06/mathmlpas.html.en + https://www.w3.org/TR/html52/semantics-embedded-content.html#mathml). Furthermore, there’s a widely-used, openly-licensed, cross-platform JavaScript display engine for mathematics called MathJax that works in all browsers that can accept MathML as one of its input syntaxes (https://www.mathjax.org/). There are clear reasons, based both in our desire to use web standards and to make more accessible websites, that many of us would like to use MathML in our WordPress-based sites. Would you be willing to reconsider your decision not to treat <math> as a "first-class citizen of wpautop()", or failing that, allow us to filter the strings proposed a few months ago by @conner_bw?

This ticket was mentioned in Slack in #core by steelwagstaff. View the logs.


4 years ago

#19 @SergeyBiryukov
2 years ago

  • Milestone set to Awaiting Review

#20 @SteelWagstaff
18 months ago

Pinging again to see if there's been any movement on this? Is there any appetite to treat "<math> as a "first-class citizen of wpautop()", or allow us to filter the strings as proposed by connor_bw earlier in this thread?

This ticket was mentioned in Slack in #accessibility by beckej. View the logs.


18 months ago

This ticket was mentioned in Slack in #accessibility by azaozz. View the logs.


18 months ago

#23 @joedolson
18 months ago

  • Focuses accessibility added

If wrapping the math element with p tags can break it, it would make the most sense to add it to the list of excluded elements. Because it's a limited use element that's only viable in specialist use cases, I think the risk of breaking people's sites because they're expecting the tag to be wrapped in p is quite low.

MathML, while still having poor native support, is the only practical way to communicate mathematics accessibly, so breaking that is a real problem.

I think that the principle of wpautop is to attempt to wrap text that is either unmarked or marked only with inline elements; the exclusion list is intended to prevent breaking existing markup. Since running wpautop on math elements has a strong potential to break markup, I think it should be considered.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


17 months ago

#25 @ryokuhi
17 months ago

  • Keywords needs-refresh needs-dev-note added
  • Milestone changed from Awaiting Review to 6.2
  • Type changed from enhancement to defect (bug)

This ticket was reviewed today during the weekly bug scrub of the Accessibility Team.

The math element has a display attribute that can be set to either block or inline, allowing the user to decide how the element should be treated. By applying the wpautop function to all math elements, WordPress is overriding a choice that should be left to users, displaying all math elements as block ones.

After a quick check, it appears that the math element, if no display attribute is set, is displayed as an inline element in Chrome, Edge, and Firefox on Windows. If this is the standard behavior, then simply removing math from $allblocks in the wpautop function might break the styling on websites, as all math elements displaying as blocks would be shown as inline.

After a short discussion, the team decided that this should not be a blocker to moving this ticket forward: the ticket is now milestoned for the next major release, but we're already adding the needs-dev-note keyword so that users will be aware of this possibly breaking change in their layouts.

I'm also transforming this ticket to a bug since there currently are no other ways to add adding formulas to a website in an accessible way.

Last edited 17 months ago by ryokuhi (previous) (diff)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


17 months ago

#27 @joedolson
17 months ago

  • Owner set to joedolson
  • Status changed from reopened to accepted

This ticket was mentioned in PR #3847 on WordPress/wordpress-develop by @bgoewert.


17 months ago
#28

  • Keywords has-patch added; needs-refresh removed

#29 @bgoewert
17 months ago

  • Keywords has-testing-info added

Test Report

Patch tested: pr:3847

Steps to Test

  1. Copy/Paste an inline example of MathML to a Paragraph block and a Custom HTML block.
  2. Create a new Classic Block, Edit as HTML, and paste an inline example.
  3. Repeat first two steps for an example of block MathML.
  4. Install & activate the Classic Editor plugin.
  5. Create a new post/page.
  6. Select the "Text" tab.
  7. Paste the inline and block examples.

Inline Example:

<math><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></mrow></math>

Block Example:

<math display="block"><mtable><mtr><mtd><msup><mrow><mo>(</mo><mi>a</mi><mo>+</mo><mi>b</mi><mo>)</mo></mrow><mn>2</mn></msup></mtd><mtd><mo>=</mo></mtd><mtd><msup><mi>c</mi><mn>2</mn></msup><mo>+</mo><mn>4</mn><mo>⋅</mo><mo>(</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mi>a</mi><mi>b</mi><mo>)</mo></mtd></mtr><mtr><mtd><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><mn>2</mn><mi>a</mi><mi>b</mi><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mtd><mtd><mo>=</mo></mtd><mtd><msup><mi>c</mi><mn>2</mn></msup><mo>+</mo><mn>2</mn><mi>a</mi><mi>b</mi></mtd></mtr><mtr><mtd><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mtd><mtd><mo>=</mo></mtd><mtd><msup><mi>c</mi><mn>2</mn></msup></mtd></mtr></mtable></math>

Source: MDN Examples - Proving the Pythagorean theorem

Another Example: MDN - Deriving the Quadratic Formula

Expected Results

  • ✅ Inline MathML - Gutenberg
  • ✅ Block MathML - Gutenberg
  • ✅ Inline MathML - TinyMCE
  • ✅ Block MathML - TinyMCE

Environment

  • OS: Pop!_OS
  • Web Server: Docker-Desktop & wordpress-develop
  • Browser: Firefox 108, Chrome 109
  • PHP: 7.4.33
  • WordPress: 6.2-alpha-54642-src
  • Theme: Twenty Twenty-Three
  • Active Plugins: Classic Editor
  • OS: macOS Monterey (via LambdaTest)
  • Browser: Safari 16

Actual Results

  • ⚠ Inline MathML - Gutenberg: Custom HTML block only
  • ⚠ Block MathML - Gutenberg: Custom HTML block only
  • ⚠ Inline MathML - TinyMCE: Text Editor only
  • ⚠ Block MathML - TinyMCE: Text Editor only

Additional Notes

  • Twenty Twenty-Three does not apply margin to inline elements.
  • Swithcing TinyMCE to the Visual Editor after pasting to the Text Editor removes the markup.
  • While Gutenberg only parses this correctly using the Custom HTML block, I did also find that there is a MathML block plugin.

Supplemental Artifacts

Figure 1: Inline MathML - Gutenberg
https://i.imgur.com/95peIRw.png

Figure 2: Block MathML - Gutenberg
https://i.imgur.com/FAnBWem.png

Figure 3: TinyMCE
https://i.imgur.com/pymZ0AF.png

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

#32 @adamsilverstein
16 months ago

  • Keywords needs-unit-tests added

13340.diff looks good to me, we should add some unit tests though to confirm the new behavior.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

#34 @joedolson
16 months ago

PR https://github.com/WordPress/wordpress-develop/pull/4001 adds unit tests using the test cases above, although switches the block math element to use multiline entry, so that it properly tests whether or not br elements are inserted.

#35 @joedolson
16 months ago

  • Keywords needs-unit-tests removed

This ticket was mentioned in PR #4001 on WordPress/wordpress-develop by @joedolson.


16 months ago
#36

  • Keywords has-unit-tests added

Test inline & block math elements against wpautop.

This PR should verify tests. First test should pass; second should fail.

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

#37 @joedolson
16 months ago

  • Keywords commit added

#38 @joedolson
16 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 55272:

Formatting: Treat math elements as block-level elements.

The math element can be displayed either as a block or inline element. If wpautop only treats it as an inline element, it will break multiline elements by inserting br elements. Treating the element as a block element means that the editor won't break common normative usages of the math element.

Prevent math elements from having internal elements split up with br elements, disrupting formatting.

Props nicholaswilson, wojtek.szkutnik, hakre, conner_bw, ericlewis, hughie.molloy, SteelWagstaff, ryokuhi, joedolson, bgoewert, adamsilverstein, joedolson.
Fixes #13340.

This ticket was mentioned in Slack in #core by pbiron. View the logs.


15 months ago

This ticket was mentioned in Slack in #core by zzap. View the logs.


15 months ago

@bgoewert commented on PR #3847:


9 months ago
#42

Closed in 55272

Note: See TracTickets for help on using tickets.