Skip to content

Commit 153fdd8

Browse files
riverspiritriverspirit
committed
Examples for mostly all systems and predefined styles added.
1 parent ad2a0f4 commit 153fdd8

3 files changed

Lines changed: 786 additions & 9 deletions

File tree

‎css/style.css‎

Lines changed: 234 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ body {
4646

4747
/* Demo styles */
4848

49-
@counter-style cs-cyclic {
49+
@counter-style demo-cyclic {
5050
system: cyclic;
5151
symbols: ◆ ◇;
5252
suffix: " ";
5353
}
5454

5555
.demo-cyclic {
56-
list-style: cs-cyclic;
56+
list-style: demo-cyclic;
5757
}
5858

5959
@counter-style cs-fixed {
@@ -89,18 +89,249 @@ body {
8989

9090
@counter-style cs-numeric {
9191
system: numeric;
92-
symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
92+
symbols: A B C D E;
9393
}
9494

9595
.demo-numeric {
9696
list-style: cs-numeric;
9797
}
9898

99+
@counter-style cs-additive-roman {
100+
system: additive;
101+
range: 1 100;
102+
additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
103+
}
104+
105+
.demo-additive {
106+
list-style: cs-additive-roman;
107+
}
108+
109+
@counter-style cs-extends {
110+
system: extends decimal;
111+
prefix: '(';
112+
suffix: ') ';
113+
}
114+
115+
.demo-extends {
116+
list-style: cs-extends;
117+
}
118+
119+
120+
/* Predefined styles */
121+
122+
.demo-decimal {
123+
list-style: decimal;
124+
}
125+
126+
.demo-decimal-leading-zero {
127+
list-style: decimal-leading-zero;
128+
}
129+
130+
.demo-arabic-indic {
131+
list-style: arabic-indic;
132+
}
133+
134+
.demo-armenian {
135+
list-style: armenian;
136+
}
137+
138+
.demo-upper-armenian {
139+
list-style: upper-armenian;
140+
}
141+
142+
.demo-lower-armenian {
143+
list-style: lower-armenian;
144+
}
145+
146+
.demo-bengali {
147+
list-style: bengali;
148+
}
149+
150+
.demo-cambodian {
151+
list-style: cambodian;
152+
}
153+
154+
.demo-khmer {
155+
list-style: khmer;
156+
}
157+
158+
.demo-cjk-decimal {
159+
list-style: cjk-decimal;
160+
}
161+
162+
.demo-devanagiri {
163+
list-style: devanagiri;
164+
}
165+
166+
.demo-georgian {
167+
list-style: georgian;
168+
}
169+
170+
.demo-gujarati {
171+
list-style: gujarati;
172+
}
173+
174+
.demo-gurmukhi {
175+
list-style: gurmukhi;
176+
}
177+
178+
.demo-hebrew {
179+
list-style: hebrew;
180+
}
181+
182+
.demo-kannada {
183+
list-style: kannada;
184+
}
185+
186+
.demo-lao {
187+
list-style: lao;
188+
}
189+
190+
.demo-malayalam {
191+
list-style: malayalam;
192+
}
193+
194+
.demo-mongolian {
195+
list-style: mongolian;
196+
}
197+
198+
.demo-myanmar {
199+
list-style: myanmar;
200+
}
201+
202+
.demo-oriya {
203+
list-style: oriya;
204+
}
205+
206+
.demo-persian {
207+
list-style: persian;
208+
}
209+
210+
.demo-lower-roman {
211+
list-style: lower-roman;
212+
}
213+
214+
.demo-upper-roman {
215+
list-style: upper-roman;
216+
}
217+
218+
.demo-telugu {
219+
list-style: telugu;
220+
}
221+
222+
.demo-thai {
223+
list-style: thai;
224+
}
225+
226+
.demo-tibetan {
227+
list-style: tibetan;
228+
}
229+
99230
.demo-lower-alpha {
100231
list-style: lower-alpha;
101232
}
102233

234+
.demo-lower-latin {
235+
list-style: lower-latin;
236+
}
237+
103238
.demo-upper-alpha {
104239
list-style: upper-alpha;
105240
}
106241

242+
.demo-upper-latin {
243+
list-style: upper-latin;
244+
}
245+
246+
.demo-cjk-earthly-branch {
247+
list-style: cjk-earthly-branch;
248+
}
249+
250+
.demo-cjk-heavenly-stem {
251+
list-style: cjk-heavenly-stem;
252+
}
253+
254+
.demo-lower-greek {
255+
list-style: lower-greek;
256+
}
257+
258+
.demo-hiragana {
259+
list-style: hiragana;
260+
}
261+
262+
.demo-hiragana-iroha {
263+
list-style: hiragana-iroha;
264+
}
265+
266+
.demo-katakana {
267+
list-style: katakana;
268+
}
269+
270+
.demo-katakana-iroha {
271+
list-style: katakana-iroha;
272+
}
273+
274+
.demo-disc {
275+
list-style: disc;
276+
}
277+
278+
.demo-circle {
279+
list-style: circle;
280+
}
281+
282+
.demo-square {
283+
list-style: square;
284+
}
285+
286+
.demo-disclosure-open {
287+
list-style: disclosure-open;
288+
}
289+
290+
.demo-disclosure-closed {
291+
list-style: disclosure-closed;
292+
}
293+
294+
.demo-japanese-informal {
295+
list-style: japanese-informal;
296+
}
297+
298+
.demo-japanese-formal {
299+
list-style: japanese-formal;
300+
}
301+
302+
.demo-korean-hangul-formal {
303+
list-style: korean-hangul-formal;
304+
}
305+
306+
.demo-korean-hanja-informal {
307+
list-style: korean-hanja-informal;
308+
}
309+
310+
.demo-korean-hanja-formal {
311+
list-style: korean-hanja-formal;
312+
}
313+
314+
.demo-simp-chinese-informal {
315+
list-style: simp-chinese-informal;
316+
}
317+
318+
.demo-simp-chinese-formal {
319+
list-style: simp-chinese-formal;
320+
}
321+
322+
.demo-trad-chinese-informal {
323+
list-style: trad-chinese-informal;
324+
}
325+
326+
.demo-trad-chinese-formal {
327+
list-style: trad-chinese-formal;
328+
}
329+
330+
.demo-cjk-ideographic {
331+
list-style: cjk-ideographic;
332+
}
333+
334+
.demo-ethiopic-numeric {
335+
list-style: ethiopic-numeric;
336+
}
337+

‎index.html‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,19 +52,84 @@ <h3>Select a counter style from the list</h3>
5252
<option value="cyclic">cyclic</option>
5353
<option value="fixed">fixed</option>
5454
<option value="symbolic">symbolic</option>
55+
<option value="alphabetic">alphabetic</option>
56+
<option value="numeric">numeric</option>
57+
<option value="additive">additive</option>
58+
<option value="extends">extends</option>
5559
</optgroup>
5660
<optgroup label="Predefined styles">
61+
<option disabled>Numeric ▼</option>
62+
<option value="decimal">decimal</option>
63+
<option value="decimal-leading-zero">decimal-leading-zero</option>
64+
<option value="arabic-indic">arabic-indic</option>
65+
<option value="armenian">armenian</option>
66+
<option value="upper-armenian">upper-armenian</option>
67+
<option value="lower-armenian">lower-armenian</option>
68+
<option value="bengali">bengali</option>
69+
<option value="cambodian">cambodian</option>
70+
<option value="khmer">khmer</option>
71+
<option value="cjk-decimal">cjk-decimal</option>
72+
<option value="devanagiri">devanagiri</option>
73+
<option value="georgian">georgian</option>
74+
<option value="gujarati">gujarati</option>
75+
<option value="gurmukhi">gurmukhi</option>
76+
<option value="hebrew">hebrew</option>
77+
<option value="kannada">kannada</option>
78+
<option value="lao">lao</option>
79+
<option value="malayalam">malayalam</option>
80+
<option value="mongolian">mongolian</option>
81+
<option value="myanmar">myanmar</option>
82+
<option value="oriya">oriya</option>
83+
<option value="persian">persian</option>
84+
<option value="lower-roman">lower-roman</option>
85+
<option value="upper-roman">upper-roman</option>
86+
<option value="telugu">telugu</option>
87+
<option value="thai">thai</option>
88+
<option value="tibetan">tibetan</option>
5789
<option value="lower-alpha">lower-alpha</option>
5890
<option value="upper-alpha">upper-alpha</option>
91+
<option disabled>Alphabetic ▼</option>
92+
<option value="lower-alpha">lower-alpha</option>
93+
<option value="lower-latin">lower-latin</option>
94+
<option value="upper-alpha">upper-alpha</option>
95+
<option value="upper-latin">upper-latin</option>
96+
<option value="cjk-earthly-branch">cjk-earthly-branch</option>
97+
<option value="cjk-heavenly-stem">cjk-heavenly-stem</option>
98+
<option value="lower-greek">lower-greek</option>
99+
<option value="hiragana">hiragana</option>
100+
<option value="hiragana-iroha">hiragana-iroha</option>
101+
<option value="katakana">katakana</option>
102+
<option value="katakana-iroha">katakana-iroha</option>
103+
<option disabled>Symbolic ▼</option>
104+
<option value="disc">disc</option>
105+
<option value="circle">circle</option>
106+
<option value="square">square</option>
107+
<option value="disclosure-open">disclosure-open</option>
108+
<option value="disclosure-closed">disclosure-closed</option>
109+
<option disabled>Predefined complex styles ▼</option>
110+
<option value="japanese-informal">japanese-informal</option>
111+
<option value="japanese-formal">japanese-formal</option>
112+
<option value="korean-hangul-formal">korean-hangul-formal</option>
113+
<option value="korean-hanja-informal">korean-hanja-informal</option>
114+
<option value="korean-hanja-formal">korean-hanja-formal</option>
115+
<option value="simp-chinese-informal">simp-chinese-informal</option>
116+
<option value="simp-chinese-formal">simp-chinese-formal</option>
117+
<option value="trad-chinese-informal">trad-chinese-informal</option>
118+
<option value="trad-chinese-formal">trad-chinese-formal</option>
119+
<option value="cjk-ideographic">cjk-ideographic</option>
120+
<option value="ethiopic-numeric">ethiopic-numeric</option>
59121
</optgroup>
60122
</select>
61123

62-
63124
<pre class="code" id="code">
64-
@counter-style alternating {
125+
@counter-style blacknwhite {
65126
system: cyclic;
66127
additive-symbols: ◆ ◇;
67128
suffix: " ";
129+
}
130+
131+
ul {
132+
list-style: blacknwhite;
68133
}</pre>
69134

70135
</div>

0 commit comments

Comments
 (0)