[css-font-4][varfont] hyphens or spaces

[frivoal]

We have the following syntax for the descriptors:

font-style: normal | italic | oblique [ <angle> | <angle>-<angle> ] ?

font-weight: normal | bold | [ <number> | <number>-<number> ]

font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | [ <percentage> | <percentage>-<percentage> ]

I am not convinced we need the hyphens. How about making the syntax lighter, and using spaces instead?

font-style: ... [ <angle> | <angle> <angle> ] ?

font-weight: ... [ <number> | <number> <number> ]

font-stretch: ... [ <percentage> | <percentage> <percentage> ]

[frivoal]

Sorry, forgot the link. This is currently defined there: https://drafts.csswg.org/css-fonts-4/#font-prop-desc

[litherum]

Hyphens are good because they describe a range. Spaces are not good because they look like a sequence of individual values.

[frivoal]

Not convinced that this is universal (e.g. Japan would typically rather go for ~ than for - to denote a range), but I'd agree it is understood commonly enough, so why not.

Do we have other things in CSS where we denote a range? I know of unicode ranges, which are their own syntactic mess, but that's due to the combination of - for range and hex numbers, not to - alone. Anything else?

[davelab6]

@graphicore did CPS denote ranges?

[litherum]

I just realized that using - as a separator means you could have something like:

font-style: oblique -20--10;

... which is quite yucky. Perhaps / is better.

[aaaxx]

How about an ellipsis (i.e., three dots)? They're already used for ranges in programming languages and surely make much more sense than a slash.

[tabatkins]

Please don't use hyphens to denote a range. They're more familiar in English, but they're hell for the CSS parser, which will happily parse "10%-20%" as PERCENT(10) PERCENT(-20). You're required to put a token-breaker (whitespace or comment) after the hyphen, and that requirement often isn't clear to authors.

Do not use a / - that's used for a specific purpose in CSS (separating two values who are otherwise grammatically undistinguishable). It's not used for decorative purposes.

We don't often add subsyntaxes for this sort of thing; we typically just let there be two values, and the meaning is inferred. If you really think it's unclear, use a keyword - <angle> [ to <angle> ]? is clear and has no parsing issues.

[litherum]

What are our options?

1. 10% - 20%
2. 10% 20%
3. 10% / 20%
4. 10% to 20%
5. ???

Out of the first three, I'm partial to option 2. But there may be other unexplored options.

[frivoal]

I prefer 2 (10% 20%), I'm ok with 4 (10% to 20%).

[litherum]

Let's do option 2.