-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (165 loc) · 12.5 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Templates for CSS Counters by Crissov</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/github-light.css">
<link rel="stylesheet" href="european-counter-styles.css">
<link rel="stylesheet" href="emoji-counter-styles.css">
<link rel="stylesheet" href="enclosing-counter-styles.css">
<link rel="stylesheet" href="scientific-counter-styles.css">
<link rel="stylesheet" href="example-counter-styles.css">
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>Templates for CSS Counters</h1>
<p>Additional templates for Custom Counter Styles (without a focus on i18n)</p>
<p class="view"><a href="https://github.com/Crissov/css-counters">View the Project on GitHub <small>Crissov/css-counters</small></a></p>
<ul>
<li><a href="https://github.com/Crissov/css-counters/zipball/master">Download <strong>ZIP File</strong></a></li>
<li><a href="https://github.com/Crissov/css-counters/tarball/master">Download <strong>TAR Ball</strong></a></li>
<li><a href="https://github.com/Crissov/css-counters">View On <strong>GitHub</strong></a></li>
</ul>
</header>
<section>
<p>This repository provides code templates and ideas for custom counter styles in Cascading Stylesheets (CSS) using <code>@counter-style</code> as specified in <a href="http://www.w3.org/TR/css-counter-styles-3/">CSS Counter Styles Level 3</a>.
This feature has <a href="http://caniuse.com/#feat=css-at-counter-style">very limited support in browsers</a> (only Gecko/Firefox since version 33 as of mid-2016).
Some CSS-to-PDF formatters like <a href="http://www.princexml.com/doc/9.0/counters/">Prince</a>, <a href="http://weasyprint.readthedocs.io/en/latest/features.html#css">Weasyprint</a> and <a href="http://vivliostyle.com/en/about/#secAbout-w3c">Vivliostyle</a> may have proprietary solutions for user-defined counter styles, but <a href="https://www.antennahouse.com/product/ahf63/ahf-ext.html#axf.counter-style">Antenna House Formatter</a> claims almost complete support for the standard.
</p><p>
Such counter styles can be used as list markers, for pagination, footnote markers and several other things, at least in theory.
A similar, but official W3C project is <a href="http://w3c.github.io/predefined-counter-styles/">Custom Counter Styles</a> which focuses on internationalization (i18n) of enumerators, i.e. it documents existing usage from around the world.</p>
<nav>
<li><a href="european-counter-styles.css">Classic European Counter Style Templates</a>, some variants of roman numerals and latin alphabetic labels</li>
<li><a href="emoji-counter-styles.css">Emoji Counter Style Templates</a>, using colorful picture characters as list markers etc. with styles ranging from playful to serious</li>
<li><a href="enclosing-counter-styles.css">Enclosing Counter Style Templates with Combining Suffix</a>, list markers with various shapes around them</li>
<li><a href="scientific-counter-styles.css">Scientific (but Playful) Counter Style Templates</a>, e.g. chemical elements, planets, days and months/zodiac signs</li>
<li><a href="example-counter-styles.css">Example Counter Styles from the Specification</a>, clipped from the <a href="https://drafts.csswg.org/css-counter-styles/">Editor’s Draft</a></li>
</nav>
</section>
<section>
<h1>Examples and Documentation</h1>
<section>
<h2 id="european">Classic European Counter Style Templates</h2>
<p>Most of these are proposed to be included in <a href="http://w3c.github.io/predefined-counter-styles/">Custom Counter Styles</a>.</p>
<h3 id="lower-alpha-ancient"><code>lower-alpha-ancient</code></h3>
<ol style="list-style-type: lower-alpha-ancient;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="lower-roman-j"><code>lower-roman-j</code></h3>
<ol style="list-style-type: lower-roman-j;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
</section>
<section>
<h2 id="emoji">Emoji Counter Style Templates</h2>
<h3 id="emoji-numbers"><code>emoji-numbers</code></h3>
<ol style="list-style-type: emoji-numbers;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="emoji-decimal"><code>emoji-decimal</code></h3>
<ol style="list-style-type: emoji-decimal;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="keycap-decimal"><code>keycap-decimal</code></h3>
<ol style="list-style-type: keycap-decimal;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="clock-face"><code>clock-face</code></h3>
<ol style="list-style-type: clock-face;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="blood-type"><code>blood-type</code></h3>
<ol style="list-style-type: blood-type;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<!--<h3 id=""><code></code></h3>
<ol style="list-style-type: ;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>-->
</section>
<section>
<h2 id="enclosing">Enclosing Counter Style Templates with Combining Suffix</h2>
<h3 id="lower-latin-in-circle"><code>lower-latin-in-circle</code></h3>
<ol style="list-style-type: lower-latin-in-circle;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id=" lower-latin-in-square"><code> lower-latin-in-square</code></h3>
<ol style="list-style-type: lower-latin-in-square;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="lower-latin-in-diamond"><code>lower-latin-in-diamond</code></h3>
<ol style="list-style-type: lower-latin-in-diamond;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="lower-latin-in-triangle"><code>lower-latin-in-triangle</code></h3>
<ol style="list-style-type: lower-latin-in-triangle;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="lower-latin-forbidden"><code>lower-latin-forbidden</code></h3>
<ol style="list-style-type: lower-latin-forbidden;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="lower-latin-on-screen"><code>lower-latin-on-screen</code></h3>
<ol style="list-style-type: lower-latin-on-screen;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="lower-latin-on-key"><code>lower-latin-on-key</code></h3>
<ol style="list-style-type: lower-latin-on-key;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
</section>
<section>
<h2 id="scientific">Scientific (but Playful) Counter Style Templates</h2>
<h3 id="element-symbols"><code>element-symbols</code></h3>
<ol style="list-style-type: element-symbols;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="element-symbols-boxed"><code>element-symbols-boxed</code></h3>
<ol style="list-style-type: element-symbols-boxed;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="planets"><code>planets</code></h3>
<ol style="list-style-type: planets;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="solar-system"><code>solar-system</code></h3>
<ol style="list-style-type: solar-system;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="week-days"><code>week-days</code></h3>
<ol style="list-style-type: week-days;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="astronomic-months"><code>astronomic-months</code></h3>
<ol style="list-style-type: astronomic-months;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="months"><code>months</code></h3>
<ol style="list-style-type: months;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="astrologic-months"><code>astrologic-months</code></h3>
<ol style="list-style-type: astrologic-months;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
<h3 id="zodiac"><code>zodiac</code></h3>
<ol style="list-style-type: zodiac;">
<li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li><li>Sixth</li><li>Seventh</li><li>Eighth</li><li>Ninth</li><li>Tenth</li><li>Eleventh</li><li>Twelfth</li>
</ol>
</section>
</section>
<footer>
<p>This project is maintained by <a href="https://github.com/Crissov">Crissov</a></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
</footer>
</div>
<script src="javascripts/scale.fix.js"></script>
</body>
</html>