w3c / predefined-counter-styles

Predefined Counter Styles
https://w3c.github.io/predefined-counter-styles/
Other
7 stars 14 forks source link

Add legacy Chrome styles #31

Closed r12a closed 3 years ago

r12a commented 3 years ago

The following styles are non-standard counter styles supported by Chrome. They should be added to the document.

@counter-style ethiopic-halehame {
  system: alphabetic;
  symbols: '\1200' '\1208' '\1210' '\1218' '\1220' '\1228' '\1230' '\1240' '\1260' '\1270' '\1280' '\1290' '\12A0' '\12A8' '\12C8' '\12D0' '\12D8' '\12E8' '\12F0' '\1308' '\1320' '\1330' '\1338' '\1340' '\1348' '\1350';
  suffix: '\1366 ';
}
@counter-style ethiopic-halehame-am {
  system: alphabetic;
  symbols: '\1200' '\1208' '\1210' '\1218' '\1220' '\1228' '\1230' '\1238' '\1240' '\1260' '\1270' '\1278' '\1280' '\1290' '\1298' '\12A0' '\12A8' '\12B8' '\12C8' '\12D0' '\12D8' '\12E0' '\12E8' '\12F0' '\1300' '\1308' '\1320' '\1328' '\1330' '\1338' '\1340' '\1348' '\1350';
  suffix: '\1366 ';
}
@counter-style ethiopic-halehame-ti-er {
  system: alphabetic;
  symbols: '\1200' '\1208' '\1210' '\1218' '\1228' '\1230' '\1238' '\1240' '\1250' '\1260' '\1270' '\1278' '\1290' '\1298' '\12A0' '\12A8' '\12B8' '\12C8' '\12D0' '\12D8' '\12E0' '\12E8' '\12F0' '\1300' '\1308' '\1320' '\1328' '\1330' '\1338' '\1348' '\1350';
  suffix: '\1366 ';
}
@counter-style ethiopic-halehame-ti-et {
  system: alphabetic;
  symbols: '\1200' '\1208' '\1210' '\1218' '\1220' '\1228' '\1230' '\1238' '\1240' '\1250' '\1260' '\1270' '\1278' '\1280' '\1290' '\1298' '\12A0' '\12A8' '\12B8' '\12C8' '\12D0' '\12D8' '\12E0' '\12E8' '\12F0' '\1300' '\1308' '\1320' '\1328' '\1330' '\1338' '\1340' '\1348' '\1350';
  suffix: '\1366 ';
}
@counter-style hangul {
  system: alphabetic;
  symbols: '\AC00' '\B098' '\B2E4' '\B77C' '\B9C8' '\BC14' '\C0AC' '\C544' '\C790' '\CC28' '\CE74' '\D0C0' '\D30C' '\D558';
}
@counter-style hangul-consonant {
  system: alphabetic;
  symbols: '\3131' '\3134' '\3137' '\3139' '\3141' '\3142' '\3145' '\3147' '\3148' '\314A' '\314B' '\314C' '\314D' '\314E';
}
@counter-style urdu {
  system: extends persian;
}

Source is https://chromium.googlesource.com/chromium/src/+/2414b7d5dfb36d3e747aefa2d842e1e9133dc0bf/third_party/blink/renderer/core/css/predefined_counter_styles.css

xfq commented 3 years ago

Are we going to add these to the relevant sections (Ethiopic, Korean (Hangul), Urdu (Arabic?))?

Or should we add a new section for all vendor-specific experimental/nonstandard styles?

r12a commented 3 years ago

My plan was to add to the appropriate sections – otherwise it gets complicated because it's hard to draw the line between vendor-specific and not. It also makes it easier to find them, if you're looking for alternatives for a given language/script. I was, however, planning to add notes to the sections mentioning that native support for these appears to be Chrome specific, although i've yet to test them on other browsers.

r12a commented 3 years ago

Here are interactive tests for each of the styles above. In each case, we are testing whether the browser recognises the style name when used in list-style-type: <style_name>, ie. whether the browser has built-in support for that name. Only Blink does.

I will, nonetheless, add these styles to the Ready-made Counter-styles document, since some people may want to use them on other browsers.

ethiopic-halehame https://w3c.github.io/i18n-tests/exploratory/vanilla?text=%3Cstyle%3E%0Aol%20%7B%20padding%3A%200%202em%3B%20list-style-type%3A%20ethiopic-halehame-am%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Col%3E%0A%3Cli%3Eone%3C%2Fli%3E%0A%3Cli%3Etwo%3C%2Fli%3E%0A%3Cli%3Ethree%3C%2Fli%3E%0A%3Cli%3Efour%3C%2Fli%3E%0A%3Cli%3Efive%3C%2Fli%3E%0A%3Cli%3Esix%3C%2Fli%3E%0A%3Cli%3Eseven%3C%2Fli%3E%0A%3Cli%3Eeight%3C%2Fli%3E%0A%3C%2Fol%3E&fontSize=36&width=500&height=500 Supported on: Chrome only

