Page MenuHomePhabricator

Display math generates div inside of paragraph (HTML5 violation)
Open, Needs TriagePublic

Description

According to HTML 5, the only permitted content inside a p element is phrasing content. However, <math display="block"> generates a div placed inside of a p element, where a div is flow content.

This mode should remove the p that occurs prior to the div, as well as the closing tag.

Event Timeline

Izno created this task.Dec 4 2017, 10:12 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 4 2017, 10:12 PM
Izno updated the task description. (Show Details)Dec 4 2017, 10:12 PM
Izno updated the task description. (Show Details)
Aklapper renamed this task from Display math generates div inside of paragraph to Display math generates div inside of paragraph (HTML5 violation).Dec 5 2017, 11:32 AM

Ha, you beat me to this.

Just adding that tidy catches the attempt to wrap a p around the div, and changes it to a mess of unnecessary tags: <p></p><div> math </div><p></p>.

He7d3r added a subscriber: He7d3r.Dec 26 2017, 9:58 AM
Pkra moved this task from Incoming to MW Math Extension on the Math board.Dec 7 2018, 11:55 PM
Pkra added a subscriber: Pkra.Dec 11 2018, 8:38 AM

This mode should remove the p that occurs prior to the div, as well as the closing tag.

I think it would be better for the Math Extension not to create a div in the first place. There's no technical reason for using a div instead of a span here.

Izno added a comment.Dec 11 2018, 12:06 PM
This comment was removed by Izno.
Izno added a comment.Dec 11 2018, 12:08 PM

Div meets the intent of block math better. It might even be reasonable to mark it up as a paragraph in HTML 5.

Pkra added a comment.Dec 11 2018, 1:02 PM

Div meets the intent of block math better. It might even be reasonable to mark it up as a paragraph in HTML 5.

I emphatically disagree.

While display equations may be block content that is not always the case. A simple example are display equations that end with a text comma because they are part of a larger sentence structure.

For another example, the HTML5 spec considers MathML both phrasing and flow content, independently of whether it is inline or block.

Izno added a comment.EditedDec 11 2018, 1:52 PM

Div meets the intent of block math better. It might even be reasonable to mark it up as a paragraph in HTML 5.

While display equations may be block content that is not always the case.

That's true. But if you mark up your <math> wikitext with <math display=block>, you as the author of a wikitext document are *way* obviously meaning for the math to display as a block. Are you familiar with that functionality? That's what this task is about. Arguing without that context or seemingly without that context seems to miss the point of the task.

A simple example are display equations that end with a text comma because they are part of a larger sentence structure.

See above.

For another example, the HTML5 spec considers MathML both phrasing and flow content, independently of whether it is inline or block.

"Phrasing" and "flow" are HTML 5's key words for inline or block (slightly different semantics), so that it considers them both is more an artifact indicating that they can appear either with or without a certain kind of parent node and not much else.

I emphatically disagree.

You can emphatically disagree, but you haven't said anything yet that doesn't indicate these shouldn't be div/p wrapped. (You could entirely unwrap it and just put in the HTML <img> / <math> without a wrapping div, but those elements would need to take a class which indicates the element is a block element so that it can be styled as appropriate.)

@Izno I do not know what the best way of implementing it in the extension is, but from an author point of view both are treated equally as part of a sentence and there is no difference between inline and block formula except for the size of the equation.

In principle you would want to put everything as inline formula, however line-breaking formulas is not as easy as line-breaking normal text and you want to avoid linebreaks. This is why you put a manual linebreak in front of large formulas and with that avoid the need of a line-break within the formula. This is why you would use a block formula instead of an inline formula. Now the artificial linebreak might look like a new paragraph to the reader. This is why you want the block formula indented or centered, i.e. to tell the reader that you do not want to start a new paragraph. (e.g. LaTeX default style uses no vertical space but indenting to mark a new paragraph and centering for block formulas).

Most browsers create an additional vertical space at the start or end of a paragraph <p>, which is not appropriate before or after a block formula, because the whole point of using a block formula is to show the readers that you do not want to start a new paragraph.

Addendum: Another reason for a block formula is of course if the formula requires too much vertical space to fit into a normally spaced line

Pkra added a comment.Dec 11 2018, 6:13 PM

But if you mark up your <math> wikitext with <math display=block>, you as the author of a wikitext document are *way* obviously meaning for the math to display as a block. Are you familiar with that functionality?

Yes, I'm aware of it.

display=block has a very specific meaning in equation layout that does not align much with CSS's display=block. In particular, this property is primarily meant to inform the layout of the children. For some more detail, see my answer at https://stackoverflow.com/questions/41512604/is-there-a-difference-between-display-inline-and-style-display-inline-on/41676041#41676041.

Anyway, all I'm saying is that the use of a div here should be considered a bug in the Math Extension; if only for the pragmatic reason the actual rendering engine (MathJax, which I worked on for a several years) expects a span as a wrapper.

Of course, other workaround are possible but I'm still planning to propose to change the div to a span in the Math Extension. Happy to rehash this discussion in more detail then.

I agree, semantically these are part of inline text and it's the semantics, not the appearance, that should drive our choice of div vs span. So there should be no div and no p, if it's possible (and I'm sure it is) to get the correct appearance with a span instead.

TheDJ added a subscriber: TheDJ.Dec 12 2018, 3:15 PM

<span> with display:block is always an option of course. ;)