-
Notifications
You must be signed in to change notification settings - Fork 2
/
docs.html
569 lines (569 loc) · 27.8 KB
/
docs.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
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Documentation | Typesettings.css</title>
<link rel="stylesheet" href="src/styles/typesettings.css">
<meta name="description" content="How-to's and demos on Typesettings.css features.">
</head>
<body>
<a href="#content">
Skip to content
</a>
<div data-typesettings="golden">
<nav>
<ul>
<li>
<h1>
<a href="index.html">Typesettings.css</a> » <a href="docs.html" aria-current="page" aria-label="Documentation">Docs</a>
</h1>
</li>
<li>
<ul>
<li>
<a href="https://mikemai.net/typesettings/css/typesettings-2.0-min.css" aria-label="Download the Typesettings.css file">Download</a>
</li>
</ul>
</li>
</ul>
</nav>
<main id="content">
<article>
<header>
<h1 role="presentation">
Documentation
</h1>
<h2>
How to use typesettings.css
</h2>
</header>
<section>
<h3>On This Page</h3>
<ol>
<li>
<a href="#get-started">Get Started</a>
</li>
<li>
<a href="#page-structure">Page Structure</a>
</li>
<li>
<a href="#internationalization">Internationalization</a>
</li>
<li>
<a href="#navigation">Navigation</a>
</li>
<li>
<a href="#main-article-content">Main Article Content</a>
</li>
<li>
<a href="#form">Form</a>
</li>
</ol>
</section>
<hr>
<section aria-labelledby="get-started">
<h3 id="get-started">
Get Started
</h3>
<p>
Add <code>data-typesettings</code> attribute to the direct child element of the <code><body></code>:
</p>
<pre><code><body><br> <div data-typesettings><br> …<br> </div><br></body></code></pre>
</section>
<hr>
<section aria-labelledby="page-structure">
<h3 id="page-structure">
Page Structure
</h3>
<p>
Inside the <code>div[data-typesettings]</code> element, you can divide up the page into main article content and navigation.
</p>
<pre><code><div data-typesettings><br> <nav><br> …<br> </nav><br> <main><br> <article><br> …<br> </article><br> </main><br></div></code></pre>
<section aria-labelledby="accessibility">
<h4 id="accessibility">
Accessibility
</h4>
<p>
Create a skip link for the page by using an <code><a></code> element as the direct child of the <code><body></code>. Use the same text in the <code>href</code> attribute as the <code>id</code> for the content container.
</p>
<pre><code><body><br> <a href="#content"><br> Skip to content<br> </a><br> <div data-typesettings><br> <nav><br> …<br> </nav><br> <main><br> <article id="content"><br> …<br> </article><br> </main><br> </div><br></body></code></pre>
<p>
<abbr aria-label="Note">📣</abbr>: <em>Accessibility is important and everyone should write better code to support it. Please reference the <abbr aria-label="Web Content Accessibility Guidelines">WCAG</abbr> for <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">writing proper markup</a>.</em>
</p>
</section>
</section>
<hr>
<section aria-labelledby="internationalization">
<h3 id="internationalization">
Internationalization
</h3>
<p>
Typesettings.css has basic internationalization support for all elements.
</p>
<section aria-labelledby="quotation-marks">
<h4 id="quotation-marks">
Quotation Marks
</h4>
<p>
Proper quotation marks for English, Japanese, and Chinese (Traditional) are built-in for the <code><q></code> element. Appropriate <code>lang</code> attribute is required for each language.
</p>
<ul>
<li>
<p>
<q>Primary quotation marks and <q>secondary quotation marks</q>.</q>
</p>
</li>
<li>
<p lang="zh-Hant">
<q>引号，标示引用、着重、<q>特别用意</q>的符号。</q>
</p>
</li>
<li>
<p lang="ja">
<q>引用符（いんようふ）は、<q>約物の</q>一つ。</q>
</p>
</li>
</ul>
<pre><code><body lang="zh-Hant"><br> <q><br> 引号，标示引用、着重、<q>特别用意</q>的符号。<br> </q><br></body></code></pre>
<p>
<abbr aria-label="Note">📣</abbr>: <em>Want more languages supported? <a href="https://github.com/mikemai2awesome/typesettings.css/issues">Submit a request here »</a></em>
</p>
</section>
<section aria-labelledby="rtl">
<h4 id="rtl">
Right to Left
</h4>
<p>
Right to left writing mode is supported in all elements. To create a page that reads right to left, add the <code>dir="rtl"</code> attribute to the <code><html></code> element.
</p>
<pre><code><html dir="rtl"><br> …<br></html></code></pre>
</section>
<section aria-labelledby="vertical">
<h4 id="vertical">
Vertical Writing Mode
</h4>
<p>
Vertical writing mode for Japanese and Chinese (Traditional) is also supported, see <a href="customize.html">Customize</a> page to find out how to turn on the unique feature.
</p>
</section>
</section>
<hr>
<section aria-labelledby="navigation">
<h3 id="navigation">
Navigation
</h3>
<p>
A sticky top navigation menu can be added to a page by using a <code><nav></code> element as a direct child of the <code>div[data-typesettings]</code> element.
</p>
<h4>
Demo
</h4>
<nav>
<ul>
<li>
<h1>
<a href="javascript:">
Title
</a>
</h1>
</li>
<li>
<ul>
<li>
<a href="javascript:">Link 1</a>
</li>
<li>
<a href="javascript:">Link 2</a>
</li>
<li>
<a href="javascript:">Primary Action</a>
</li>
</ul>
</li>
</ul>
</nav>
<h4>
Code Snippet
</h4>
<pre><code><div data-typesettings><br> <nav><br> <ul><br> <li><h1><a href="[url]">Title</a></h1></li><br> <li><a href="[url]">Link 1</a></li><br> <li><a href="[url]">Link 2</a></li><br> <li><a href="[url]">Primary Action</a></li><br> </ul><br> </nav><br></div></code></pre>
<p>
<abbr aria-label="Note">📣</abbr>: <em>If a <code><nav></code> element is not a direct child of the <code>div[data-typesettings]</code> element, it will not be sticky.</em>
</p>
</section>
<hr>
<section aria-labelledby="main-article-content">
<h3 id="main-article-content">
Main Article Content
</h3>
<p>
Within the <code><article></code> element, you can construct your article using a combination of special elements and common elements.
</p>
<section aria-labelledby="banner">
<details>
<summary>
<h4 id="banner">
Banner
</h4>
</summary>
<p>
If you want to enable a banner, create a <code><header></code> element with the attribute <code>role="banner"</code>. Banner bleeds out of the article content’s max-width and colors are inverted.
</p>
<h5>
Demo
</h5>
<header role="banner">
<h1>
Banner Heading
</h1>
<h2>
Banner Subheading
</h2>
</header>
<h5>
Code Snippet
</h5>
<pre><code><header role="banner"><br> …<br></header></code></pre>
</details>
</section>
<section aria-labelledby="drop-cap">
<details>
<summary>
<h4 id="drop-cap">
Drop Cap
</h4>
</summary>
<p>
You can activate drop cap by using a <code><p></code> element inside the banner. This only applies to the first <code><p></code> element.
</p>
<h5>
Demo
</h5>
<header role="banner">
<p>
Science gives man knowledge, which is power; religion gives man wisdom, which is control. Science deals mainly with facts; religion deals mainly with values.
</p>
</header>
<h5>
Code Snippet
</h5>
<pre><code><header role="banner"><br> <p>…</p><br></header></code></pre>
<p>
<abbr aria-label="Note">📣</abbr>: <em>Drop Cap is only available above 400px viewport.</em>
</p>
</details>
</section>
<section aria-labelledby="abbreviation">
<details>
<summary>
<h4 id="abbreviation">
Abbreviation
</h4>
</summary>
<p>
You can create a tooltip for words that are abbreviations by using the <code><abbr></code> element.
</p>
<h5>
Demo
</h5>
<p>
<abbr aria-label="User Experience">UX</abbr>
</p>
<h5>
Code Snippet
</h5>
<pre><code><abbr aria-label="User Experience"><br> UX<br></abbr></code></pre>
<p>
<abbr aria-label="Note">📣</abbr>: <em>Make sure to use the <code>aria-label</code> attribute, not the <code>title</code> attribute.</em>
</p>
</details>
</section>
<section aria-labelledby="summary-heading">
<details>
<summary>
<h4 id="summary-heading">
Summary Heading
</h4>
</summary>
<p>
By combining the <code><details></code>, <code><summary></code>, and <code><h2></code> ~ <code><h6></code> elements, you can create summary heading that toggles additional information. The heading must be the actual summary of the detailed text.
</p>
<h5>
Demo
</h5>
<details>
<summary><h2>H2 summary heading text</h2></summary>
<p>This is the full details. Every man lives in two realms: the internal and the external. The internal is that realm of spiritual ends expressed in art, literature, morals, and religion. The external is that complex of devices, techniques, mechanisms, and instrumentalities by means of which we live.</p>
</details>
<details>
<summary><h3>H3 summary heading text</h3></summary>
<p>This is the full details. Every man lives in two realms: the internal and the external. The internal is that realm of spiritual ends expressed in art, literature, morals, and religion. The external is that complex of devices, techniques, mechanisms, and instrumentalities by means of which we live.</p>
</details>
<details>
<summary><h4>H4 summary heading text</h4></summary>
<p>This is the full details. Every man lives in two realms: the internal and the external. The internal is that realm of spiritual ends expressed in art, literature, morals, and religion. The external is that complex of devices, techniques, mechanisms, and instrumentalities by means of which we live.</p>
</details>
<details>
<summary><h5>H5 summary heading text</h5></summary>
<p>This is the full details. Every man lives in two realms: the internal and the external. The internal is that realm of spiritual ends expressed in art, literature, morals, and religion. The external is that complex of devices, techniques, mechanisms, and instrumentalities by means of which we live.</p>
</details>
<details>
<summary><h6>H6 summary heading text</h6></summary>
<p>This is the full details. Every man lives in two realms: the internal and the external. The internal is that realm of spiritual ends expressed in art, literature, morals, and religion. The external is that complex of devices, techniques, mechanisms, and instrumentalities by means of which we live.</p>
</details>
<h5>
Code Snippet
</h5>
<pre><code><details><br> <summary><br> <h6>…</h6><br> </summary><br> <p>…</p><br></details></code></pre>
<p>
<abbr aria-label="Note">📣</abbr>: <em><code><h1></code> is not recommended for this because it is only meant for page heading.</em>
</p>
</details>
</section>
<section aria-labelledby="common-elements">
<details>
<summary>
<h4 id="common-elements">
Common Elements
</h4>
</summary>
<p>
Common elements can be used as is with no conditions attached.
</p>
<h5>
Demo
</h5>
<p>
Text: <strong>bold</strong>, <em>italic</em>, <a href="javascript:">linked</a>, <code>code</code>, <kbd>kbd</kbd>, <small>small</small>.
</p>
<p>
Paragraphs. The ultimate measure of a man is not where he stands in moments of comfort and convenience, but where he stands at times of challenge and controversy.
</p>
<aside>
<p>
Aside content.
</p>
</aside>
<p>
The function of education is to teach one to think intensively and to think critically. Intelligence plus character—that is the goal of true education.
</p>
<p>
In the end, we will remember not the words of our enemies, but the silence of our friends.
</p>
<details>
<summary>Summary sums up the details</summary>
<p>
Details elaborate on the summary.
</p>
</details>
<ul>
<li>
First level unordered item
</li>
<li>
First level unordered item
<ol>
<li>
Second level ordered item
<ul>
<li>
Third level unordered item
</li>
<li>
Third level unordered item
</li>
</ul>
</li>
<li>
Second level ordered item
</li>
</ol>
</li>
<li>
First level unordered item
</li>
</ul>
<ol>
<li>
First level ordered item
</li>
<li>
First level ordered item
<ul>
<li>
Second level unordered item
<ol>
<li>
Third level ordered item
</li>
<li>
Third level ordered item
</li>
</ol>
</li>
<li>
Second level unordered item
</li>
</ul>
</li>
<li>
First level ordered item
</li>
</ol>
<dl>
<dt>Definition list</dt>
<dd>A list of text and description.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
<pre><code>pre {<br> padding: .5em 1em; color: black; border-left: 5px solid; background-color: white;<br>}</code></pre>
<blockquote>
<p>
<q>Pull Quote. Darkness cannot drive out darkness; only <q>light</q> can do that. Hate cannot drive out hate; only <q>love</q> can do that.</q>
</p>
<p>
<q>The time is always right to do what is right.</q>
</p>
</blockquote>
<header>
<h1>
Article heading text
</h1>
<h2>
Article subheading text
</h2>
</header>
<h2>
H2 heading text
</h2>
<h3>
H3 heading text
</h3>
<h4>
H4 heading text
</h4>
<h5>
H5 heading text
</h5>
<h6>
H6 heading text
</h6>
<figure>
<img src="https://via.placeholder.com/1600x900" width=1600 height=900 alt="Image description">
<figcaption>
Figure caption (image)
</figcaption>
</figure>
<figure>
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>Row1</td>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
<td>Row2</td>
<td>Row2</td>
</tr>
</tbody>
</table>
<figcaption>Figure caption (table)</figcaption>
</figure>
</details>
</section>
</section>
<hr>
<section aria-labelledby="form">
<h3 id="form">
Form
</h3>
<p>
You can create a form by using a combination of <code><form></code>, <code><fieldset></code>, <code><label></code>, <code><input></code> and <code><button></code> elements. Form can be used anywhere within the <code>div[data-typesettings]</code> element.
</p>
<h4>Demo</h4>
<form action="submit">
<fieldset>
<legend>This is a fieldset</legend>
<ol>
<li>
<label>
Textarea
<textarea name="textarea" rows="5" placeholder="Enter a paragraph"></textarea>
</label>
</li>
<li>
<label>
Input
<input type="text" placeholder="Enter text">
</label>
</li>
<li>
<label>
Select
<select name="select" id="select"><optgroup><option value="Select" disabled selected>Select</option><option value="Option 1">Option 1</option></optgroup></select>
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>This is another fieldset</legend>
<ol>
<li>
<label>
<input type="radio" name="radio">
This is a radio input.
</label>
</li>
<li>
<label>
<input type="radio" name="radio">
This is a radio input.
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>This is yet another fieldset</legend>
<ul>
<li>
<label>
<input type="checkbox" name="checkbox">
This is a checkbox input.
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox">
This is a checkbox input.
</label>
</li>
</ol>
</fieldset>
<p>
<input name="file-upload" type="file">
</p>
<p>
<button>Button</button>
</p>
</form>
<h4>
Code Snippet
</h4>
<pre><code><form action="submit"><br> <fieldset><br> <legend>This is a fieldset</legend><br> <ol><br> <li><br> <label><br> Textarea<br> <textarea name="textarea" rows=5 placeholder="Enter a paragraph"></textarea><br> </label><br> </li><br> <li><br> <label><br> Input<br> <input type="text" placeholder="Enter text"><br> </label><br> </li><br> <li><br> <label><br> Select<br> <select name="select" id="select"><br> <optgroup><br> <option value="Select" disabled selected>Select</option><br> <option value="Option 1">Option 1</option><br> </optgroup><br> </select><br> </label><br> </li><br> </ol><br> </fieldset><br> <fieldset><br> <legend>This is another fieldset</legend><br> <ol><br> <li><br> <label><br> <input type="radio" name="radio"><br> This is a radio input.<br> </label><br> </li><br> <li><br> <label><br> <input type="radio" name="radio"><br> This is a radio input.<br> </label><br> </li><br> </ol><br> </fieldset><br> <fieldset><br> <legend>This is yet another fieldset</legend><br> <ul><br> <li><br> <label><br> <input type="checkbox" name="checkbox"><br> This is a checkbox input.<br> </label><br> </li><br> <li><br> <label><br> <input type="checkbox" name="checkbox"><br> This is a checkbox input.<br> </label><br> </li><br> </ol><br> </fieldset><br> <p><br> <input name="file-upload" type="file"><br> </p><br> <p><br> <button>Button</button><br> </p><br></form></code></pre>
</section>
</article>
</main>
</div>
</body>
</html>