- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Wed, 27 Feb 2019 19:09:04 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed `trig`. <details><summary>The full IRC log of that discussion</summary> <astearns> topic: trig<br> <astearns> github: https://github.com/w3c/csswg-drafts/issues/2331<br> <fantasai> leaverou: We should keep it cos()/sin() maybe tan() and only accept angle<br> <chris> atan2 though, surely<br> <fantasai> leaverou: That would solve all the usecase I listed<br> <fantasai> AmeliaBR: So initial proposal is to add simple trig functions in calc()<br> <fantasai> AmeliaBR: Once you start doing graphical layouts involving arcs and stuff, you need trig functions to convert from width/height distances to angular distances<br> <leaverou> s/That would solve all the usecase I listed/That would solve all the use cases listed in the issue/<br> <fantasai> AmeliaBR: Currently to do this you either have to do it either in a preprocessor, or if in dynamic variables have to do it in JS<br> <fantasai> AmeliaBR: which is a pain<br> <fantasai> AmeliaBR: JS only take radians, SVG only takes degrees, etc.<br> <fantasai> AmeliaBR: Let's just do it in CSS which has everything<br> <fantasai> AmeliaBR: I'd also like to get the arc functions<br> <dbaron> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math might be an interesting source...<br> <fantasai> AmeliaBR: CSS lengths, calculate angles, woudl be great<br> <fantasai> AmeliaBR: You can't get a diagonal across the veiwport e.g. without this<br> <fantasai> TabAtkins: There's a demo of the Taylor expansion of sin() using stacked variable :)<br> <tantek> +1 dbaron get your trig funcs from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math<br> <fantasai> leaverou: There's lots of examples of usage<br> <fantasai> AmeliaBR: I asked anatudor about it the other day<br> <leaverou> s/There's lots of examples of usage/We can look at preprocessors for usage stats, they've been supporting trig functions for years/<br> <fantasai> AmeliaBR: <quotes anatudor><br> <fantasai> TabAtkins: Very useful for transforms<br> <fantasai> myles__: People are doing this already to day, and implementation burden is close to trivial<br> <fantasai> myles__: If doing arc, maybe also want atan, but probably just those<br> <fantasai> chris: atan2 deals with that<br> <fantasai> TabAtkins: ...<br> <fantasai> dbaron: Only add functions that are on the JS math object? Not all of them, but a subset.<br> <fantasai> fantasai_: atan2?<br> <fantasai> AmeliaBR: [explains the theory of atan]<br> <TabAtkins> s/.../someone asked for hypot(), rather than having to do calc(sqrt(var(--x) * var(--x) + var(--y) * var(--y))/<br> <fantasai> dbaron: If you have x and y coords on a graph, you typically want the tangent of y over x<br> <fantasai> dbaron: if you have x=1 y=1 you're in Q1, i fyou're x=-1 x=-1 your'e in Q3<br> <fantasai> dbaron: atan(x/y) gives you Q1 always. atan2() let's you get 270deg<br> <dbaron> s/x\/y/y\/x/<br> <fantasai> myles__: so we gonna resolve on a list of functions?<br> <fantasai> TabAtkins: resolve on a small list, and then maybe do more research to see if anything else needed<br> <fantasai> TabAtkins: but can resolve on basic trigs right now<br> <myles__> Sin() cos() tan() acos() asin() atan() atan2()<br> <fantasai> emilio: angles calc...<br> <fantasai> emilio: Don't want sin(calc(10px + 20%))<br> <AmeliaBR> and probably hypot(), sqrt(), and pow()<br> <fantasai> emilio: what is the type of these functions?<br> <fantasai> TabAtkins: I think the output is always numbers<br> <fantasai> TabAtkins: radians are numbers<br> <fantasai> fantasai_: not in CSS<br> <fantasai> TabAtkins: Right. Inverse ones do need to return <angle><br> <cbiesinger> q+<br> <fantasai> TabAtkins: others return <number><br> <dbaron> sin() cos() tan() take an <angle> or a <number> (radians) and return a number<br> <dbaron> asin() acos() atan() atan2() take a <number> (or 2, for atan2) and return an angle<br> <fantasai_> chris: Surely you can do atan2(20px, 4em) lengths in general<br> <fantasai_> ?: Yes, of course<br> <fantasai_> leaverou: ...<br> <xfq> ack cbiesinger<br> <fantasai_> cbiesinger: You suggested that radians can be an input, but without a pi constant how do you type that in a CSS style sheet?<br> <dholbert> s/.../in theory we can divide lengths and get numbers in CSS, but no browser supports that yet/<br> <fantasai_> TabAtkins: Use the turn unit. 0.5turn = pi<br> <fantasai_> AmeliaBR: We don't radians much in CSS because we have better units<br> <leaverou> s/leaverou: .../leaverou: (to Chris) yes, CSS in theory supports dividing lengths and it gives you a number. In practice, no UA supports this yet/<br> <fantasai_> AmeliaBR: But if you're calcuating it somewhere else, we can bring it in<br> <dbaron> so atan2(<number>, <number>) or atan2(<length>, <length>) ?<br> <fantasai_> TabAtkins: This is why I want to accept numbers (meaning radians) in addition to <angle><br> <fantasai_> myles__: So atan2() will accept lenghts and numbers?<br> <fantasai_> TabAtkins: Yes<br> <fantasai_> myles__: atan2(10px, 5) ?<br> <fantasai_> TabAtkins: No, type has to match<br> <fantasai_> dbaron: [repeats what's above]<br> <fantasai_> dbaron: sin() cos() tan() take an <angle> or a <number> (radians) and return a number<br> <leaverou> atan2(calc(45deg * 1px), 1em)?<br> <fantasai_> dbaron: asin() acos() atan() atan2() take a <number> (or 2, for atan2) and return an<br> <fantasai_> angle<br> <fantasai_> AmeliaBR: ...<br> <fantasai_> TabAtkins: Unit division calc() should be implemented.<br> <dbaron> s/.../We need people to implement unit division in calc() so that people can use that as an argument to asin() and acos()/<br> <fantasai_> astearns: OK, I think we can resolve to add these things<br> <fantasai_> astearns: Objections to dbaron's proposal?<br> <fantasai_> TabAtkins: I think the 10 from dbaron and emilio are good<br> <emilio> s/emilio/AmeliaBR<br> <fantasai_> TabAtkins: hypot() sqrt() and ?<br> <florian> s/?/powe/<br> <florian> s/?/pow/<br> <xfq> sin() cos() tan() acos() asin() atan() atan2() hypot() sqrt() pow()<br> <fantasai_> TabAtkins: They would not adjust the unit, just multiply the magnitude<br> <fantasai_> fremy: Can you use these directly, or has to be inside calc()<br> <fantasai_> TabAtkins: Both<br> <fantasai_> [discussion of edits]<br> <fantasai_> fantasai: pow() is exponents, right? we don't want to use the ^ notation?<br> <fantasai_> TabAtkins: JS uses **, others use ^, but everyone's function is called pow()<br> <fantasai_> AmeliaBR: If you multiply two lengths together you still get a single-dimension length?<br> <fantasai_> TabAtkins: Multiplying two lengths would give you squared unit, but pow() and sqrt() wouldn't<br> <fantasai_> AmeliaBR points out inconsitency of this<br> <tantek> +1 pow() http://php.net/manual/en/function.pow.php<br> <fantasai_> TabAtkins: So maybe pow() and sqrt() should only take numbers<br> <fantasai_> ...<br> <fantasai_> myles__: If you pow(3.5, 4.7) what's the dimension in CSS?<br> <tantek> do we need a unit(number, unit-name) function?<br> <fantasai_> TabAtkins: Maybe go back to pow() and sqrt() only accept numbers.<br> <fantasai_> AmeliaBR: and hypot() makes it easier to deal with the most common case<br> <fantasai_> TabAtkins: Good argument to keep hypot()<br> <fantasai_> AmeliaBR: So I could draft this up?<br> <fantasai_> fantasai: Would be edits to css-values-4<br> <fantasai_> AmeliaBR: Matter of 1-2 days of writing things up now that we've hashed this out<br> </details> -- GitHub Notification of comment by css-meeting-bot Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2331#issuecomment-467990627 using your GitHub account
Received on Wednesday, 27 February 2019 19:09:06 UTC