Grille d'équations mathématiques
Un modèle accessible, imprimable et compréhensible pour des équations mathématiques simples.
Sur cette page
Configurations de base
Utilisez pour l'alignement des équations mathématiques.
Utilisation supplémentaire des classes text-right et brdr-tp pour finaliser le design.
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
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">Prix de base</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">Intérêt</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">Frais</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">Mois de l'année</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>Prix de base
50 000
$
Intérêt
×
3,5
%
Frais
+
200
$
Mois de l'année
÷
12
Total
=
162,50
$
Code
<div class="wb-math-grid">
<div class="mg-row">
<div class="mg-cell">Prix de base</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">Intérêt</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">Frais</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">Mois de l'année</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>Personnalisation
Espacement
Supprimer tout espacement
Supprimez tout l'espacement pour personnaliser l'alignement des symboles ou des déclarations selon les besoins.
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
162,50
$
Total
Code
<div class="wb-math-grid p-0">
...Supprimer l'espacement par ligne
Supprimez l'espacement des lignes individuelles selon les besoins.
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
162,50
$
Total
Code
...
<div class="mg-row p-0">
...Appliqué à la ligne 2 (× 3,5 % Intérêt).
Supprimer l'espacement par cellule
Supprimez l'espacement des cellules individuelles selon les besoins. Cela peut causer quelques problèmes d'alignement.
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
162,50
$
Total
Code
...
<div class="mg-cell text-right p-0">3,5</div>
<div class="mg-cell p-0"> %</div>
...Appliqué à 2 cellules de la ligne 2 (3,5 %).
Ajouter un espacement supplémentaire entre les lignes
Ajoutez 10 pixels d'espacement supplémentaire entre les lignes si nécessaire.
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
162,50
$
Total
Code
<div class="wb-math-grid mg-spcd">
...Ligne de bordure forte
Une ligne de bordure plus visible lorsque le calcul est terminé et que le total est fourni.
Ligne de bordure sur une ligne
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
162,50
$
Total
Code
...
<div class="mg-row mg-brdr-tp">
...Utilisez soit la classe mg-brdr-tp soit la classe mg-brdr-bttm.
Ligne de bordure sur des cellules
La ligne de bordure peut être ajoutée à une cellule individuelle.
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
162,50
$
Total
Code
...
<div class="mg-cell mg-brdr-tp">=</div>
<div class="mg-cell text-right mg-brdr-tp">$162.50</div>
...Utilisez soit la classe mg-brdr-tp soit la classe mg-brdr-bttm.
Défilement en cas de débordement horizontal
Enveloppez la grille avec la classe mg-scroll pour faire défiler l'équation horizontalement pour les petits appareils (moins de 768px), similaire à la classe table-responsive pour les tables.
Avec classe de défilement
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année (Texte supplémentaire pour montrer le défilement)
=
162,50
$
Total
Code
<div class="mg-scroll">
<div class="wb-math-grid">
...
<div class="mg-row nowrap">
...
</div>
</div>
</div>Utilisez uniquement lorsque nécessaire. Le plus utile lors de la recréation de modèles à partir d'un formulaire PDF.
Sans classe de défilement
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année (Texte supplémentaire pour montrer le retour à la ligne)
=
162,50
$
Total
Code
<div class="wb-math-grid">
...
<div class="mg-row">
...
</div>
</div>Sans classes math-grid=responsive ou nowrap, le texte revient à la ligne.
Pause pour chaque section
Par défaut, la plupart des dispositifs de lecture d'écran atteindront la ligne d'équation ligne par ligne.
Si l'équation contient beaucoup de contenu, ou a des barrières visuelles (c'est-à-dire des bordures), il peut être utile d'entendre les informations de chaque cellule séparément pour naviguer plus précisément (similaire à un tableau).
Ajoutez l'attribut data-wb-math-grid à l'élément parent (avec la classe wb-math-grid) en utilisant la valeur srPause: true.
Remarque : Cette fonctionnalité n'a pas été vérifiée de manière indépendante en français.
Avec classe de pause
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
162,50
$
Total
Code
<div class="wb-math-grid" data-wb-math-grid='{"srPause": true}'>
...Cela devrait se lire comme :
[cinquante mille dollars] [prix de base] [fois] [trois point cinq] [pour cent] [intérêt] [plus] [deux cents dollars] [frais] [divisé par] [douze] [mois dans l'année] [égale] [cent soixante-deux dollars et cinquante cents] [total]
Testé avec :
- JAWS 2023
- NVDA 2021
Sans classe de pause
Apparence
50 000
Prix de base
×
3,5
%
Intérêt
+
200
Frais
÷
12
Mois de l'année
=
162,50
Total
Code
<div class="wb-math-grid">
...Cela devrait se lire comme :
[cinquante mille dollars prix de base] [fois trois point cinq pour cent intérêt] [plus deux cents dollars frais] [divisé par douze mois dans l'année] [égale cent soixante-deux dollars et cinquante cents total]
Testé avec :
- JAWS 2023
- NVDA 2021
Autres exemples
Utiliser un style de conception personnalisé
Ajoutez des classes de style GCWeb pour améliorer la visibilité ou l'apparence de l'équation.
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
$
Frais
÷
12
Mois de l'année
=
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 h4 text-muted"> $</div>
<div class="mg-cell">Prix de base</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">Intérêt</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 h4 text-muted"> $</div>
<div class="mg-cell">Frais</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">Mois de l'année</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">162,50</div>
<div class="mg-cell h4 text-muted mg-brdr-tp"> $</div>
<div class="mg-cell">Total</div>
</div>
</div>Utiliser la grille et la largeur complète pour aligner les calculs
Utilisez la largeur complète pour égaliser la taille des calculs séparés associés les uns aux autres. Ils peuvent être visuellement alignés indépendamment du contenu.
Alternativement, la largeur de tous les calculs peut être gérée en les plaçant dans un motif de grille.
2022 espace disponible après contribution
Limite de dollars CELI 2022
6 000 $
Contributions 2022
−
2 000 $
Espace de contribution CELI disponible/non utilisé pour les années futures
=
4 000 $
En 2023, Cedric effectue un retrait de 500 $ de son compte. Même s'il effectue ce retrait en 2023, il ne sera pas ajouté à son espace de contribution CELI avant 2024.
Espace de contribution disponible en 2023 lors du retrait
Espace de contribution CELI non utilisé 2022
4 000 $
Limite de dollars CELI 2023
+
6 500 $
Retrait 2023 (n'affecte pas l'espace de contribution de l'année en cours)
500 $
Espace de contribution CELI non utilisé 2023 disponible pour les années futures
=
10 500 $
Espace de contribution disponible en 2024 après retrait
Espace de contribution CELI non utilisé 2023
10 500 $
Retrait 2023 (ajouté comme espace de contribution disponible)
+
500 $
Limite de dollars CELI 2024
+
7 000 $
Espace de contribution CELI au début de 2024
=
18 000 $
Espace de contribution disponible en 2025
Espace de contribution CELI non utilisé 2024
18 000 $
Limite de dollars CELI 2025
+
7 000 $
Espace de contribution CELI au début de 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>
Utiliser pour répliquer des calculs dans des formulaires PDF
Ce modèle est utilisé pour calculer les paiements d'acompte trimestriels pour les sociétés avec des données d'exemple.
Avec classe de défilement
Total de l'impôt fédéral à payer 2024 Note de bas de page(1l) (total des lignes 700, 720, 724, 727 de votre déclaration T2 pour 2024)
240 000 $
2A
Impôt provincial et territorial net à payer 2024 avant crédits remboursables Note de bas de page(2l) (ligne 760 de votre déclaration T2 pour 2024)
0 $
2B
Total de l'impôt à payer 2024 (montant 2A plus montant 2B)
240 000 $
2C
Total estimé des crédits d'impôt remboursables pour 2025 (montant K de la Feuille de travail 1)
0 $
2D
Montant de base des acomptes 2 (montant 2C moins montant 2D)
240 000 $
2E
Quatre paiements trimestriels dus sous option 2 (montant 2E divisé par 4)
60 000 $
2F
Code
<div class="mg-scroll">
<div class="wb-math-grid">
<div class="mg-row nowrap">
<div class="mg-cell">Total de l'impôt fédéral à payer 2024 <a href="#">Note de bas de page(1l)</a> (total des lignes 700, 720, 724, 727 de votre déclaration T2 pour 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">Impôt provincial et territorial net à payer 2024 avant crédits remboursables<a href="#">Note de bas de page(2l)</a> (ligne 760 de votre déclaration T2 pour 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 de l'impôt à payer 2024 (montant 2A <strong>plus</strong> montant 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 estimé des crédits d'impôt remboursables pour 2025 (montant K de la Feuille de travail 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">Montant de base des acomptes 2 (montant 2C <strong>moins</strong> montant 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">Quatre paiements trimestriels dus sous option 2 (montant 2E <strong>divisé par</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>Sans classe de défilement
Total de l'impôt fédéral à payer 2024 Note de bas de page(1l) (total des lignes 700, 720, 724, 727 de votre déclaration T2 pour 2024)
240 000 $
2A
Impôt provincial et territorial net à payer 2024 avant crédits remboursables Note de bas de page(2l) (ligne 760 de votre déclaration T2 pour 2024)
0 $
2B
Total de l'impôt à payer 2024 (montant 2A plus montant 2B)
240 000 $
2C
Total estimé des crédits d'impôt remboursables pour 2025 (montant K de la Feuille de travail 1)
0 $
2D
Montant de base des acomptes 2 (montant 2C moins montant 2D)
240 000 $
2E
Quatre paiements trimestriels dus sous option 2 (montant 2E divisé par 4)
60 000 $
2F
Code
<div class="wb-math-grid">
<div class="mg-row">
<div class="mg-cell">Total de l'impôt fédéral à payer 2024 <a href="#">Note de bas de page(1l)</a> (total des lignes 700, 720, 724, 727 de votre déclaration T2 pour 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">Impôt provincial et territorial net à payer 2024 avant crédits remboursables <a href="#">Note de bas de page(2l)</a> (ligne 760 de votre déclaration T2 pour 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 de l'impôt à payer 2024 (montant 2A <strong>plus</strong> montant 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 estimé des crédits d'impôt remboursables pour 2025 (montant K de la Feuille de travail 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">Montant de base des acomptes 2 (montant 2C <strong>moins</strong> montant 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">Quatre paiements trimestriels dus sous option 2 (montant 2E <strong>divisé par</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>Utiliser pour répliquer des calculs dans des déclarations PDF
Ce modèle provient des premières lignes d'une déclaration T1 avec des données d'exemple.
Indice : ajoutez du texte supplémentaire invisible pour aider ceux qui utilisent des lecteurs d'écran à mieux comprendre le contenu de chaque cellule.
Revenu d'emploi (case 14 de tous les feuillets T4)
numéro de ligne : 10100
50 000 : dollars
00 : cents
ligne de calcul de retour : 1
Revenu exonéré d'impôt pour les bénévoles des services d'urgence
numéro de ligne : 10105
456 : dollars
78 : cents
Commissions incluses sur la ligne 10100 (case 42 de tous les feuillets T4)
numéro de ligne : 10120
56 : dollars
10 : cents
Contributions de remplacement de perte de salaire
numéro de ligne : 10130
0 : dollars
00 : cents
Autre revenu d'emploi
numéro de ligne : 10400
+
1 005 : dollars
23 : cents
ligne de calcul de retour : 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">Revenu d'emploi (case 14 de tous les feuillets T4)</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">numéro de ligne : </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">ligne de calcul de retour : </span>1</div>
</div>
<div class="mg-row nowrap">
<div class="mg-cell bg-light mg-brdr-bttm">Revenu exonéré d'impôt pour les bénévoles des services d'urgence</div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm mg-brdr-rght"><span class="wb-inv">numéro de ligne : </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 incluses sur la ligne 10100 (case 42 de tous les feuillets T4)</div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm mg-brdr-rght"><span class="wb-inv">numéro de ligne : </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">Contributions de remplacement de perte de salaire</div>
<div class="mg-cell mg-brdr-lft mg-brdr-bttm mg-brdr-rght"><span class="wb-inv">numéro de ligne : </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">Autre revenu d'emploi</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">numéro de ligne : </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">ligne de calcul de retour : </span>2</div>
</div>
</div>
</div>Erreur lors d'un nombre inégal de cellules
S'il n'y a pas un nombre égal de cellules (mg-cells) pour chaque ligne (mg-row), une erreur sera produite dans le journal de la console et l'équation sera mise en surbrillance (bg-danger).
Apparence
50 000
$
Prix de base
×
3,5
%
Intérêt
+
200
Frais
÷
12
Mois de l'année
=
162,50
$
Total
Message du journal de la console
En anglais seulement.
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: 4Détails de la page
- Date de modification :