Skip to content

Commit 231966e

Browse files
wet-boew-botwet-boew-bot
committed
CD 16174427597: Update GCWeb compiled demos files
1 parent ee742c0 commit 231966e

File tree

8 files changed

+2504
-3
lines changed

8 files changed

+2504
-3
lines changed

‎_data/méli-mélo.json

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"nom": "2025-04-nahanni",
66
"libs": [
77
"2024-10-datatable-utilities",
8-
"2024-02-charts",
8+
"2024-02-charts",
99
"2024-04-stepsquiz",
1010
"2021-05-conjunction",
1111
"2021-05-steps",
@@ -15,9 +15,10 @@
1515
{
1616
"nom": "2025-12-mille-iles",
1717
"libs": [
18+
"2025-06-math-grid",
1819
"2024-10-datatable-utilities",
19-
"2021-05-conjunction",
20-
"2021-05-steps",
20+
"2021-05-conjunction",
21+
"2021-05-steps",
2122
"deprecated"
2223
]
2324
},
@@ -33,6 +34,10 @@
3334
}
3435
],
3536
"subProjects": [
37+
{
38+
"nom": "2025-06-math-grid",
39+
"mainpage": "index.html"
40+
},
3641
{
3742
"nom": "@sample",
3843
"mainpage": "index-fr.html",

‎méli-mélo-demos/2025-12-mille-iles/2025-06-math-grid/index-fr.html

Lines changed: 917 additions & 0 deletions
Large diffs are not rendered by default.

‎méli-mélo-demos/2025-12-mille-iles/2025-06-math-grid/index.html

Lines changed: 934 additions & 0 deletions
Large diffs are not rendered by default.

‎méli-mélo-demos/2025-12-mille-iles/2025-06-math-grid/math-grid-doc-fr.html

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
---
2+
title: Grille d'équations mathématiques - documentation
3+
dateModified: 2025-06-05T00:00:00.000Z
4+
description: Créer un moyen de disposer des équations mathématiques ou des calculs simples.
5+
lang: fr
6+
altLangPage: math-grid-doc.html
7+
css: >-
8+
https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-12-mille-iles.css
9+
script: >-
10+
https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-12-mille-iles.js
11+
---
12+
<div class="wb-prettify all-pre"></div>
13+
<section>
14+
<h2>Objectif</h2>
15+
<p>Créer un moyen de disposer des équations mathématiques ou des calculs simples.</p>
16+
</section>
17+
<section>
18+
<h2>Utilisation</h2>
19+
<h3 class="mrgn-tp-0 text-success"><span class="glyphicon glyphicon-ok-circle mrgn-rght-sm"></span>Utiliser pour</h3>
20+
<ul>
21+
<li>Aligner les équations mathématiques ou les motifs de calcul</li>
22+
<li>Répliquer les mises en page de calcul à partir d'un document (par exemple, PDF) en HTML</li>
23+
</ul>
24+
<h3 class="mrgn-tp-0 text-danger"><span class="glyphicon glyphicon-remove-circle mrgn-rght-sm"></span>Ne pas utiliser pour</h3>
25+
<ul>
26+
<li>Créer une mise en page pour du contenu général
27+
<ul>
28+
<li>Référez-vous à : <a href="https://wet-boew.github.io/wet-boew-styleguide/design/grids-fr.html">Grilles - WET4</a></li>
29+
<li>Utilisez le système de grille lorsque vous devez créer des largeurs de colonne spécifiques</li>
30+
</ul>
31+
</li>
32+
<li>À la place d'un tableau lorsque le contenu doit être dans ce format
33+
<ul>
34+
<li>Référez-vous à : <a href="https://wet-boew.github.io/wet-boew-styleguide/design/tables-fr.html">Tableaux - WET4</a></li>
35+
</ul>
36+
</li>
37+
<li>Styliser des équations mathématiques complexes
38+
<ul>
39+
<li>Référez-vous à : <a href="https://wet-boew.github.io/v4.0-ci/docs/ref/mathml/mathml-fr.html">Correctif MathML - WET4</a></li>
40+
</ul>
41+
</li>
42+
</ul>
43+
</section>
44+
<section>
45+
<h2>Exemples de travail</h2>
46+
<ul>
47+
<li><a href="index.html">Exemple en anglais</a></li>
48+
<li><a href="index-fr.html">Exemple en français</a></li>
49+
</ul>
50+
</section>
51+
<section>
52+
<h2>Évaluation et rapport</h2>
53+
<p>Pas encore évalué</p>
54+
<h2>Directives d'accessibilité</h2>
55+
<p>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.</p>
56+
<p>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.</p>
57+
<div class="table-responsive">
58+
<table class="table">
59+
<caption>
60+
Entités mathématiques HTML
61+
</caption>
62+
<thead>
63+
<tr>
64+
<th scope="col">Caractère</th>
65+
<th scope="col">Description</th>
66+
<th scope="col">Entité HTML</th>
67+
<th scope="col">Code HTML</th>
68+
</tr>
69+
</thead>
70+
<tbody>
71+
<tr>
72+
<td>&plus;</td>
73+
<td>Signe plus</td>
74+
<td>&amp;plus; ou +</td>
75+
<td>&amp;#43;</td>
76+
</tr>
77+
<tr>
78+
<td>&minus;</td>
79+
<td>Signe moins</td>
80+
<td>&amp;minus;</td>
81+
<td>&amp;#8722;</td>
82+
</tr>
83+
<tr>
84+
<td>&times;</td>
85+
<td>Signe de multiplication</td>
86+
<td>&amp;times;</td>
87+
<td>&amp;#215;</td>
88+
</tr>
89+
<tr>
90+
<td>&divide;</td>
91+
<td>Signe de division</td>
92+
<td>&amp;divide;</td>
93+
<td>&amp;#247;</td>
94+
</tr>
95+
<tr>
96+
<td>&equals;</td>
97+
<td>Signe égal</td>
98+
<td>&amp;equals; ou = </td>
99+
<td>&amp;#61;</td>
100+
</tr>
101+
<tr>
102+
<td>&percnt;</td>
103+
<td>Signe pourcentage</td>
104+
<td>&amp;percnt; ou %</td>
105+
<td>&amp;#37;</td>
106+
</tr>
107+
</tbody>
108+
</table>
109+
</div>
110+
</section>
111+
<section>
112+
<h2>Comment mettre en œuvre</h2>
113+
<ol class="lst-stps ld-zr">
114+
<li>Créer un élément parent<br>
115+
<pre><code>&lt;div class=&quot;wb-math-grid&quot;&gt;</code></pre>
116+
</li>
117+
<li>Créer une ligne pour chaque élément de ligne et calcul<br>
118+
<pre><code>&lt;div class=&quot;mg-row&quot;&gt;</code></pre>
119+
</li>
120+
<li>Créer le même nombre de cellules nécessaires pour afficher chaque élément de ligne complètement
121+
<h3>Utilisation de <code>&lt;div&gt;</code> sur la cellule</h3>
122+
<pre><code>&lt;div class=&quot;wb-math-grid&quot;&gt;<br> &lt;div class=&quot;mg-row&quot;&gt;<br> &lt;div class=&quot;mg-cell&quot;&gt;&lt;/div&gt;<br> ...<br> &lt;/div&gt;<br>&lt;/div&gt;</code></pre>
123+
Utilisez des éléments &lt;div&gt;, car les éléments en ligne peuvent causer des problèmes inattendus</li>
124+
<li>Répéter pour le nombre de lignes nécessaires pour l'équation<br>
125+
Utilisez un <strong>nombre égal de cellules pour toutes les lignes</strong> 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.</li>
126+
</ol>
127+
</section>
128+
<section>
129+
<h2>Options de configuration</h2>
130+
<h3>Options de classe</h3>
131+
<div class="table-responsive">
132+
<table class="table">
133+
<caption>
134+
Classes personnalisées pour la grille mathématique
135+
</caption>
136+
<thead>
137+
<tr>
138+
<th scope="col">Classe</th>
139+
<th scope="col">Description</th>
140+
<th scope="col">Comment configurer</th>
141+
</tr>
142+
</thead>
143+
<tbody>
144+
<tr>
145+
<td><code class="nowrap">mg-spcd</code></td>
146+
<td>Ajoute 10px (5px en haut/5px en bas) d'espacement à toutes ou à des lignes spécifiques</td>
147+
<td><ul class="list-unstyled">
148+
<li>Toutes les lignes :
149+
<pre>&lt;div class=&quot;wb-math-grid mg-spcd&quot;&gt;</pre>
150+
</li>
151+
<li>Lignes spécifiques :
152+
<pre>&lt;div class=&quot;mg-row mg-spcd&quot;&gt;</pre>
153+
</li>
154+
</ul></td>
155+
</tr>
156+
<tr>
157+
<td><code class="nowrap">mg-brdr-otln</code></td>
158+
<td>Ajoute une ligne de bordure plus forte autour de la cellule entière</td>
159+
<td><pre>&lt;div class=&quot;mg-cell mg-brdr-otln&quot;&gt;</pre></td>
160+
</tr>
161+
<tr>
162+
<td><code class="nowrap">mg-brdr-tp</code></td>
163+
<td>Ajoute une ligne de bordure plus forte le long du haut d'une ligne ou d'une cellule spécifique</td>
164+
<td><ul class="list-unstyled">
165+
<li>Lignes spécifiques :
166+
<pre>&lt;div class=&quot;mg-row mg-brdr-tp&quot;&gt;</pre>
167+
</li>
168+
<li>Cellules spécifiques :
169+
<pre>&lt;div class=&quot;mg-cell mg-brdr-tp&quot;&gt;</pre>
170+
</li>
171+
</ul></td>
172+
</tr>
173+
<tr>
174+
<td><code class="nowrap">mg-brdr-bttm</code></td>
175+
<td>Ajoute une ligne de bordure plus forte le long du bas d'une ligne ou d'une cellule spécifique</td>
176+
<td><ul class="list-unstyled">
177+
<li>Lignes spécifiques :
178+
<pre>&lt;div class=&quot;mg-row mg-brdr-bttm&quot;&gt;</pre>
179+
</li>
180+
<li>Cellules spécifiques :
181+
<pre>&lt;div class=&quot;mg-cell mg-brdr-bttm&quot;&gt;</pre>
182+
</li>
183+
</ul></td>
184+
</tr>
185+
<tr>
186+
<td><code class="nowrap">mg-brdr-lft</code></td>
187+
<td>Ajoute une ligne de bordure plus forte sur le côté gauche d'une cellule spécifique</td>
188+
<td><pre>&lt;div class=&quot;mg-cell mg-brdr-lft&quot;&gt;</pre></td>
189+
</tr>
190+
<tr>
191+
<td><code class="nowrap">mg-brdr-rght</code></td>
192+
<td>Ajoute une ligne de bordure plus forte sur le côté droit d'une cellule spécifique</td>
193+
<td><pre>&lt;div class=&quot;mg-cell mg-brdr-rght&quot;&gt;</pre></td>
194+
</tr>
195+
<tr>
196+
<td><code class="nowrap">mg-scroll</code></td>
197+
<td>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)</td>
198+
<td><pre>&lt;div class=&quot;mg-scroll&quot;&gt;<br> &lt;div class=&quot;wb-math-grid&quot;&gt;</pre></td>
199+
</tr>
200+
</tbody>
201+
</table>
202+
</div>
203+
<p>Vous pouvez également utiliser de nombreux styles GCWeb existants pour ce composant.</p>
204+
<h3>Options d'attribut</h3>
205+
<table class="table">
206+
<caption>
207+
Options personnalisées pour la grille mathématique
208+
</caption>
209+
<thead>
210+
<tr>
211+
<th scope="col">Option</th>
212+
<th scope="col">Description</th>
213+
<th scope="col">Comment configurer</th>
214+
<th scope="col">Valeurs</th>
215+
</tr>
216+
</thead>
217+
<tbody>
218+
<tr>
219+
<td><code class="nowrap">srPause</code></td>
220+
<td>Exigera des lecteurs d'écran de naviguer dans l'équation plus précisément.</td>
221+
<td><code>data-wb-math-grid='{"pause": true}'</code></td>
222+
<td><dl>
223+
<dt>Aucun/<code>false</code> (par défaut) :</dt>
224+
<dd>Lira l'équation ligne par ligne</dd>
225+
<dt><code>true</code></dt>
226+
<dd>Lira chaque "cellule" séparément.</dd>
227+
</dl></td>
228+
</tr>
229+
</tbody>
230+
</table>
231+
</section>
232+
<section>
233+
<h2>Code source</h2>
234+
<p><a href="https://github.com/wet-boew/GCWeb/tree/master/m%C3%A9li-m%C3%A9lo/2025-06-math-grid">Code source du plugin de grille mathématique sur GitHub</a> </p>
235+
</section>

0 commit comments

Comments
 (0)