Math equation grid - documentation

Purpose

To create a way to layout simple math equations or calculations.

Usage

Use to

• Align math equations or calculation patterns
• Replicate calculation layouts from a document (e.g. PDF) in HTML

Do not use to

• Create a layout for general content
  • Refer to: Grid system - WET4
  • Use the grid system when needing to create specific column widths
• In place of a table when the content should be in that format
  • Refer to: Tables - WET4
• Stylize complex math equations
  • Refer to: MathML - WET4

Working examples

• English example
• French example

Evaluation and report

Not yet evaluated

Accessibility guidance

Use HTML entity names or codes for math symbols in order display without CSS or additional accessibility support.

Style HTML symbols instead of using icons, unless you have a fall back in case the icon style sheet does not load. Icons also need invisible text for screen reader devices.

How to implement

1. Create a parent element
   

   <div class="wb-math-grid">

2. Create a row for each line item and calculation
   

   <div class="mg-row">

3. Create the same number of cells needed to display each line item fully

   Using <div> on cell

   <div class="wb-math-grid">
   		<div class="mg-row">
   			<div class="mg-cell"></div>
   			...
   		</div>
   </div>

   Use <div> elements, as inline elements may cause unexpected issues
4. Repeat for the amount of rows needed for the equation
   Use an equal number of cells for all rows of the equation, even when there is no content. If the aligned cell does not have information, leave it blank.

Configuration options

Class options

<div class="mg-cell mg-brdr-otln">

<div class="mg-cell mg-brdr-lft">

<div class="mg-cell mg-brdr-rght">

<div class="mg-scroll">
  <div class="wb-math-grid">

You can also use many existing GCWeb styling for this component.

Attribute options

Source code

Source code for the math grid plugin on GitHub