Templates for CSS Counters

Additional templates for Custom Counter Styles (without a focus on i18n)

View the Project on GitHub Crissov/css-counters

This repository provides code templates and ideas for custom counter styles in Cascading Stylesheets (CSS) using @counter-style as specified in CSS Counter Styles Level 3. This feature has very limited support in browsers (only Gecko/Firefox since version 33 as of mid-2016). Some CSS-to-PDF formatters like Prince, Weasyprint and Vivliostyle may have proprietary solutions for user-defined counter styles, but Antenna House Formatter claims almost complete support for the standard.

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 Custom Counter Styles which focuses on internationalization (i18n) of enumerators, i.e. it documents existing usage from around the world.

Examples and Documentation

Classic European Counter Style Templates

Most of these are proposed to be included in Custom Counter Styles.

lower-alpha-ancient

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

lower-roman-j

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

Emoji Counter Style Templates

emoji-numbers

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

emoji-decimal

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

keycap-decimal

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

clock-face

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

blood-type

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

Enclosing Counter Style Templates with Combining Suffix

lower-latin-in-circle

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

lower-latin-in-square

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

lower-latin-in-diamond

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

lower-latin-in-triangle

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

lower-latin-forbidden

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

lower-latin-on-screen

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

lower-latin-on-key

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

Scientific (but Playful) Counter Style Templates

element-symbols

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

element-symbols-boxed

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

planets

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

solar-system

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

week-days

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

astronomic-months

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

months

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

astrologic-months

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth

zodiac

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
  7. Seventh
  8. Eighth
  9. Ninth
  10. Tenth
  11. Eleventh
  12. Twelfth