-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathblanka-type-test.cz.html
345 lines (254 loc) · 16.9 KB
/
blanka-type-test.cz.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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!doctype html>
<html class="no-js" lang="cs">
<head>
<meta charset="utf-8">
<title>
Stres test české typografie v jednom HTML dokumentu
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/normalize.css">
<link rel="stylesheet" type="text/css" href="blanka.css">
<style>
/* Better reading options */
.content {
padding: 1.5em;
margin: 0 auto;
max-width: 30em;
}
</style>
</head>
<body>
<div class="container">
<main id="main" role="main" class="content">
<h1>Stres test české typografie. V jednom HTML dokumentu</h1>
<p>
Lorem ipsum až mlze kohoutku něj, světový z postupující, nim do ovládá je směr organizace nějaké u matriarchálně jasně v řádu slabí ztěžuje, jim i mj. zvládnete někdy k zelené, čím 5300 m n.m. všeobecně bílý, a o tezi z tak světlých se napětí mozek. Rozmachu listopadovém podobný teď. Spešl díky pro <a href="http://cs.blabot.net/">Blábot</a>.
</p>
<h2>Jsou tady různé HTML elementy. Testujeme se, zda nastavení typografie řeší všechny jejich kombinace</h2>
<p>Lorem ipsum Zemi dvě ujít jste šest s 2012 vlajících, míra tvar rezervaci profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě. Lanovek předpoklad naplánoval by mj. laboratoře vstupuje ostře prostoročase ze o Michal spíš 5300 m n.m. létě k viru. </p>
<h2>Tohle je třeba děsně dlouhý nadpis druhé úrovně, že jo. Unikátní docházet 320denní se zemskou agenturou, nájem jasně nacházejí vznikl annan</h2>
<p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p>
<h3>Nadpis třetí úrovně. Mor EU 862 propadnout získávání odpoledne oddané traektorii si zemědělstvím</h3>
<p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p>
<h4>Nadpis čtvrté úrovně. Mor primátů odešli schopnost co letos výhodu</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h5>Nadpis páté úrovně. Mor EU 4567 získávání odpoledne oddané traektorii si zemědělstvím</h5>
<p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p>
<h6>Nadpis šesté úrovně. Mor primátů odešli schopnost co letos výhodu</h6>
<p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p>
<p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p>
<h2>Základní prvky blokové úrovně</h2>
<p>Lorem ipsum mediálně u charisma hmatatelný mamuti smetánka dubnu strukturou neřeknou dolní dcera i odborníci. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p>
<address>Adresa. Block level, but without margin or padding because they're often stacked.</address>
<p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p>
<p>
<small>
Tohle je odstavec textu uvnitř značky <code>small</code>. Lorem ipsum mediálně u charisma hmatatelný mamuti smetánka dubnu strukturou neřeknou dolní dcera i odborníci. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně.
</small>
</p>
<div>To je <code>div</code> element. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek. (Konec <code>div</code> elementu.)</div>
<p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p>
<blockquote>
<p>Tohle je <code>blockquote</code> s <em>jedním</em> odstavcem. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</p>
</blockquote>
<p>Následuje vodorovný oddělovač <code>hr</code>:</p>
<hr>
<h2>Seznamy</h2>
<p>Odstavec před <strong>nečíslovaným</strong> seznamem (<code>ul</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p>
<ul>
<li>První.</li>
<li>Druhý.</li>
<li>Třetí. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li>
<li>Čtvrtý. Lorem ipsum vlajících, míra tvar rezervaci <em>profese</em>. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li>
</ul>
<p>Odstavec před <strong>číslovaným</strong> seznamem (<code>ol</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p>
<ol>
<li>První.</li>
<li>Druhý.</li>
<li>Třetí. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li>
<li>Čtvrtý. Lorem ipsum vlajících, míra tvar rezervaci <em>profese</em>. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li>
<li>Pátá</li>
<li>Šestá</li>
<li>Sedmá</li>
<li>Osmá</li>
<li>Devátá</li>
<li>Desátá</li>
<li>Jedenáctá</li>
</ol>
<p>Odstavec před <strong>seznamem definic</strong> (<code>dl</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p>
<dl>
<dt>Jablko</dt>
<dd>Je ovoce</dd>
<dt>Banám</dt>
<dd>Je prostě taky ovoce. Lorem ipsum vlajících, míra tvar rezervaci půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují.</dd>
<dt>Rajče</dt>
<dd>Tak to je těžké. Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</dd>
</dl>
<h2>Značkování na úrovni textu</h2>
<ul>
<li> <abbr title="Cascading Style Sheets">CSS</abbr> (zkratka;
<code>abbr</code>)</li>
<li> <acronym title="radio detecting and ranging">radar</acronym> (akronym; <code>acronym</code>)</li>
<li> <cite>Origin of Species</cite> (citace; <code>cite</code>)</li>
<li> <code>a[i] = b[i] + c[i);</code> (kód; <code>code</code>)</li>
<li> A ještě <dfn>octet</dfn> is an entity consisting of eight bits
(<code>dfn</code> markup used for the term being defined)</li>
<li> this is <em>very</em> simple (<code>em</code> markup used for emphasizing
a word)</li>
<li> type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup
used for text indicating keyboard input)</li>
<li> <q>Hello!</q> (<code>q</code> markup used for quotation)</li>
<li> He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li>
<li> you may get the message <samp>Core dumped</samp> at times
(<code>samp</code> markup used for sample output)</li>
<li> <small>Element <code>small</code></small> asi není potřeba představovat.</li>
<li> <strong>this is highlighted text</strong> (<code>strong</code> markup used)</li>
<li> <tt>text in monospace font</tt> (<code>tt</code> markup used)</li>
<li> the command <code>cat</code> <var>filename</var> displays the
file specified by the <var>filename</var> (<code>var</code> markup
used to indicate a word as a variable).</li>
<li> In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and some nested superscripts (exponents) too: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li>
</ul>
<p>Some of the elements tested above are typically displayed in a monospace font, often using the <em>same</em> presentation for all of them. This tests whether that is the case on your browser:</p>
<ul>
<li><code>Tohle je ukázka textu uvnitř code</code></li>
<li><kbd>Tohle je ukázka textu uvnitř kbd</kbd></li>
<li><samp>Tohle je ukázka textu uvnitř samp</samp></li>
<li><tt>Tohle je ukázka textu uvnitř tt</tt></li>
</ul>
<h2>Seznam odkazů</h2>
<ul>
<li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li>
<li><a href="http://www.vzhurudolu.cz">Blog Vzhůru dolů</a></li>
</ul>
<h2>Tabulky</h2>
<p>Tabulka s caption. Lorem ipsum unikátní docházet 320denní se zemskou agenturou, nájem jasně nacházejí vznikl annan nebezpečná schopnost.</p>
<table summary="V řádcích tabulky jsou severské země a sloupečky popisují jejich celkovou plochu v metrech čtverečních, plochu připadající na pevninu a počet obyvatel">
<caption>Název tabulky: Porovnání severských zemí </caption>
<tbody>
<tr>
<th>Země</th>
<th>Celková plocha m²</th>
<th>Plocha země</th>
<th>Počet obyvatel</th>
</tr>
<tr>
<th>Dánsko</th>
<td>43 070</td>
<td>42 370</td>
<td>7 230 000</td>
</tr>
<tr>
<th>Finsko</th>
<td>337 030</td>
<td>305 470</td>
<td>17 830 000</td>
</tr>
<tr>
<th>Island</th>
<td>103,000</td>
<td>100,250</td>
<td>5 230 000</td>
</tr>
<tr>
<th>Norsko</th>
<td>324 220</td>
<td>307 860</td>
<td>18 200 000</td>
</tr>
<tr>
<th>Švédsko</th>
<td>449 964</td>
<td>410 928</td>
<td>28 570 000</td>
</tr>
</tbody>
</table>
<h2>Formuláře</h2>
<form role="form">
<h3>Kontaktní formulář</h3>
<label for="name">
Jméno a příjmení
</label>
<input type="text" id="name" placeholder="Name">
<br>
<label for="email">
Váš e-mail
</label>
<input type="email" id="email" placeholder="Email">
<br>
<label for="message">
Zprávy
</label>
<textarea id="message" placeholder="Message"></textarea>
<br>
<input type="checkbox"> Souhlasím s posíláním novinek e-mailem
<br>
<button type="submit">Odeslat</button>
</form>
<br><br>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<div><input type="hidden" name="hidden field" value="42"></div>
<div><label for="f1">Klasický textový input na jednu řádku: <input id="f1" name="text" size="20" value="Default text."></label></div>
<div><label for="f2">Víceřádkový vstup (textarea):</label></div>
<div><textarea id="f2" name="textarea" rows="16" cols="20">Sem něco napište.</textarea></div>
<p>Následující prvky jsou uvnitř <code>fieldset</code> a mají také <code>legend</code>:</p>
<fieldset>
<legend>Legenda</legend>
<div>
<label for="f3">Radio button 1</label>
<input id="f3" type="radio" name="radio" value="1">
</div>
<div>
<label for="f4">Radio button 2 (zatržné)</label>
<input id="f4" type="radio" name="radio" value="2" checked="">
</div>
</fieldset>
<fieldset>
<legend>Checkboxy</legend>
<div>
<label for="f5">Checkbox 1</label>
<input id="f5" type="checkbox" name="checkbox">
</div>
<div>
<label for="f6">Checkbox 2 (zatržený)</label>
<input id="f6" type="checkbox" name="checkbox2" checked="">
</div>
</fieldset>
<p>
<label for="f10">Prvek <code>select</code> nastavený jako <code>size="1"</code>:</label>
</p>
<select id="f10" name="select1" size="1">
<option>první</option>
<option selected="">druhý (přednastavený)</option>
<option>třetí</option>
</select>
<p>
<label for="f11"><code>select</code> element nastavený jako <code>size="3"</code>:</label>
</p>
<select id="f11" name="select2" size="3">
<option>první</option>
<option selected="">druhý (přednastavený)</option>
<option>třetí</option>
</select>
<div>
<label for="f99">Submit tlačítko:</label>
<input id="f99" type="submit" name="submit" value="Odeslat">
</div>
<div>
<label for="f0">Resetovací tlačítko:</label>
<input id="f0" type="reset" name="reset" value="Reset">
</div>
</form>
<p>Jak funguje <code>pre</code> předformátovaný text?</p>
<pre>1
2
3
4
5
</pre>
<p>Lorem ipsum dolor sit 360° za jde mé procesorů bum pohled zaclonily. Satisfakce nedlouho až funkci oranžově určených takže malou tak stojí ve podceňována a ony i ženy okouzlí pokaždé. UNESCO já okolí hlubšího, než chlapců společně vy dokáží borci letošní ní aristokracie hladce. 1591 ty nástrojů ve řečení znám, vína barvy fond zdecimován větvích k typ vyvracejí ostře dlouhá budou práci od mrazivé ta čem ji váš mohlo a gama jednotek. 500 map ostatně támhle, let výš spadající plyn než. Mužskou kolektivního tendence bosonu EU duší za záření cituje. Muzeu € 5000,- by jich zůstával antické plní v vzkříšení i povinné klimatizační…</p>
</main><!-- /.content -->
</div><!-- /.container -->
</body>
</html>