Skip to main content

MathML 3 linebreaking and indentation examples

Automatic and manual linebreaks

In MathML 3, there is control for both manual and automatic linebreaking. For legacy reasons, manual linebreaks can be placed on mspace, but the focus of MathML 3 is line breaks that happen "at" an operator (mo). Of course, the linebreaks don't split an operator, they actually occur before the operator (so that the operator appears at the start of the next line) or after the operator (so that the operator appears at end of the current line). MathML even supports a style of linebreaking where the operator is placed at both the end of the current line and the beginning of the next line.

Control over manual linebreaks is done via the linebreak attribute. Although this value can be inherited, it typically would only be set on an operator to either force or prevent a linebreak at that operator. In contrast, the other linebreaking attributes (lineleading, linebreakstyle, and linebreakmultchar would often be inherited and affect both manual and automatic linebreaks.

Changing the linebreakstyle is demonstrated in the following two examples:

linebreakstyle value

before

after

mathml3-lb-before.png

mathml3-lb-after.png

The MathML for these examples is shown below. There are three things to note in the MathML:

  1. The width for linebreaking is set on the math element

  2. The character to use (×) if an "invisible times" is the breakpoint set on the math element.

  3. The line breaking style is set on the math element and inherited.

<div><tt><math xmlns='http://www.w3.org/1998/Math/MathML'<br></br>      maxwidth='200px' linebreakmultchar='×' linebreakstyle='before'><br></br>  <mrow><br></br>    <mrow><br></br>      <mo>(</mo><br></br>      <mrow><br></br>        <msup> <mi>x</mi> <mn>4</mn> </msup><br></br>        <mo>-</mo><br></br>        <mrow><br></br>          <mn>4</mn><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>x</mi> <mn>3</mn> </msup><br></br>          <mo>&#x2062;</mo><br></br>          <mi>y</mi><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <mrow><br></br>          <mn>6</mn><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>x</mi> <mn>2</mn> </msup><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>y</mi> <mn>2</mn> </msup><br></br>        </mrow><br></br>        <mo>-</mo><br></br>        <mrow><br></br>          <mn>4</mn><br></br>          <mo>&#x2062;</mo><br></br>          <mi>x</mi><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>y</mi> <mn>3</mn> </msup><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <msup> <mi>y</mi> <mn>4</mn> </msup><br></br>      </mrow><br></br>      <mo>)</mo><br></br>    </mrow><br></br>    <mo>&#x2062;</mo><br></br>    <mrow><br></br>      <mo>(</mo><br></br>      <mrow><br></br>        <msup> <mi>x</mi> <mn>4</mn> </msup><br></br>        <mo>+</mo><br></br>        <mrow><br></br>          <mn>4</mn><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>x</mi> <mn>3</mn> </msup><br></br>          <mo>&#x2062;</mo><br></br>          <mi>y</mi><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <mrow><br></br>          <mn>6</mn><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>x</mi> <mn>2</mn> </msup><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>y</mi> <mn>2</mn> </msup><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <mrow><br></br>          <mn>4</mn><br></br>          <mo>&#x2062;</mo><br></br>          <mi>x</mi><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>y</mi> <mn>3</mn> </msup><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <msup> <mi>y</mi> <mn>4</mn> </msup><br></br>      </mrow><br></br>      <mo>)</mo><br></br>    </mrow><br></br>  </mrow><br></br></math></tt></div>

The second example differs from the first only in the value of linebreakstyle. The difference is shown below:

<div><tt><math xmlns='http://www.w3.org/1998/Math/MathML'<br></br>      maxwidth='200px' linebreakmultchar='×' linebreakstyle=<span>'after'</span>><br></br>  …<br></br></math></tt></div>

The linebreaking in the above examples was done automatically by the renderer (for the images above, that is MathPlayer). Different renderers might break the expression differently. You can control the line breaks manually. For example, suppose you want to break the sums in the middle and avoid a linebreak at the multiplication, you do that by setting explicit linebreaks as shown below (the changes to make that happen are highlighted):

mathml3-lb-manual.png
<div><tt><math xmlns='http://www.w3.org/1998/Math/MathML'<br></br>      maxwidth='200px' linebreakmultchar='×' linebreakstyle='before'><br></br>  <mrow><br></br>    <mrow><br></br>      <mo>(</mo><br></br>      <mrow><br></br>        <msup> <mi>x</mi> <mn>4</mn> </msup><br></br>        <mo>-</mo><br></br>        <mrow><br></br>          <mn>4</mn><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>x</mi> <mn>3</mn> </msup><br></br>          <mo>&#x2062;</mo><br></br>          <mi>y</mi><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <mrow><br></br>          <mn>6</mn><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>x</mi> <mn>2</mn> </msup><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>y</mi> <mn>2</mn> </msup><br></br>        </mrow><br></br>        <mo<span>linebreak='newline'</span>>-</mo><br></br>        <mrow><br></br>          <mn>4</mn><br></br>          <mo>&#x2062;</mo><br></br>          <mi>x</mi><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>y</mi> <mn>3</mn> </msup><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <msup> <mi>y</mi> <mn>4</mn> </msup><br></br>      </mrow><br></br>      <mo>)</mo><br></br>    </mrow><br></br>    <mo<span>linebreak='newline'</span>>&#x2062;</mo><br></br>    <mrow><br></br>      <mo>(</mo><br></br>      <mrow><br></br>        <msup> <mi>x</mi> <mn>4</mn> </msup><br></br>        <mo>+</mo><br></br>        <mrow><br></br>          <mn>4</mn><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>x</mi> <mn>3</mn> </msup><br></br>          <mo>&#x2062;</mo><br></br>          <mi>y</mi><br></br>        </mrow><br></br>        <mo<span>linebreak='newline'</span>>+</mo><br></br>        <mrow><br></br>          <mn>6</mn><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>x</mi> <mn>2</mn> </msup><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>y</mi> <mn>2</mn> </msup><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <mrow><br></br>          <mn>4</mn><br></br>          <mo>&#x2062;</mo><br></br>          <mi>x</mi><br></br>          <mo>&#x2062;</mo><br></br>          <msup> <mi>y</mi> <mn>3</mn> </msup><br></br>        </mrow><br></br>        <mo>+</mo><br></br>        <msup> <mi>y</mi> <mn>4</mn> </msup><br></br>      </mrow><br></br>      <mo>)</mo><br></br>    </mrow><br></br>  </mrow><br></br></math></tt></div>

Controlling indentation

In the above examples, the indentation is still done automatically. If we want the indentation to be at the first term so that all of the operators align regardless of whether we have automatic or manual line breaks, we can do so by adding an id attribute value to the first operator that we want all subsequent lines to align to, and then setting indentalign to be id and the indenttarget to be that id as follows:

<div><tt><math xmlns='http://www.w3.org/1998/Math/MathML'<br></br>      maxwidth='200px' linebreakmultchar='×' linebreakstyle='before'<br></br>      <span>indentalign='id' indenttarget='firstOperator'</span>><br></br>  <mrow><br></br>    <mrow><br></br>      <mo>(</mo><br></br>      <mrow><br></br>        <msup><br></br>          <mi>x</mi><br></br>          <mn>4</mn><br></br>        </msup><br></br>        <mo<span>id='firstOperator'</span>>-</mo><br></br>        …<br></br></math></tt></div>

This gives the following result:

      mathml3-lb-indent1.png

It is often sufficient to inherit the indentation target, but not where there are multiple indentation levels; in those cases, it is necessary to either wrap a mstyle around the other parts or explicitly set the indentation target on potential break points. The later technique is a good one when a linebreak is forced. Here's an example where we align both the equals sign and the left parentheses:

mathml3-lb-2alignpts.png
<math xmlns='http://www.w3.org/1998/Math/MathML'
      maxwidth='300px' linebreakmultchar='×' linebreakstyle='before'>
 <mrow>
  <msup>
   <mrow>
    <mo>(</mo>
    <mrow>
     <msup> <mi>x</mi> <mn>2</mn> </msup>
     <mo>-</mo>
     <msup> <mi>y</mi> <mn>2</mn> </msup>
    </mrow>
    <mo>)</mo>
   </mrow>
   <mn>4</mn>
  </msup>
  <mo id='equals'>=</mo>
  <mrow>
   <msup>
    <mrow>
     <mo>(</mo> <mrow> <mi>x</mi> <mo>-</mo> <mi>y</mi> </mrow> <mo>)</mo>
    </mrow>
    <mn>4</mn>
   </msup>
   <mo>&#x2062;</mo>
   <msup>
    <mrow>
     <mo>(</mo> <mrow>  <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo>
    </mrow>
    <mn>4</mn>
   </msup>
  </mrow>
  <mo linebreak='newline' indentalign='id' indenttarget='equals'>=</mo>
  <mrow>
   <mrow>
    <mo id='lparen'>(</mo>
    <mrow>
     <msup> <mi>x</mi> <mn>4</mn> </msup>
     <mo>-</mo>
     <mrow>
      <mn>4</mn>
      <mo>&#x2062;</mo>
      <msup> <mi>x</mi> <mn>3</mn> </msup>
      <mo>&#x2062;</mo>
      <mi>y</mi>
     </mrow>
     <mo>+</mo>
     <mrow>
      <mn>6</mn>
      <mo>&#x2062;</mo>
      <msup> <mi>x</mi> <mn>2</mn> </msup>
      <mo>&#x2062;</mo>
      <msup> <mi>y</mi> <mn>2</mn> </msup>
     </mrow>
     <mo>-</mo>
     <mrow>
      <mn>4</mn>
      <mo>&#x2062;</mo>
      <mi>x</mi>
      <mo>&#x2062;</mo>
      <msup> <mi>y</mi> <mn>3</mn> </msup>
     </mrow>
     <mo>+</mo>
     <msup> <mi>y</mi> <mn>4</mn> </msup>
    </mrow>
    <mo>)</mo>
   </mrow>
   <mo linebreak='newline' indentalign='id' indenttarget='lparen' linebreakstyle='after'>&#x2062;</mo>
   <mrow>
    <mo>(</mo>
    <mrow>
     <msup> <mi>x</mi> <mn>4</mn> </msup>
     <mo>+</mo>
     <mrow>
      <mn>4</mn>
      <mo>&#x2062;</mo>
      <msup> <mi>x</mi>  <mn>3</mn> </msup>
      <mo>&#x2062;</mo>
      <mi>y</mi>
     </mrow>
     <mo>+</mo>
     <mrow>
      <mn>6</mn>
      <mo>&#x2062;</mo>
      <msup> <mi>x</mi> <mn>2</mn> </msup>
      <mo>&#x2062;</mo>
      <msup> <mi>y</mi> <mn>2</mn> </msup>
     </mrow>
     <mo>+</mo>
     <mrow>
      <mn>4</mn>
      <mo>&#x2062;</mo>
      <mi>x</mi>
      <mo>&#x2062;</mo>
      <msup> <mi>y</mi> <mn>3</mn> </msup>
     </mrow>
     <mo>+</mo>
     <msup> <mi>y</mi> <mn>4</mn> </msup>
    </mrow>
    <mo>)</mo>
   </mrow>
  </mrow>
 </mrow>
</math>