Is there a difference between display='inline' and style="display: 'inline';" on the MathML math element?

Question

Is there any difference between

<math display="inline"></math>

and

<math style="display: inline;"></math>?

Thanks!

Answer 1

While display="inline" and style="display:inline" usually behave similarly, MathML's display attribute and CSS's display property are very different things.

While both should affect the "external" layout (i.e., how the MathML expression fits into its surrounding context) similarly, they are ultimately unrelated and can interact in unexpected ways when clashing. This is perhaps not surprising since they are specified in completely different standards and their interaction is not specified anywhere; for some examples see the code snippet at the end. While SVG (the other XML language incorporated into HTML5) is seeing active development from both the SVG and the CSS Working Group to align, MathML is no longer under active development and thus won't be aligned with CSS in the future.

The important differences are probably the following:

• MathML's attributes only has two values (inline and block) whereas CSS offers a large variety of display attributes; this is primarily due to the fact that MathML is agnostic of its context (since it's an XML language). It means you'll often have to set both values which can lead to maintenance problems.

• MathML's display attribute affects the internal layout of an expression. This is because it affects MathML's displaystyle attribute, causing, e.g., moveable limits to be typeset differently; see https://www.w3.org/Math/draft-spec/mathml.html#chapter2_interf.toplevel.atts for more information on that.

In addition, the need for polyfills for MathML complicates matters further, as they may handle the interaction differently (as can be seen in the sample below when using the button to load MathJax). Since nothing is specified, there's no right or wrong here, of course.

var button = document.getElementById('button');
var loadMathJax = function() {
 script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=MML_CHTML-full';
  document.head.appendChild(script); 
}
button.onclick = loadMathJax;

<button id="button">Render with MathJax</button>

<h1>MathML inline, CSS inline</h1>

Hello <math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

<h1>MathML inline, CSS block</h1>
Hello.
<math style="display:block" xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

<h1>MathML block, CSS inline</h1>

Hello <math display="block" style="display:inline" xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.



<h1>MathML inline with displaystyle, CSS inline</h1>

Hello <math xmlns="http://www.w3.org/1998/Math/MathML" displaystyle="true">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

<h1>MathML inline with displaystyle, CSS block</h1>
Hello.
<math style="display:block" displaystyle="true" xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

<h1>MathML block without displaystyle, CSS inline</h1>

Hello <math display="block" displaystyle="false" style="display:inline" xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

Answer 2

No sir, they are exactly the same you can have a look on the Math tag documentation on Mozilla developer network here