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

On Thu, May 22, 2014 at 7:09 PM, James Craig <jcraig@apple.com> wrote:

> 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?


The usecase sounds reasonable, but I don't think it is a good idea to mix
selector with custom-ident, and make the at-rule inheritable.

I think a good approach might be making 'symbols' and 'additive-symbols' be
language-aware. It makes more sense considering that counter representation
itself may need to support different language as well. Though, I have no
idea about how can we define the syntax.

- Xidorn