counter-trad-chinese-formal.html (4793B)
1 <!DOCTYPE html> 2 <title>CSS Counter Styles: Longhand East Asian Counter Styles Chinese (required)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-counter-styles/#limited-chinese"> 4 <link rel="author" href="mailto:saku@email.sakupi01.com" title="saku"> 5 <link rel="match" href="counter-trad-chinese-formal-ref.html"> 6 <style> 7 div::after { 8 content: counter(n, trad-chinese-formal); 9 } 10 </style> 11 <div style="counter-reset: n 0;"></div> 12 <div style="counter-reset: n 1;"></div> 13 <div style="counter-reset: n 2;"></div> 14 <div style="counter-reset: n 3;"></div> 15 <div style="counter-reset: n 4;"></div> 16 <div style="counter-reset: n 5;"></div> 17 <div style="counter-reset: n 6;"></div> 18 <div style="counter-reset: n 7;"></div> 19 <div style="counter-reset: n 8;"></div> 20 <div style="counter-reset: n 9;"></div> 21 22 <div style="counter-reset: n 10;"></div> 23 <div style="counter-reset: n 100;"></div> 24 <div style="counter-reset: n 1000;"></div> 25 26 <div style="counter-reset: n 11;"></div> 27 <div style="counter-reset: n 99;"></div> 28 <div style="counter-reset: n 101;"></div> 29 <div style="counter-reset: n 200;"></div> 30 <div style="counter-reset: n 6001;"></div> 31 32 <!-- Test second group marker (萬) - ten-thousands group --> 33 <div style="counter-reset: n 10000;"></div> 34 <div style="counter-reset: n 20000;"></div> 35 <div style="counter-reset: n 50000;"></div> 36 <div style="counter-reset: n 99999;"></div> 37 38 <!-- Test complex patterns within ten-thousands group (algorithm step 4: digit markers) --> 39 <div style="counter-reset: n 12345;"></div> 40 <div style="counter-reset: n 10001;"></div> 41 <div style="counter-reset: n 10010;"></div> 42 <div style="counter-reset: n 10100;"></div> 43 <div style="counter-reset: n 11000;"></div> 44 45 <!-- Test third group marker (億) - hundred-millions group --> 46 <div style="counter-reset: n 100000000;"></div> 47 <div style="counter-reset: n 200000000;"></div> 48 <div style="counter-reset: n 500000000;"></div> 49 <div style="counter-reset: n 999999999;"></div> 50 51 <!-- Test complex patterns within hundred-millions group (algorithm step 6: zero dropping) --> 52 <div style="counter-reset: n 123456789;"></div> 53 <div style="counter-reset: n 100000001;"></div> 54 <div style="counter-reset: n 100010000;"></div> 55 <div style="counter-reset: n 100100000;"></div> 56 <div style="counter-reset: n 101000000;"></div> 57 <div style="counter-reset: n 110000000;"></div> 58 59 <!-- Test fourth group marker (兆) - trillions group --> 60 <div style="counter-reset: n 1000000000000;"></div> 61 <div style="counter-reset: n 2000000000000;"></div> 62 <div style="counter-reset: n 5000000000000;"></div> 63 <div style="counter-reset: n 9999999999999;"></div> 64 65 <!-- Test extended ranges (algorithm step 3: group markers up to 10^16) --> 66 <!-- Test 10^13 range (ten-trillions) --> 67 <div style="counter-reset: n 10000000000000;"></div> 68 <div style="counter-reset: n 50000000000000;"></div> 69 <div style="counter-reset: n 99999999999999;"></div> 70 71 <!-- Test 10^15 range (hundred-trillions) --> 72 <div style="counter-reset: n 100000000000000;"></div> 73 <div style="counter-reset: n 500000000000000;"></div> 74 <div style="counter-reset: n 999999999999999;"></div> 75 76 <!-- Test complex patterns in trillions group (step 5: drop ones, step 6: drop zeros) --> 77 <div style="counter-reset: n 1234567890123;"></div> 78 <div style="counter-reset: n 1000000000001;"></div> 79 <div style="counter-reset: n 1000000010000;"></div> 80 <div style="counter-reset: n 1000001000000;"></div> 81 <div style="counter-reset: n 1000100000000;"></div> 82 <div style="counter-reset: n 1010000000000;"></div> 83 <div style="counter-reset: n 1100000000000;"></div> 84 85 <!-- Test interaction between multiple groups --> 86 <div style="counter-reset: n 1001001001001;"></div> 87 <div style="counter-reset: n 1010101010101;"></div> 88 <div style="counter-reset: n 1000100010001;"></div> 89 <div style="counter-reset: n 5005005005005;"></div> 90 91 <!-- Test zero dropping behavior across different groups --> 92 <div style="counter-reset: n 1000000000000;"></div> 93 <div style="counter-reset: n 1000000000;"></div> 94 <div style="counter-reset: n 1000000;"></div> 95 <div style="counter-reset: n 1000;"></div> 96 <div style="counter-reset: n 10000000000000;"></div> 97 <div style="counter-reset: n 100000000000000;"></div> 98 99 <!-- Test boundary values at the edge of range (-10^16+1 to 10^16-1) --> 100 <div style="counter-reset: n 9999999999999999;"></div> 101 <div style="counter-reset: n 1000000000000000;"></div> 102 103 <!-- Test out-of-range values (should fallback to cjk-decimal) --> 104 <div style="counter-reset: n 10000000000000000;"></div> 105 106 <!-- Test negative numbers (algorithm step 8: negative sign handling) --> 107 <div style="counter-reset: n -10000;"></div> 108 <div style="counter-reset: n -100000000;"></div> 109 <div style="counter-reset: n -1000000000000;"></div> 110 <div style="counter-reset: n -9999999999999999;"></div> 111 112 <div style="counter-reset: n -1;"></div>