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

On 22 May 2014 10:09, 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?

I like this use of lang() as it allows the user to focus
pronunciation. However, I like speak-as pointing to a counter-style as
that offfers the most flexibility (speak these as a number, etc.).

So your example would be:

>   ul.io { counter-style: io; }
>
>   @counter-style io {
>     system: cyclic;
>     symbols: '⋗' '⋖';
>     speak-as: io-spoken;
>   }
>   @counter-style io-spoken { system: cyclic; }
>   @counter-style io-spoken:lang(es) { symbols: 'Entrada: ' 'Salida: '; }
>   @counter-style io-spoken:lang(de) { symbols: 'Eingang: ' 'Ausgang: '; }

NOTE: I view these as out-of-scope for CSS3 Counter Styles (and thus
applicable for CSS4 Counter Styles) [1]:

1.  Language selection/language-specific items for counter-styles (as
in e.g. the io-spoken example above). -- This would require lang() to
be applicable on at-rules.

2.  Treat word-based items as space separated (otherwise people
writing the styles would need to ).

3.  Masculine, feminine and neuter word forms (e.g. ein/eine/eins and
der/die/das in German).

4.  Morphology of words depending on context (maybe need to express as
additive system rules) -- e.g. in Irish Gaelic 2 = " a dó", 100 =
"céad" and 200 = "dhá chéad".

5.  Spoken numbers tend to be more complex than what is provided by
additive rules (e.g. counting in German, Czech and Irish Gaelic).

6.  Plural forms.

Also, w.r.t. a11y support, is url(bullet.wav) allowed for symbols,
negative, suffix, etc. (e.g. like the url(white.svg) example)? -- This
would allow "speak-as: bullet" to be implemented as a counter-style.
Should this be an example at that point in the spec?

[1] The CSS3 Counter Styles are capable of describing the current CSS2
list styles in a well-defined manner, while supporting more styles to
be created. The exception here is for the Complex Predefined Counter
Styles, but these are described in the spec and really need spoken
number rules to work (e.g. speaking 123 as "one hundred and twenty
three"). Also, the Korean number system splits the numbers into groups
of 4, ethiopic inot groups of 2 and the others into groups of 3.

Thanks,
- Reece H. Dunn

Received on Thursday, 22 May 2014 09:58:35 UTC