Re: [css-counter-styles] allow use of CSS4 "alt" property with @counter-style/symbols

Tab Atkins Jr. <jackalmage@gmail.com> @ 2014-05-23:
> On Thu, May 22, 2014 at 2:09 AM, James Craig <jcraig@apple.com> wrote:
>>  <ul class="io">
>>    <li>2+2</li>
>>    <li>4</li>
>>  </ul>
>> 
>>  ⋗ 2+2
>>  ⋖ 4
>> 
>>  Input:  2+2
>>  Output: 4
> 
> /* Shared system for all the non-speak-as details of the counter style */
> @counter-style io { system: cyclic; symbols: '⋗' '⋖'; suffix: " "; }
> 
> /* Localized systems */
> @counter-style io-en { system: extends io; speak-as: io-en-spoken; }
> @counter-style io-es { system: extends io; speak-as: io-es-spoken; }
> @counter-style io-de { system: extends io; speak-as: io-de-spoken; }
> 
> /* Spoken systems */
> @counter-style io-en-spoken { system: cyclic; symbols: "Input: ",
> "Output: "; speak-as: words; }
> @counter-style io-es-spoken { system: cyclic; symbols: "Entrada: ",
> "Salida: "; speak-as: words; }
> @counter-style io-de-spoken { system: cyclic; symbols: "Eingang: ",
> "Ausgang: "; speak-as: words; }
> 
> /* Selectors to actually assign the counter styles */
> ul.io:lang(en) { counter-style: io-en; }
> ul.io:lang(es) { counter-style: io-es; }
> ul.io:lang(de) { counter-style: io-de; }

I’m not sure I completely understand the problem, but this looks saner:

  :root, /* default */
  :root:lang(en) {--input: "Input";   --output: "Output";}
  :root:lang(es) {--input: "Entrada"; --output: "Salida";}
  :root:lang(de) {--input: "Eingabe"; --output: "Ausgabe";}
  
  @counter-style io { 
    system: cyclic; 
    symbols: '⋗' '⋖'; 
    suffix: " "; 
    speak-as: io-spoken;
  }
  @counter-style io-spoken { 
    system: cyclic; 
    symbols: var(--input), var(--output); 
    suffix: ": ";
    speak-as: words;
  }
  ul.io { 
    counter-style: io; 
  }

Received on Monday, 7 July 2014 21:56:47 UTC