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

On 22 May 2014 10:54, Xidorn Quan <quanxunzhen@gmail.com> wrote:
> 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.

You may want different systems depending on the language, a complex
counter-style chain to handle language rules, or describe CSS4 Counter
Styles or later features (e.g. for spoken numbers). You may even want
a custom prefix/suffix/negative value per language. Thus, it makes
more sense to group the items per-language on a top-level counter
style at-rule.

Thanks,
- Reece H. Dunn

Received on Thursday, 22 May 2014 10:05:33 UTC