ethiopic-halehame-am https://w3c.github.io/i18n-tests/exploratory/vanilla?text=%3Cstyle%3E%0Aol%20%7B%20padding%3A%200%202em%3B%20list-style-type%3A%20ethiopic-halehame-am%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Col%3E%0A%3Cli%3Eone%3C%2Fli%3E%0A%3Cli%3Etwo%3C%2Fli%3E%0A%3Cli%3Ethree%3C%2Fli%3E%0A%3Cli%3Efour%3C%2Fli%3E%0A%3Cli%3Efive%3C%2Fli%3E%0A%3Cli%3Esix%3C%2Fli%3E%0A%3Cli%3Eseven%3C%2Fli%3E%0A%3Cli%3Eeight%3C%2Fli%3E%0A%3C%2Fol%3E&fontSize=36&width=500&height=500 Supported on: Chrome only

ethiopic-halehame-ti-er https://w3c.github.io/i18n-tests/exploratory/vanilla?text=%3Cstyle%3E%0Aol%20%7B%20padding%3A%200%202em%3B%20list-style-type%3A%20ethiopic-halehame-ti-er%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Col%3E%0A%3Cli%3Eone%3C%2Fli%3E%0A%3Cli%3Etwo%3C%2Fli%3E%0A%3Cli%3Ethree%3C%2Fli%3E%0A%3Cli%3Efour%3C%2Fli%3E%0A%3Cli%3Efive%3C%2Fli%3E%0A%3Cli%3Esix%3C%2Fli%3E%0A%3Cli%3Eseven%3C%2Fli%3E%0A%3Cli%3Eeight%3C%2Fli%3E%0A%3C%2Fol%3E&fontSize=36&width=500&height=500 Supported on: Chrome & Safari

ethiopic-halehame-ti-et https://w3c.github.io/i18n-tests/exploratory/vanilla?text=%3Cstyle%3E%0Aol%20%7B%20padding%3A%200%202em%3B%20list-style-type%3A%20ethiopic-halehame-ti-et%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Col%3E%0A%3Cli%3Eone%3C%2Fli%3E%0A%3Cli%3Etwo%3C%2Fli%3E%0A%3Cli%3Ethree%3C%2Fli%3E%0A%3Cli%3Efour%3C%2Fli%3E%0A%3Cli%3Efive%3C%2Fli%3E%0A%3Cli%3Esix%3C%2Fli%3E%0A%3Cli%3Eseven%3C%2Fli%3E%0A%3Cli%3Eeight%3C%2Fli%3E%0A%3C%2Fol%3E&fontSize=36&width=500&height=500 Supported on: Chrome & Safari

hangul https://w3c.github.io/i18n-tests/exploratory/vanilla?text=%3Cstyle%3E%0Aol%20%7B%20padding%3A%200%202em%3B%20list-style-type%3A%20hangul%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Col%3E%0A%3Cli%3Eone%3C%2Fli%3E%0A%3Cli%3Etwo%3C%2Fli%3E%0A%3Cli%3Ethree%3C%2Fli%3E%0A%3Cli%3Efour%3C%2Fli%3E%0A%3Cli%3Efive%3C%2Fli%3E%0A%3Cli%3Esix%3C%2Fli%3E%0A%3Cli%3Eseven%3C%2Fli%3E%0A%3Cli%3Eeight%3C%2Fli%3E%0A%3C%2Fol%3E&fontSize=36&width=500&height=500 Supported on: Chrome & Safari

hangul-consonant https://w3c.github.io/i18n-tests/exploratory/vanilla?text=%3Cstyle%3E%0Aol%20%7B%20padding%3A%200%202em%3B%20list-style-type%3A%20hangul-consonant%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Col%3E%0A%3Cli%3Eone%3C%2Fli%3E%0A%3Cli%3Etwo%3C%2Fli%3E%0A%3Cli%3Ethree%3C%2Fli%3E%0A%3Cli%3Efour%3C%2Fli%3E%0A%3Cli%3Efive%3C%2Fli%3E%0A%3Cli%3Esix%3C%2Fli%3E%0A%3Cli%3Eseven%3C%2Fli%3E%0A%3Cli%3Eeight%3C%2Fli%3E%0A%3C%2Fol%3E&fontSize=36&width=500&height=500 Supported on: Chrome & Safari

urdu https://w3c.github.io/i18n-tests/exploratory/vanilla?text=%3Cstyle%3E%0Aol%20%7B%20padding%3A%200%202em%3B%20list-style-type%3A%20urdu%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Col%3E%0A%3Cli%3Eone%3C%2Fli%3E%0A%3Cli%3Etwo%3C%2Fli%3E%0A%3Cli%3Ethree%3C%2Fli%3E%0A%3Cli%3Efour%3C%2Fli%3E%0A%3Cli%3Efive%3C%2Fli%3E%0A%3Cli%3Esix%3C%2Fli%3E%0A%3Cli%3Eseven%3C%2Fli%3E%0A%3Cli%3Eeight%3C%2Fli%3E%0A%3C%2Fol%3E&fontSize=36&width=500&height=500 Supported on: Chrome & Safari

r12a commented 3 years ago

Fixed by https://github.com/w3c/predefined-counter-styles/pull/43#event-4859838239