Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Grille d'équations mathématiques - documentation

Objectif

Créer un moyen de disposer des équations mathématiques ou des calculs simples.

Utilisation

Utiliser pour

Ne pas utiliser pour

Exemples de travail

Évaluation et rapport

Pas encore évalué

Directives d'accessibilité

Utilisez des noms ou des codes d'entité HTML pour les symboles mathématiques afin d'afficher sans CSS ou support d'accessibilité supplémentaire.

Stylisez les symboles HTML au lieu d'utiliser des icônes, sauf si vous avez une solution de secours au cas où la feuille de style des icônes ne se charge pas. Les icônes ont également besoin d'un texte invisible pour les dispositifs de lecteur d'écran.

Entités mathématiques HTML
Caractère Description Entité HTML Code HTML
+ Signe plus + ou + +
− Signe moins − −
× Signe de multiplication × ×
÷ Signe de division ÷ ÷
= Signe égal = ou = =
% Signe pourcentage % ou % %

Comment mettre en œuvre

  1. Créer un élément parent
    <div class="wb-math-grid">
  2. Créer une ligne pour chaque élément de ligne et calcul
    <div class="mg-row">
  3. Créer le même nombre de cellules nécessaires pour afficher chaque élément de ligne complètement

    Utilisation de <div> sur la cellule

    <div class="wb-math-grid">
    		<div class="mg-row">
    			<div class="mg-cell"></div>
    			...
    		</div>
    </div>
    Utilisez des éléments <div>, car les éléments en ligne peuvent causer des problèmes inattendus
  4. Répéter pour le nombre de lignes nécessaires pour l'équation
    Utilisez un nombre égal de cellules pour toutes les lignes de l'équation, même lorsqu'il n'y a pas de contenu. Si la cellule alignée n'a pas d'information, laissez-la vide.

Options de configuration

Options de classe

Classes personnalisées pour la grille mathématique
Classe Description Comment configurer
mg-spcd Ajoute 10px (5px en haut/5px en bas) d'espacement à toutes ou à des lignes spécifiques
  • Toutes les lignes : 
    <div class="wb-math-grid mg-spcd">
  • Lignes spécifiques : 
    <div class="mg-row mg-spcd">
mg-brdr-otln Ajoute une ligne de bordure plus forte autour de la cellule entière 
<div class="mg-cell mg-brdr-otln">
mg-brdr-tp Ajoute une ligne de bordure plus forte le long du haut d'une ligne ou d'une cellule spécifique
  • Lignes spécifiques : 
    <div class="mg-row mg-brdr-tp">
  • Cellules spécifiques : 
    <div class="mg-cell mg-brdr-tp">
mg-brdr-bttm Ajoute une ligne de bordure plus forte le long du bas d'une ligne ou d'une cellule spécifique
  • Lignes spécifiques : 
    <div class="mg-row mg-brdr-bttm">
  • Cellules spécifiques : 
    <div class="mg-cell mg-brdr-bttm">
mg-brdr-lft Ajoute une ligne de bordure plus forte sur le côté gauche d'une cellule spécifique 
<div class="mg-cell mg-brdr-lft">
mg-brdr-rght Ajoute une ligne de bordure plus forte sur le côté droit d'une cellule spécifique 
<div class="mg-cell mg-brdr-rght">
mg-scroll Ajoute un défilement aux équations dont les lignes sont définies sans retour à la ligne (pour préserver l'héritage du design original) 
<div class="mg-scroll">
  <div class="wb-math-grid">

Vous pouvez également utiliser de nombreux styles GCWeb existants pour ce composant.

Options d'attribut

Options personnalisées pour la grille mathématique
Option Description Comment configurer Valeurs
srPause Exigera des lecteurs d'écran de naviguer dans l'équation plus précisément. data-wb-math-grid='{"pause": true}'
Aucun/false (par défaut) :
Lira l'équation ligne par ligne
true
Lira chaque "cellule" séparément.

Code source

Code source du plugin de grille mathématique sur GitHub

Détails de la page

Date de modification :