forked from nathanford/ragadjust
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
160 lines (130 loc) · 9.25 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="author" content="Nathan" />
<meta name="description" content="Rag Adjust demo" />
<title>ragadjust demo</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
padding: 5% 10% 10%;
font-family: 'Droid Sans', 'Lucida Sans', sans-serif;
font-size: 18px;
line-height: 1.6;
}
h1 {
font-size: 3em;
font-size: 4vw;
margin: 0;
}
h2 {
font-size: 1.8em;
margin: 2em 0 1em;
}
h3 {
font-size: 1em;
margin: 1em 0 0;
}
h4 {
margin: 0 0 2em;
font-weight: 400;
font-style: italic;
}
p, li, h3 {
max-width: 32em;
}
p {
margin: 0;
}
p + p {
text-indent: 1em;
}
li {
margin-bottom: 1ex;
}
blockquote {
margin: 1em;
font-style: italic;
}
@media only screen and (max-width: 840px) {
h1 {
font-size: 2em !important;
}
}
@media only screen and (min-width: 1500px) {
h1 {
font-size: 3em !important;
}
}
@media only print {
@page {
margin: 20mm 25mm;
/* marks: crop; */
@bottom-center {
content: counter(page);
}
}
}
</style>
<!-- add raggity script in the head -->
<link href="./assets/css/interface.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script src="./assets/js/ragadjust.js" type="text/javascript"></script>
<script src="./assets/js/ragadjust-hook.js" type="text/javascript"></script>
</head>
<body id="index">
</head>
<body>
<article>
<h1 id="utiliser-ragged-ajust-fr">Utiliser Ragged Ajust Fr</h1>
<h4 id="par-mark-boulton">par Mark Boulton</h4>
<p>Vous vous intéressez à la typographie, non ? Vous vous intéressez aux mots et à leur apparence, à leur lecture et à leur compréhension. Si vous <a href="#">ramassez un livre ou un magazine</a>, vous remarquez le moment où quelque chose n’est pas à sa place ; une orpheline, des lézardes dans des paragraphes de prose justifiés, ou des majuscules qui se font passer pour des petites majuscules. Alors, pourquoi, je vous le demande, votre position est-elle différente sur le web ?</p>
<p>On nous répète sans cesse qu’en tant que créateur de sites web, nous devons nous habituer à son manque de contrôle. Sur le web, c’est une fonctionnalité, pas un bug. Mais cela ne signifie pas que nous devons abaisser nos standards ou que nous ne devons pas nous efforcer d’atteindre le même niveau d’art typographique que chez nos cousins de l'imprimé. Nous ne devrions pas laisser une bonne composition à la porte parce que nous ne pouvons pas contrôler la longueur des lignes.</p>
<p>Lorsque je composais des livres, je passais des heures à manipuler les drapeaux pour créer un flux agréable de ligne en ligne. Maximiser l’espace disponible, mais en veillant à ce qu’il n’y ait pas de coupures de lignes ou de mots orphelins qui perturbent le flux de la lecture. La mise en place d’un bon drapeau repose sur un ensemble de directives - ou, dans le cas de la façon dont qu'on m'a enseigné, on appelait cela des violations !</p>
<h3 id="violation-1">Violation 1. Ne jamais rompre une ligne immédiatement après une préposition</h3>
<p>Les prépositions sont des mots importants et fréquemment utilisés en français. Elles relient les noms, les pronoms et les autres mots dans une phrase. Et les liens ne doivent pas être rompus si vous pouvez l’éviter. Terminer une ligne sur une préposition rompt le lien d’un mot à l’autre et oblige le lecteur à faire plus d’efforts pour relier deux mots sur deux lignes. plus difficile de joindre deux mots sur deux lignes.</p>
<p>
</p>
<p>Par exemple :</p>
<blockquote>
<p>“Le récipient est pour le beurre”</p>
</blockquote>
<p>La préposition ici est <em>pour</em> et montre la relation entre le beurre et le récipient. beurre et le récipient. Si cela était tapé sur une ligne et que le saut de ligne ligne et que le saut de ligne se trouvait après le mot <em>pour</em>, le lecteur devrait alors à la ligne suivante. La phrase ne serait pas fluide.</p>
<p>Il existe de nombreuses prépositions en anglais - environ 150 - mais seulement 70 environ sont utilisées. environ en usage.</p>
<h3 id="violation-2">Violation 2. Ne jamais rompre une ligne immédiatement après un tiret</h3>
<p>Un tiret – qu’il s’agisse d’un Em-dash ou d’un En-dash – peut être utilisé comme une pause dans la lecture, ou comme utilisé ici, un point auquel vous introduisez quelque chose qui n’est pas dans le flux de la phrase. Comme un aparté. Terminer par une pause à la fin de la ligne aurait le même effet que de terminer par une préposition. Cela perturbe le flux de la lecture.</p>
<h3 id="violation-3">Violation 3. Pas de petits mots à la fin d’une ligne</h3>
<p>Ne terminez pas une ligne par des petits mots. La plupart d’entre eux seront en fait couverts par la règle 1. Mais il y aura des exceptions. Ma règle générale ici est de ne pas laisser de mots de deux ou trois lettres à la fin d’une ligne.</p>
<h3 id="violation-4">Violation 4. Traits d’union</h3>
<p>Dans les documents imprimés, les traits d’union sont utilisés à la fin des lignes pour joindre les mots ensemble au-dessus d’un saut de ligne. Il est surtout utilisé dans le corps du texte justifié, et vous aurez sans doute l’habitude de le voir. Vous avez sans doute l’habitude de le voir dans les journaux ou les romans. Une bonne règle est de ne pas autoriser plus de deux traits d’union consécutifs en fin de ligne.</p>
<p>Sur le Web, bien sûr, nous pouvons utiliser l’attribut CSS “trait d’union”. Il est raisonnablement pris en charge, à l’exception de Chrome. Bien entendu, il fonctionne mieux lorsqu’il est combiné à un texte justifié pour conserver la marge de droite.</p>
<h3 id="violation-5">Violation 5. Ne pas rompre les mots accentués s’ils sont au nombre de trois ou moins</h3>
<p>Si vous avez quelques mots accentués, par exemple :</p>
<blockquote>
<p>“Ce gâteau était <strong>absolument délicieux</strong> !”.</p>
</blockquote>
<p>Essayez de ne pas faire de coupure de mots entre eux. Il est important que le lecteur lise les trois mots en tant que groupe.</p>
<h2 id="comment-faire">Comment faire tout cela sur le Web ?</h2>
<p>Toutes ces directives sont relativement faciles à mettre en œuvre sur papier. Mais qu’en est-il du Web ? Lorsque le contenu est versé dans un modèle à partir d’un CMS ? Eh bien, il y a des choses que nous pouvons faire. Voici votre nouvel ami, l’espace insécable, ou, comme vous le savez peut-être : &nbsp;.</p>
<p>Les directives ci-dessus sont toutes basées sur une seule décision pour le compositeur ; “Quand dois-je rompre la ligne ?” Nous pouvons simplement parcourir un corps de texte et ajouter le nbsp; en nous basant sur ces séries de questions :</p>
<ol type="1">
<li>Y a-t-il des prépositions dans le texte ? Si oui, ajoutez un &nbsp; après elles.</li>
<li>Y a-t-il des tirets ? Si oui, ajoutez un &nbsp; après eux.</li>
<li>Y a-t-il des mots de moins de trois caractères auxquels vous n’avez pas ajouté d’espaces ? Si oui, ajoutez un &nbsp; après eux.</li>
<li>Y a-t-il des groupes de mots accentués de deux ou trois mots ? Si oui, ajoutez un espace entre eux.</li>
</ol>
<p>Pour un texte court, ce n’est pas un problème. Mais pour les textes plus longs, c’est un peu difficile. De plus, comme je l’ai dit, de nombreux sites Web utilisent un système de gestion de contenu et placent simplement le texte dans un modèle. Que faire alors ? Nous ne pouvons pas attendre de nos créateurs de contenu qu’ils manient manuellement un drapeau en se basant sur ces directives. Dans ce cas, nous avons vraiment besoin que ce soit automatique.</p>
<p>Il n’y a aucune raison pour que, sur le web, nous ne puissions pas simplement passer la question la question “quand dois-je rompre la ligne ?” directement au navigateur par le biais d’un qui compare le texte à un ensemble de règles. En clair, ce script pourrait être :</p>
<ol type="1">
<li>Numérisez le texte pour…</li>
<li>Les prépositions. Si vous en trouvez, ajoutez &nbsp; après elles.</li>
<li>Pour les tirets. Si vous les trouvez, ajoutez &nbsp; après eux.</li>
<li>Les mots de moins de trois caractères qui ne sont pas des prépositions. S’ils sont trouvés, ajoutez &nbsp; après eux.</li>
<li>Les mots accentués qui se suivent entre un et trois trois mots. Si vous les trouvez, ajoutez &nbsp; entre tous les mots.</li>
</ol>
<h2 id="ou-utilisez-simplement-ce-script"><a href="#">Ou utilisez simplement ce script</a></h2>
<!-- call the raggity function after the content -->
</article>
</body>
</html>