Math equation grid
An accessible, printable and understandable pattern for simple math equations.
GCWeb implementation plan
- 2025-06 - Engage with DTO to show design pattern
- 2025-08 - Review and identify requirement to make this functionality enterprise ready
- 2025-09 - Produce accessibility and usability report on its usage on Canada.ca
Todo and for future consideration
- Finalize design
Sponsor: CRA - Christopher Oakes (@christopher-o)
On this page
Basic configurations
Use for alignment of math equations.
Additional use of text-right and brdr-tp classes to finalize the design.
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
<div class="wb-math-grid">
<div class="mg-row">
<div class="mg-cell"></div>
<div class="mg-cell text-right">$50,000</div>
<div class="mg-cell"></div>
<div class="mg-cell">Base price</div>
</div>
<div class="mg-row">
<div class="mg-cell">×</div>
<div class="mg-cell text-right">3.5</div>
<div class="mg-cell">%</div>
<div class="mg-cell">Interest</div>
</div>
<div class="mg-row">
<div class="mg-cell">+</div>
<div class="mg-cell text-right">$200</div>
<div class="mg-cell"></div>
<div class="mg-cell">Fee</div>
</div>
<div class="mg-row">
<div class="mg-cell">÷</div>
<div class="mg-cell text-right">12</div>
<div class="mg-cell"></div>
<div class="mg-cell">Months of the year</div>
</div>
<div class="mg-row">
<div class="mg-cell mg-brdr-tp">=</div>
<div class="mg-cell text-right mg-brdr-tp">$162.50</div>
<div class="mg-cell"></div>
<div class="mg-cell">Total</div>
</div>
</div>Base price
$50,000
Interest
×
3.5
%
Fee
+
$200
Months of the year
÷
12
Total
=
$162.50
Code
<div class="wb-math-grid">
<div class="mg-row">
<div class="mg-cell">Base price</div>
<div class="mg-cell"></div>
<div class="mg-cell text-right">$50,000</div>
<div class="mg-cell"></div>
</div>
<div class="mg-row">
<div class="mg-cell">Interest</div>
<div class="mg-cell">×</div>
<div class="mg-cell text-right">3.5</div>
<div class="mg-cell">%</div>
</div>
<div class="mg-row">
<div class="mg-cell">Fee</div>
<div class="mg-cell">+</div>
<div class="mg-cell text-right">$200</div>
<div class="mg-cell"></div>
</div>
<div class="mg-row">
<div class="mg-cell">Months of the year</div>
<div class="mg-cell">÷</div>
<div class="mg-cell text-right">12</div>
<div class="mg-cell"></div>
</div>
<div class="mg-row">
<div class="mg-cell">Total</div>
<div class="mg-cell mg-brdr-tp">=</div>
<div class="mg-cell text-right mg-brdr-tp">$162.50</div>
<div class="mg-cell"></div>
</div>
</div>Customization
Padding
Remove all padding
Remove all the padding to customize the alignment of symbols or statements as needed.
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
<div class="wb-math-grid p-0">
...Remove padding by row
Remove the padding of individual rows as needed.
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
...
<div class="mg-row p-0">
...Applied to row 2 (× 3.5% Interest).
Remove padding by cell
Remove the padding of individual cells as needed. This may cause some alignment issues.
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
...
<div class="mg-cell text-right p-0">3.5</div>
<div class="mg-cell p-0">%</div>
...Applied to 2 cells on row 2 (3.5%).
Add extra padding between rows
Add 10 pixels of extra padding between rows if needed.
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
<div class="wb-math-grid mg-spcd">
...Strong border line
A more visible border line when calculation is complete and total is provided.
Border line on a row
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
...
<div class="mg-row mg-brdr-tp">
...Use either the mg-brdr-tp or mg-brdr-bttm class.
Border line on cells
The border line can be added to individual cell.
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
...
<div class="mg-cell mg-brdr-tp">=</div>
<div class="mg-cell text-right mg-brdr-tp">$162.50</div>
...Use either the mg-brdr-tp or mg-brdr-bttm class.
Scroll on horizontal overflow
Wrap the grid with the mg-scroll class to make the equation scroll horizontally for small devices (under 768px), similar to the table-responsive class for tables.
With scroll class
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year (Extra text to showcase scroll)
=
$162.50
Total
Code
<div class="mg-scroll">
<div class="wb-math-grid">
...
<div class="mg-row nowrap">
...
</div>
</div>
</div>Only use when required. Most useful when recreating patterns from a PDF form.
Without scroll class
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year (Extra text to showcase word wrap)
=
$162.50
Total
Code
<div class="wb-math-grid">
...
<div class="mg-row">
...
</div>
</div>Without math-grid=responsive or nowrap classes, the text word wraps.
Pause for each section
By default, most screen reader devices will reach the equation line-by-line.
If the equation contains a lot of content, or has visual barriers (i.e. borders) it may be helpful to hear the information from each cell separately to navigate more precisely (similar to a table).
Add the attribute data-wb-math-grid to the parent element (with the class wb-math-grid) using the value srPause: true.
With pause class
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
<div class="wb-math-grid" data-wb-math-grid='{"srPause": true}'>
...This should read as:
[fifty thousand dollars] [base price] [times] [three point five] [percent] [interest] [plus] [two hundred dollars] [fee] [divide by] [twelve] [months in the year] [equals] [one hundred and sixty two dollars and fifty cents] [total]
Tested with:
- JAWS 2023
- NVDA 2021
Without pause class
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
<div class="wb-math-grid">
...This should read as:
[fifty thousand dollars base price] [times three point five percent interest] [plus two hundred dollars fee] [divide by twelve months in the year] [equals one hundred and sixty two dollars and fifty cents total]
Tested with:
- JAWS 2023
- NVDA 2021
Other examples
Use custom design styling
Add GCWeb style classes to enhance the visibility or look of the equation.
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Code
<div class="wb-math-grid">
<div class="mg-row">
<div class="mg-cell"></div>
<div class="mg-cell h4 text-muted text-right">$50,000</div>
<div class="mg-cell"> </div>
<div class="mg-cell">Base price</div>
</div>
<div class="mg-row">
<div class="mg-cell h4">×</div>
<div class="mg-cell h4 text-muted text-right">3.5</div>
<div class="mg-cell h4 text-muted">%</div>
<div class="mg-cell">Interest</div>
</div>
<div class="mg-row">
<div class="mg-cell h4">+</div>
<div class="mg-cell h4 text-muted text-right">$200</div>
<div class="mg-cell"> </div>
<div class="mg-cell">Fee</div>
</div>
<div class="mg-row">
<div class="mg-cell h4">÷</div>
<div class="mg-cell h4 text-muted text-right">12</div>
<div class="mg-cell"></div>
<div class="mg-cell">Months of the year</div>
</div>
<div class="mg-row">
<div class="mg-cell h4 mg-brdr-tp">=</div>
<div class="mg-cell h4 text-muted text-right mg-brdr-tp">$19.50</div>
<div class="mg-cell"> </div>
<div class="mg-cell">Total</div>
</div>
</div>Use grid and full width to line up calculations
Use full width to equalize the size of separate calculations associated to each other. They can be visually aligned regardless on content.
Alternatively, the width of all the calculations can be managed by putting them in a grid pattern.
2022 available room after contribution
2022 TFSA dollar limit
$6,000
2022 contributions
−
$2,000
Available/Unused TFSA contribution room available for future years
=
$4,000
In 2023 Cedric makes a $500 withdrawal from his account. Even though he makes this withdrawal in 2023, it will not be added back to his TFSA contribution room until 2024.
2023 available contribution room in year of withdrawal
2022 unused TFSA contribution room
$4,000
2023 TFSA dollar limit
+
$6,500
2023 withdrawal (does not affect current year contribution room)
$500
2023 unused TFSA contribution room available for future years
=
$10,500
2024 available contribution room in year after withdrawal
2023 unused TFSA contribution room
$10,500
2023 withdrawal (added back as available contribution room)
+
$500
2024 TFSA dollar limit
+
$7,000
TFSA contribution room at the beginning of 2024
=
$18,000
2025 available contribution room
2024 unused TFSA contribution room
$18,000
2025 TFSA dollar limit
+
$7,000
TFSA contribution room at the beginning of 2025
=
$25,000
Code
<div class="row">
<div class="col-md-8">
...
<div class="wb-math-grid full-width">
...
</div>
<div class="wb-math-grid full-width">
...
</div>
</div>
</div>
Use to replicate calculations in PDF forms
This pattern is used to calculate quarterly instalment payments for corporations with example data.
With scroll class
Total 2024 federal tax payable Footnote(1l) (total of lines 700, 720, 724, 727 from your T2 return for 2024)
$240,000
2A
2024 net provincial and territorial tax payable before refundable credits Footnote(2l) (line 760 from your T2 return for 2024)
$0
2B
Total 2024 tax payable (amount 2A plus amount 2B)
$240,000
2C
Total estimated refundable tax credits for 2025 (amount K from Worksheet 1)
$0
2D
Option 2 instalment base amount (amount 2C minus amount 2D)
$240,000
2E
Four quarterly payments due under option 2 (amount 2E divided by 4)
$60,000
2F
Code
<div class="mg-scroll">
<div class="wb-math-grid">
<div class="mg-row nowrap">
<div class="mg-cell">Total 2024 federal tax payable <a href="#">Footnote(1l)</a> (total of lines 700, 720, 724, 727 from your T2 return for 2024)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$240,000</div>
<div class="mg-cell align-bottom">2A</div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell">2024 net provincial and territorial tax payable before refundable credits<a href="#">Footnote(2l)</a> (line 760 from your T2 return for 2024)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$0</div>
<div class="mg-cell align-bottom">2B</div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell">Total 2024 tax payable (amount 2A <strong>plus</strong> amount 2B)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$240,000</div>
<div class="mg-cell align-bottom">2C</div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell">Total estimated refundable tax credits for 2025 (amount K from Worksheet 1)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$0</div>
<div class="mg-cell align-bottom">2D</div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell">Option 2 instalment base amount (amount 2C <strong>minus</strong> amount 2D)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$240,000</div>
<div class="mg-cell align-bottom">2E</div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell">Four quarterly payments due under option 2 (amount 2E <strong>divided by</strong> 4)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$60,000</div>
<div class="mg-cell align-bottom">2F</div>
</div>
</div>
</div>Without scroll class
Total 2024 federal tax payable Footnote(1l) (total of lines 700, 720, 724, 727 from your T2 return for 2024)
$240,000
2A
2024 net provincial and territorial tax payable before refundable credits Footnote(2l) (line 760 from your T2 return for 2024)
$0
2B
Total 2024 tax payable (amount 2A plus amount 2B)
$240,000
2C
Total estimated refundable tax credits for 2025 (amount K from Worksheet 1)
$0
2D
Option 2 instalment base amount (amount 2C minus amount 2D)
$240,000
2E
Four quarterly payments due under option 2 (amount 2E divided by 4)
$60,000
2F
Code
<div class="wb-math-grid">
<div class="mg-row">
<div class="mg-cell">Total 2024 federal tax payable <a href="#">Footnote(1l)</a> (total of lines 700, 720, 724, 727 from your T2 return for 2024)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$240,000</div>
<div class="mg-cell align-bottom">2A</div>
</div>
<div class="mg-row">
<div class="mg-cell">2024 net provincial and territorial tax payable before refundable credits <a href="#">Footnote(2l)</a> (line 760 from your T2 return for 2024)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$0</div>
<div class="mg-cell align-bottom">2B</div>
</div>
<div class="mg-row">
<div class="mg-cell">Total 2024 tax payable (amount 2A <strong>plus</strong> amount 2B)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$240,000</div>
<div class="mg-cell align-bottom">2C</div>
</div>
<div class="mg-row">
<div class="mg-cell">Total estimated refundable tax credits for 2025 (amount K from Worksheet 1)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$0</div>
<div class="mg-cell align-bottom">2D</div>
</div>
<div class="mg-row">
<div class="mg-cell">Option 2 instalment base amount (amount 2C <strong>minus</strong> amount 2D)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$240,000</div>
<div class="mg-cell align-bottom">2E</div>
</div>
<div class="mg-row">
<div class="mg-cell">Four quarterly payments due under option 2 (amount 2E <strong>divided by</strong> 4)</div>
<div class="mg-cell align-bottom mg-brdr-bttm text-right">$60,000</div>
<div class="mg-cell align-bottom">2F</div>
</div>
</div>Use to replicate calculations in PDF returns
This pattern is from the first few lines of a T1 return with example data.
Hint: add additional invisible text to help those with screen readers to better understand the content of each cell..
Employment income (box 14 of all T4 slips)
line number: 10100
50,000: dollars
00: cents
return calculation line: 1
Tax-exempt income for emergency services volunteers
line number: 10105
456: dollars
78: cents
Commissions included on line 10100 (box 42 of all T4 slips)
line number: 10120
56: dollars
10: cents
Wage-loss replacement contributions
line number: 10130
0: dollars
00: cents
Other employment income
line number: 10400
+
1,005: dollars
23: cents
return calculation line: 2
Code
<div class="mg-scroll">
<div class="wb-math-grid mg-pause">
<div class="mg-row nowrap">
<div class="mg-cell bg-light mg-brdr-bttm">Employment income (box 14 of all T4 slips)</div>
<div class="mg-cell bg-light mg-brdr-bttm"></div>
<div class="mg-cell bg-light mg-brdr-bttm"></div>
<div class="mg-cell bg-light mg-brdr-bttm"></div>
<div class="mg-cell mg-brdr-otln"><span class="wb-inv">line number: </span>10100</div>
<div class="mg-cell mg-brdr-bttm"></div>
<div class="mg-cell mg-brdr-bttm text-right">50,000<span class="wb-inv">: dollars</span></div>
<div class="mg-cell mg-brdr-bttm mg-brdr-lft">00<span class="wb-inv">: cents</span></div>
<div class="mg-cell bg-light"><span class="wb-inv">return calculation line: </span>1</div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell bg-light mg-brdr-bttm">Tax-exempt income for emergency services volunteers</div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm mg-brdr-rght"><span class="wb-inv">line number: </span>10105</div>
<div class="mg-cell mg-brdr-bttm"></div>
<div class="mg-cell mg-brdr-bttm text-right"> 456<span class="wb-inv">: dollars</span></div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm">78<span class="wb-inv">: cents</span></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell bg-light mg-brdr-bttm">Commissions included on line 10100 (box 42 of all T4 slips)</div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm mg-brdr-rght"><span class="wb-inv">line number: </span>10120</div>
<div class="mg-cell mg-brdr-bttm"></div>
<div class="mg-cell mg-brdr-bttm text-right">56<span class="wb-inv">: dollars</span></div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm">10<span class="wb-inv">: cents</span></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell bg-light mg-brdr-bttm">Wage-loss replacement contributions</div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm mg-brdr-rght"><span class="wb-inv">line number: </span>10130</div>
<div class="mg-cell mg-brdr-bttm"></div>
<div class="mg-cell mg-brdr-bttm text-right">0<span class="wb-inv">: dollars</span></div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm">00<span class="wb-inv">: cents</span></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
<div class="mg-cell bg-light"></div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell bg-light mg-brdr-bttm">Other employment income</div>
<div class="mg-cell bg-light mg-brdr-bttm"></div>
<div class="mg-cell bg-light mg-brdr-bttm"></div>
<div class="mg-cell bg-light mg-brdr-bttm"></div>
<div class="mg-cell mg-brdr-otln"><span class="wb-inv">line number: </span>10400</div>
<div class="mg-cell mg-brdr-bttm"><strong>+</strong></div>
<div class="mg-cell mg-brdr-bttm text-right">1,005<span class="wb-inv">: dollars</span></div>
<div class="mg-cell mg-brdr-bttm mg-brdr-lft">23<span class="wb-inv">: cents</span></div>
<div class="mg-cell bg-light"><span class="wb-inv">return calculation line: </span>2</div>
</div>
</div>
</div>Error when unequal amount of cells
If there is not an equal amount of cells (mg-cells) for every row (mg-row), an error will be produced in the console log and the equation will be highlighted (bg-danger).
Appearance
$50,000
Base price
×
3.5
%
Interest
+
$200
Fee
÷
12
Months of the year
=
$162.50
Total
Console log message
Grid layout error for: wb-auto-X - inconsistent cell counts detected:
→ Row: 1, Cell count: 3
→ Row: 2, Cell count: 4
→ Row: 3, Cell count: 3
→ Row: 4, Cell count: 4
→ Row: 5, Cell count: 4Page details
- Date modified: