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

On May 22, 2014, at 12:44 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Wed, May 21, 2014 at 1:22 AM, James Craig <jcraig@apple.com> wrote:
>>> On May 19, 2014, at 11:18 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>>> If you want to provide "alt text" for the 'symbols' values,
>>> instead make a separate counter style with the words you want in
>>> 'symbols' and "speak-as: words", then set "speak-as:
>>> your-spoken-style;" in the real counter style.  Xidorn provided
>>> several examples of this.
>> 
>> This strikes me as somewhat convoluted, but mostly sufficient.
>> 
>> One question I didn’t see answered (apologies if I missed it) was whether one could apply the lang selector to a counter style. For example, I want (>/<) symbols displayed in all locales, but I want the alt text (input/output) localized.
>> 
>> If I’m reading Tab’s summary correctly, we’d have to have duplicate symbolic counter styles in order to use the localized speak-as value.
>> 
>> @counter-style symbols-de { speak-as:  alt-de; }
>> @counter-style symbols-en { speak-as:  alt-en; }
>> @counter-style symbols-es { speak-as:  alt-es; }
>> 
>> Is that the intention?
> 
> Yes.

No one will use this technique. It would mean at least three blocks per language per list type, purely for the purposes of localizing alt text. In reality, most major products localize in dozens of languages, if not more. The following example demonstrates the minimum required CSS to localize in only three (3) languages: English, Spanish, and German. Let's use the i/o example again. 

Markup:

  <ul class="io">
    <li>2+2</li>
    <li>4</li>
  </ul>

To recap, we want the console input/output list to visually display as:

  ⋗ 2+2
  ⋖ 4

And be spoken as:

  Input:  2+2
  Output: 4

In order to localize the previous lists using the techniques outlined in this thread, this is the minimum amount of CSS required.

  /* First set of blocks to point each list to the language-specific symbolic, but not yet textual, 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; }
  
  /* Shared counter style properties for the symbolic counter. */
  @counter-style io-en,
  @counter-style io-es,
  @counter-style io-de {
    system: cyclic;
    symbols: '⋗' '⋖';
  }
  
  /* Second set of blocks so the language-specific symbolic counters */
  /* can point to their language-specific textual counterparts. */
  @counter-style io-en { speak-as: io-alt-en; }
  @counter-style io-en { speak-as: io-alt-es; }
  @counter-style io-en { speak-as: io-alt-de; }
  
  /* Shared counter styles for the textual (alt text) spoken counter styles. */
  @counter-style io-alt-en,
  @counter-style io-alt-es,
  @counter-style io-alt-de {
    system: cyclic; 
    speak-as: words;
  }
  
  /* Finally, a third set of blocks for localized 'alt' text. */
  @counter-style io-alt-en { symbols: 'Input: ' 'Output: '; }
  @counter-style io-alt-es { symbols: 'Entrada: ' 'Salida: '; } 
  @counter-style io-alt-de { symbols: 'Eingang: ' 'Ausgang: '; }

If you're really saying the above is the minimum necessary, I'd respectfully ask the CSS WG to try harder to come up with a better solution.

Here's a variant of my original 'alt' proposal again, adding the :lang() selector applied to the counter styles. This example is one-third the size of the previous, and only requires one additional line of CSS per localization. It's also easier to read, more likely to be implemented by browsers, and *much* more likely to be understood and used by web authors. 

  ul.io { counter-style: io; }

  @counter-style io {
    system: cyclic;
    symbols: '⋗' '⋖';
    speak-as: alt; /* speak-as could be implicit if alt is defined. */
    alt: 'Input: ' 'Output: ';
  }
  @counter-style io:lang(es) { alt: 'Entrada: ' 'Salida: '; } 
  @counter-style io:lang(de) { alt: 'Eingang: ' 'Ausgang: '; }

Thoughts?
James

Received on Thursday, 22 May 2014 09:09:39 UTC