Menu
MathML Element to Display a Fraction

The mfrac element is used to display a fraction.

y 3
<math>
  <mfrac>
  <mi>y</mi>
  <mn>3</mn>
  </mfrac>
</math>

If the fraction contains a single element in the numerator and a single element in the denominator, then the simple coding show above will work.

3 y 12
<math>
  <mfrac>
    <mrow>
    <mn>3</mn>
    <mi>y</mi>
    </mrow>
    <mrow>
    <mn>12</mn>
    </mrow>
  </mfrac>
</math>

If either the numerator or the denominator, or both, contain multiple elements, then use the mrow element to specify which elements go in the numerator and which go in the denominator.

2 x - 14 + 3 ( x + 2 ) 6 ( 2 x + 2 - 4 ( 4 x - 2 ) )
<math>
  <mfrac>
    <mrow>

   <mn>2</mn>
   <mi>x</mi>
   <mo>-</mo>
   <mn>14</mn>
   <mo>+</mo>

   <mn>3</mn>
   <mo>(</mo>
   <mi>x</mi>
   <mo>+</mo>
   <mn>2</mn>
   <mo>)</mo>

    </mrow>
    <mrow>

   <mn>6</mn>
   <mo>(</mo>
     <mn>2</mn>
     <mi>x</mi>
     <mo>+</mo>
     <mn>2</mn>
     <mo>-</mo>
       <mn>4</mn>
       <mo>(</mo>

      <mn>4</mn>
      <mi>x</mi>
      <mo>-</mo>
      <mn>2</mn>
      <mo>)</mo>
   <mo>)</mo>

    </mrow>
  </mfrac>
</math>

Using the row element and the mo element to define parentheses, you can define some pretty complex fractional expressions, as shown above.

y 3 12
<math>
<mfrac>
   <mfrac bevelled="true"> 
    <mi>y</mi>
    <mn>3</mn>
  </mfrac>
  <mn>12</mn>
  </mfrac>
</math>

By nesting mfrac elements you can create multi-level fractions. A multi-level fraction can sometimes be made more understandable by using a diagonal fraction bar. To create a diagonal fraction bar, add the bevelled attribute, set to "true", to the mfrac opening tag.


Learn more at amazon.com

More Graphics Design Tips:
• Graphic Design Meets Open Source
• MathML mtext Element to Display Plain Text
• Image Scanning - Confused About DPI?
• Five Surprising Reasons I Use Krita for Photo Editing
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site
• Selecting Vertices Edges and Faces in Blender
• Inkscape - Free Vector Graphics Illustration Package
• CSS Button Designer
• SVG Code for Outlined Letters Text
• How to Trace an Image Using Inkscape