-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
253 lines (227 loc) · 10.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Agrandissement des caractères- Démonstration - Guide de l'intégrateur - RGAA 3.0</title>
<link rel="stylesheet" href="../css/demo.css" media="screen">
<link rel="stylesheet" href="../css/ac.css" media="screen">
<script src="../../js/highlight.pack.js"></script>
<link rel="stylesheet" href="../../css/tomorrow-night-eighties.css" media="screen">
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<header role="banner" class="main-header" id="header">
<div class="inside">
<h1>Guide de l'intégrateur</h1>
<p><a href="../../11-agrandissement-des-caracteres.md">Revenir à la fiche pratique « Agrandissement des caractères »</a></p>
</div>
</header>
<div id="wrapper">
<nav role="navigation" class="nav-demo" id="nav">
<h2>Listes des démonstrations</h2>
<ul>
<li class="level"><span>Navigation</span>
<ul>
<li><a href="../2-navigation/access-rapide.html">Liens d'accès rapide</a></li>
<li><a href="../2-navigation/collection.html">Collection de pages</a></li>
<li><a href="../2-navigation/page-active.html">Indication de la page active</a></li>
</ul>
</li>
<li><a href="../5-liens/index.html">Liens</a></li>
<li class="level"><span>Formulaires</span>
<ul>
<li><a href="../6-formulaires/etiquettes.html">Étiquettes de champs</a></li>
<li><a href="../6-formulaires/aides-controles-saisie.html">Aides à la saisie</a></li>
<li><a href="../6-formulaires/regroupement.html">Regroupement de champs</a></li>
</ul>
</li>
<li><a href="../7-focus/index.html">Focus</a></li>
<li><a href="../9-images/index.html">Images</a></li>
<li><a href="../11-agrandissement-des-caracteres/index.html">Agrandissement des caractères</a></li>
</ul>
</nav>
<main role="main" id="main">
<section>
<h2 class="fiche-title">Agrandissement des caractères - Démonstrations</h2>
<div class="tabs">
<ul class="tabs__list">
<li><button>Unités relatives vs Unités Fixes</button></li>
<li><button>Hauteurs fixées en pixel</button></li>
<li><button>Gérer les débordements</button></li>
<li><button>Les retours automatiques</button></li>
<li><button>Responsive et agrandissements des caractères</button></li>
</ul>
<article class="tabs__tab-content article" id="ac-article1">
<h3>Unités relatives VS unités fixes</h3>
<div class="row">
<div class="col-1-2">
<h4 class="right">Conforme : taille de police en unités relatives</h4>
<p class="ac-text-em">Ce paragraphe possède une taille de police définie en em (unité relative). Ce texte s'agrandira dans tous les navigateurs.</p>
<pre><code class="code css">p{
font-size:1em;
}</code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Non conforme : taille de police en unités fixes</h4>
<p class="ac-text-pixel">Ce paragraphe possède une taille de police définie en pixel (unité fixe). Dans Internet Explorer, ce texte ne s'agrandit pas.</p>
<pre><code class="code css">p{
font-size:16px;
}</code></pre>
</div>
</div>
<div class="row">
<div class="col-1-2">
<h4 class="right">Équivalence des tailles de polices en em</h4>
<p class="ac-em1">
Le texte contenu dans cette boîte possède une taille de police calculée 16px. Il est l'élément parent des deux blocs suivants.
<span class="ac-em2">Ce texte imbriqué possède une taille de police équivalente à 24px.</span>
<span class="ac-em3">Ce texte imbriqué possède une taille de police équivalente à 18px.</span></p>
<pre><code class="code css">body{
font-size:100%; /** 100% = 1em = 16px **/
}
.em1{
font-size:1em; /** 16px / 16 = 1 **/
}
.em2{
font-size:1.5em; /** 24px / 16 = 1.5 **/
}
.em3{
font-size:1.125em; /** 18px / 16 = 1.125 **/
}</code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Tailles de polices en px</h4>
<p class="ac-pixel1">
Le texte contenu dans cette boîte possède une taille de police de 16px. Il est l'élément parent des deux blocs suivants.
<span class="ac-pixel2">Ce texte imbriqué possède une taille de police de 24px.</span>
<span class="ac-pixel3">Ce texte imbriqué possède une taille de police de 18px.</span></p>
<pre><code class="code css">body{
font-size:100%;
}
.pixel1{
font-size:16px;
}
.pixel2{
font-size:24px;
}
.pixel3{
font-size:18px;
}</code></pre>
</div>
</div>
</article>
<article class="tabs__tab-content article" id="ac-article2">
<h3>Lisibilité du texte à 200% : problème des hauteurs fixées en pixel</h3>
<p>Agrandissez la taille des caractères (<kbd>Ctrl +</kbd> 6 fois) et constatez l'agrandissement ou la disparition du texte.</p>
</ol>
<div class="row">
<div class="col-1-2">
<h4 class="right">Adaptatif : hauteur minimale en pixel</h4>
<p class="ac-non-fixed-sized">Cette boîte possède une hauteur minimale. Lorsque la taille de la police augmente, la hauteur de la boîte s'adapte au contenu qui reste lisible.</p>
<pre><code class="code css">p{
min-height:150px;
}</code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Problématique : hauteur fixée en pixel</h4>
<p class="ac-fixed-sized">Cette boîte possède une hauteur fixée. Lorsque la taille de la police augmente, le texte déborde, chevauche le contenu qui le suit et devient illisible.</p>
<pre><code class="code css">p{
height:150px;
}</code></pre>
</div>
</div>
</article>
<article class="tabs__tab-content article" id="ac-article3">
<h3>Gérer les débordements</h3>
<p>Agrandissez la taille des caractères (<kbd>Ctrl +</kbd> 6 fois) et constatez l'agrandissement ou la disparition du texte.</p>
<div class="row">
<div class="col-1-2">
<h4 class="right">Adaptatif : <code lang="en">overflow:auto</code></h4>
<p class="ac-overflow-auto">Cette boîte possède la propriété <code>overflow</code> dont la valeur est <code>auto</code>.</p>
<pre><code class="code css">p{
height:80px;
overflow:auto;
}</code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Problématique : <code lang="en">overflow:hidden</code></h4>
<p class="ac-overflow-hidden">Cette boîte possède la propriété <code>overflow</code> dont la valeur est <code>hidden</code>.</p>
<pre><code class="code css">p{
height:80px;
overflow:hidden;
}</code></pre>
</div>
</div>
</article>
<article class="tabs__tab-content article" id="ac-article4">
<h3>Les retours automatiques</h3>
<p>Agrandissez la taille des caractères (<kbd>Ctrl +</kbd> 6 fois) et constatez l'agrandissement ou la disparition du texte.</p>
<div class="row">
<div class="col-1-2">
<h4 class="right">Adaptatif : Laisser le texte revenir à la ligne</h4>
<p class="ac-no-nowrap">Ce texte sera redistribué normalement à l'agrandissement des caractères.</p>
<pre><code class="code css">p{
white-space:initial;/** valeur par défaut **/
}</code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Problématique : Empêcher le retour à la ligne</h4>
<p class="ac-nowrap">Ce texte va déborder à l'agrandissement des caractères.</p>
<pre><code class="code css">p{
white-space:nowrap;
}</code></pre>
</div>
</div>
</article>
<article class="tabs__tab-content article" id="ac-article5">
<h3><span lang="en">Responsive</span> et agrandissements des caractères</h3>
<ol>
<li>Réduisez la taille de la fenêtre pour voir chacun des groupes de deux colonnes se repositionner.</li>
<li>Revenez à une largeur suffisante.</li>
<li>Agrandissez la taille des caractères (<kbd>Ctrl +</kbd> 6 fois) et constatez les repositionnements.</p>
<div class="row">
<div class="col-1-2">
<h4 class="right">Adaptatif : <code lang="en">media-queries</code> en em</h4>
<p class="ac-mq-em"><span class="ac-mq-em-1">Ces 2 colonnes vont se repositionner lorsque</span><span class="ac-mq-em-2">la taille de l'écran sera de 767px ou moins et de 47.9375em ou moins</span></p>
<pre><code class="code css">.colonne{
display:inline-block;
width:49%;
background:#f2f2f2;
}
@media-screen and (max-width:47.9375em){
.colonne{
display:block;
width:100%;
}
}</code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Problématique : <code lang="en">media-queries</code> en pixels</h4>
<p class="ac-mq-px"><span class="ac-mq-px-1">Ces 2 colonnes vont se repositionner lorsque</span><span class="ac-mq-px-2">la taille de l'écran sera de 767px</span></p>
<pre><code class="code css">.colonne{
display:inline-block;
width:49%;
background:#f2f2f2;
}
@media-screen and (max-width:767px){
.colonne{
display:block;
width:100%;
}
}</code></pre>
</div>
</div>
</article>
</div>
</section>
</main>
<footer id="footer" role="contentinfo" class="clear">
<h2>Licence d'utilisation</h2>
<p class="logo-smgap"><a href="http://references.modernisation.gouv.fr/"><img src="../img/modernisation-logo.jpg" alt="Secrétariat général pour le modernisation de l'action publique"></a></p>
<p>Ce document est la propriété du Secrétariat général à la modernisation de l'action publique français (SGMAP). Il est placé sous la <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence">licence ouverte 1.0 ou ultérieure</a>, équivalente à une licence <i lang="en">Creative Commons BY</i>. Pour indiquer la paternité, ajouter un lien vers la version originale du document disponible sur le <a href="https://github.com/DISIC">compte <span lang="en">GitHub</span> de la DInSIC</a>.</p>
</footer>
</div>
<script src="../js/scripts.js"></script>
<script>Tabs.init();</script>
</body>
</html>