counteraction

Implementations of most of the counter types supported by the list-style-type CSS property as well as the numbering systems allowed by @counter-style.

Many of the renderers are based on CLDR with the code generated by the cldr module (see extractRbnfFunctionByType).

Installation

npm install counteraction

Supported renderers

Simple list-style-type renderers (option-less):

• armenian
• decimal
• decimal-leading-zero
• ethiopic
• georgian
• hebrew
• lower-alpha
• lower-greek
• lower-latin
• lower-roman
• tamil
• upper-alpha
• upper-greek
• upper-latin
• upper-roman

These bogus ones are there for completeness:

• disc (renders a • regardless of the value)
• none (renders the empty string regardless of the value)

More complex @counter-system renderers:

• alphabetic
• additive
• cyclic
• fixed
• symbolic
• numeric

Example

The simple counter renderers are instantiated by their name and don't need any options:

const counteraction = require('counteraction');

const renderer = counteraction('lower-roman');
console.log(renderer.render(123)); // cxxiii

cxxiii

The @counter-system ones are created by their system name and accept an options object that corresponds to the CSS properties of the @counter-style declaration:

const renderer = counteraction('alphabetic', {
  symbols: ['X', 'Y', 'Z'],
});
console.log(renderer.render(123)); // XXXXZ

XXXXZ

The name (system) can also be passed as a separate property instead of the name parameter. That might be easier if you're working with a parsed representation of the whole @counter-style declaration:

const renderer = counteraction({
  system: 'alphabetic',
  symbols: ['X', 'Y', 'Z'],
});
console.log(renderer.render(123)); // XXXXZ

XXXXZ

They also support a fallback option to be used when the value is out of range. It can be passed as either a renderer instance or the name of a list-style-type renderer:

const renderer = counteraction('fixed', {
  symbols: ['X', 'Y', 'Z'],
  fallback: 'disc',
});
console.log(renderer.render(3)); // Z
console.log(renderer.render(4)); // •

Z
•

The fallback option can also be passed as another renderer instance, or "lazily" as a function that returns either a list-style-type name or a renderer.