-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathMathML-as-inline-or-block.html
More file actions
257 lines (256 loc) · 13.3 KB
/
MathML-as-inline-or-block.html
File metadata and controls
257 lines (256 loc) · 13.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Can block MathML element be nested inside of a <code>p</code> element?</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Can block MathML element be nested inside of a <code>p</code> element?</h1>
<p>This page investigates whether MathML styled as a block element should be written inside or outside of the <code>p</code> element.</p>
<h2>In short</h2>
<p>MathML content is phrasing content (among others), which is allowed inside the <code>p</code> element even if it is displayed as a block element. So, <strong>yes</strong>, block math is allowed inside the <code>p</code> element.</p>
<p>It is also allowed to write block math as a sibling to the <code>p</code> element, when they are both nested inside an HTML element, which accepts phrasing and flow content.</p>
<p>These deductions are based on the HTML specification, which is gone more into detail further.</p>
<h2>Motivation</h2>
<p>People used to writing HTML and CSS are used to the block model of representing the web page (or similar). Basically this means that all content is somehow divided into vertical blocks that can stretch across the whole view.</p>
<p>This paragraph is in a block and they can vary in size.</p>
<p>Inside blocks of content there is inline content such as this text inside the paragraph.</p>
<p>MathML can be marked up as an inline or as a block element with the <code>display</code> attribute. It can be either</p>
<ul>
<li><code>display="<strong>block</strong>"</code></li>
<li><code>display="<strong>inline</strong>"</code>.</li>
</ul>
<p>In a way, it has a this kind of dual property. This has led to some confusion on how MathML should be written in an HTML document. The inline MathML is quite self-explanatory: It is inline content.</p>
<p>The confusion rises from MathML code's dual nature: it can also be block content.</p>
<h2>The question</h2>
<p>The question is that when you use the <code>display="<strong>block</strong>"</code> attribute-value pair, which HTML markup should you use?</p>
<p>Option 1. MathML inside the <code>p</code> element:</p>
<pre><code>
<strong class="yellow"><p></strong>The quadratic formula is the one many people know
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mo>⁢</mo>
<mi>a</mi>
<mo>⁢</mo>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢</mo>
<mi>a</mi>
</mrow>
</mfrac>
</math><strong class="yellow"></p></strong>
</code></pre>
<p>Rendered (with the CSS style: <code>math[display="block"] {
margin-top: 1em;}</code>):</p>
<p>The quadratic formula is the one many people know
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mo></mo>
<mi>a</mi>
<mo></mo>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo></mo>
<mi>a</mi>
</mrow>
</mfrac>
</math></p>
<p>Option 2. MathML outside the <code>p</code> element:</p>
<pre><code>
<strong class="yellow"><p></strong>The quadratic formula is the one many people know<strong class="yellow"></p></strong>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mo>⁢</mo>
<mi>a</mi>
<mo>⁢</mo>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢</mo>
<mi>a</mi>
</mrow>
</mfrac>
</math>
</code></pre>
<p>Rendered:</p>
<p>The quadratic formula is the one many people know</p>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mo></mo>
<mi>a</mi>
<mo></mo>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo></mo>
<mi>a</mi>
</mrow>
</mfrac>
</math>
<h2>Discussion</h2>
<p>Let's look into how the MathML block content should be interpreted. This we will start by going into the relevant specifications:</p>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/">HTML specification (multipage)</a></li>
<li><a href="https://drafts.csswg.org/css2/">CSS specification (as cited in the HTML specification)</a>.</li>
</ul>
<h3>The content model</h3>
<p>Since we are talking about a specific element, <code>p</code>, we have to figure out what kind of content is allowed inside it.</p><p>The HTML specification specifies each element's <strong>content model</strong>, which means</p>
<blockquote>
<dl>
<dd><dt>"Content model</dt></dd>
<dd><p>A normative description of what content must be included as children and descendants of
the element."</p></dd>
</dl>
<cite><a href="https://html.spec.whatwg.org/#concept-element-content-model">Concept content model, 3.2.4 Element definitions, HTML specification</a></cite>
</blockquote>
<p>Now, the <code>p</code> element's content model is "<strong>phrasing content</strong>" (<a href="https://html.spec.whatwg.org/#the-p-element">4.4.1 The p element, HTML specification</a>), which means that the <code>p</code> element accepts only phrasing content.</p>
<p>This is the reason that, for example, list elements <code>ol</code> and <code>ul</code> are not allowed inside the <code>p</code> element, since the list elements are only "<strong>flow content</strong>" (<a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element">4.4.5 The ol element</a> and <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element">4.4.6 The ul element</a>).</p>
<p>This leads a natural question: What kind of content is MathML?</p>
<h3>MathML as content</h3>
<p>MathML is a lot of different content:</p>
<blockquote>
<p>"The <a href="https://w3c.github.io/mathml-core/#the-top-level-math-element">MathML <code>math</code></a> element falls into the <a href="#embedded-content-category">embedded content</a>,
<a href="#phrasing-content-2">phrasing content</a>, <a href="#flow-content-2">flow content</a>, and <a href="#palpable-content-2">palpable content</a>
categories --."</p>
<cite><a href="https://html.spec.whatwg.org/#mathml">4.8.15 MathML, HTML specification</a></cite>
</blockquote>
<p><strong>We have an answer</strong>: since MathML is phrasing content, it is allowed inside the <code>p</code> element.</p>
<p>This might have been clear when MathML is presented inline, but the question is what about when it is a block element?</p>
<p>(Another discussion would be that does it make sense for MathML content to be so diverse? This will not be discussed here.)</p>
<h3>MathML as an inline or as a block element?</h3>
<p>The confusion with MathML content lies in the way it is presented. MathML can be marked up as an inline or a block (or an inline-block) element.</p><p>(To be fair, so can any other element with styling.)</p>
<p>There are two answers.</p>
<h4>1. It is allowed, because MathML is phrasing content</h4>
<p>The way content is <strong>presented</strong> shouldn't affect its category. MathML doesn't lose its categories when its visual representation is changed, so it would still be allowed inside the <code>p</code> element.</p>
<h4>2. We have to look at the CSS specification</h4>
<p><a href="https://drafts.csswg.org/css2/">CSS specification (as cited in the HTML specification)</a> can also provide us with some depth to our answer.</p>
<p>The <code>p</code> element is a block element. MathML content can be either inline or block content, but in this case it is block content.</p>
<p>What is said about nesting block content (<code>math</code>) inside other block content (<code>p</code>) in the CSS specification (that the HTML specification cites)?</p>
<blockquote>
<p>"-- if a block container box -- has a block-level box inside it --, then we force it to have only block-level boxes inside it."</p>
<cite><a href="https://drafts.csswg.org/css2/#anonymous-block-level">9.2.1.1. Anonymous block boxes, CSS specification</a></cite>
</blockquote>
<p>So, nesting block content isn't an issue, because it turns all of the content to be in block-level boxes inside it.</p>
<p>What about block MathML content's relation to other content inside <code>p</code> element?</p>
<p>The text that is not nested in any other element (such as math would be in the <code>math</code> element) is in an inline container:</p>
<blockquote>
<p>"Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element."</p>
<cite><a href="https://drafts.csswg.org/css2/#anonymous%E2%91%A0">9.2.2.1. Anonymous inline boxes, CSS specification</a></cite>
</blockquote>
<p>Together with the previous quote we deduce how the content will be handled for <a href="#option-1">option 1</a> (padding and spacing have been exaggerated):</p>
<p><div role="region" aria-label="Block element" class="p-block"><div role="region" aria-label="Nested block element" class="text-block"><span role="region" aria-label="Nested inline element" class="inline-text">The quadratic formula is the one many people know</span></div>
<div role="region" aria-label="Nested block element" class="math-block">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mo></mo>
<mi>a</mi>
<mo></mo>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo></mo>
<mi>a</mi>
</mrow>
</mfrac>
</math></div></p></div>
<p>So, here the markup can be categorized as</p>
<ul>
<li><code>p</code> is a block element</li>
<li>text inside <code>p</code> element will be inline</li>
<li><code>math</code> content will be in its own block element.</li>
</ul>
<p>Which poses no problems at all.</p>
<h2>Should MathML be marked up inside the <code>p</code> element or not?</h2>
<p>You an do it either way.</p>
<p>It is not wrong to include or exclude it. If the MathML code is always inside an HTML element, be it <code>main</code>, <code>section</code> or other, it is allowed to be only a sibling to the <code>p</code> element as well.</p>
</body>
</html>