Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-values] mod() isn't needed #6637

Closed
nmoucht opened this issue Sep 18, 2021 · 4 comments
Closed

[css-values] mod() isn't needed #6637

nmoucht opened this issue Sep 18, 2021 · 4 comments

Comments

@nmoucht
Copy link

nmoucht commented Sep 18, 2021

We in WebKit have received feedback that having both mod() and rem() is confusing. This area is already confusing due to the mod operator % being named remainder in javascript, and by adding a mod() function (which shares a name with the name of an operator when it doesn't share its behavior), it complicates things even further. Also, the mod function that the spec dictates (https://drafts.csswg.org/css-values-4/#round-func) is a weird combination of multiple math functions that I don't believe exists in any language. When the input arguments have the same sign, mod() behaves as the C function fmod, and when they have different signs, it behaves as the C function remainder. There is no need to be more expressive than javascript, which only has the % operator, so there is no reason to have any additional functions for this beyond rem(). At the very least, mod() should be modeled after an existing math function, such as C's remainder, but it would be a better solution to remove mod() entirely to avoid confusion.

@xfq xfq added the css-values-4 Current Work label Sep 18, 2021
@Loirooriol
Copy link
Contributor

The problem is that %/rem() usually sucks for negative numbers. See https://stackoverflow.com/questions/1082917/mod-of-negative-number-is-melting-my-brain

@tabatkins
Copy link
Member

This area is already confusing due to the mod operator % being named remainder in javascript,

It's named that because that's what the operation it's performing is called, which is why CSS calls the function implementing that behavior rem(). ^_^ The modulus operation works the way mod() does.

A number of languages have one behavior or the other, and give the operation one name or the other; it's pretty inconsistent across programming languages. We did a survey of languages and mathematical resources, and figured that remainder/modulus was, overall, the most accepted pair of names.

Also, the mod function that the spec dictates (drafts.csswg.org/css-values-4/#round-func) is a weird combination of multiple math functions that I don't believe exists in any language.

I'm not sure what you mean - are you referring to the note at the end that explains how one can do mod() and rem() using only the other math functions? That's not the actual definition (it's an explanatory note), but also all of the operations used there are standard math functions: arithmetic, "round down" (floor), "round to zero" (truncate) and sign. C and JS both have all of these.

There is no need to be more expressive than javascript, which only has the % operator, so there is no reason to have any additional functions for this beyond rem().

As Oriol said (and the spec explains, in the note titled "Why Should I Choose mod() vs rem()?"), the "modulus" operation is the form of the operation that's taught in math classes when learning about modular arithmetic, and is generally more useful and intuitive to people. JS's use of the remainder operation for % (to match C/Java/etc) is a source of perennial confusion for script authors, and commonly necessitates the annoying ((val % N) + N) % N sequence to actually get the "modulus" behavior that people want.

Wikipedia goes into (as usual for math articles) too much detail about this, but at least the "Common Pitfalls" section is short and sweet, illustrating the issue we're trying to avoid by recommending people generally use mod().

@fantasai
Copy link
Collaborator

@tabatkins
Copy link
Member

Assuming that this response was sufficient, so closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants