[CSSWG] Minutes San Francisco F2F 2019-02-27 Part II: Values [css-values]

=========================================
  These are the official CSSWG minutes.
  Unless you're correcting the minutes,
 Please respond by starting a new thread
   with an appropriate subject line.
=========================================


Values
------

  - RESOLVED: Work on a string-coercion-and-concatenation function
              (Issue #542: string concatenation)
      - A non-binding twitter poll was put together to gather feedback
          on possible names:
https://twitter.com/tabatkins/status/1100838423248551936?s=20
  - RESOLVED: Add a new url function that accepts only <string>, name
              tbd (Issue #451: Add url() alias that does not accept
              unquoted URLs)
  - RESOLVED: Add sin() cos() tan() acos() asin() atan() atan2()
              hypot() sqrt() pow() (Issue #2331: Trigonometric
              functions)

===== FULL MINUTES BELOW ======

Agenda: https://wiki.csswg.org/planning/sf-2019

Scribe: fantasai

Values
======

String Concatenation
--------------------
  github: https://github.com/w3c/csswg-drafts/issues/542

  leaverou: There's a bunch of string value accepting properties in
             CSS, and can't use variables in there
  leaverou: paths
  leaverou: Lots of places where concatenation would be useful
  leaverou: and don't have a way to do it
  leaverou: Didn't recall any objections to the proposal, just
            questions about what it's called
  leaverou: I don't care, we just need a way to do it
  <fremy> big +1 from me
  chris: People using preprocessors take string concatenation for
         granted, it's simple there
  chris: They're astounded when they find it's not available in raw CSS
  leaverou: Primarily useful in URLs, but also useful in other places
            like paths

  TabAtkins: I agree with the need for a function here, prefer
             concat() but fine with anything else
  leaverou: We've also had suggestions for a function that converts
            things to strings,
  leaverou: text() is generic enough to do both
  <fantasai> string() sgtm

  AmeliaBR: Problem with that is that for string coercion you often
            also want number formatting
  AmeliaBR: so that might need to be a separate function
  AmeliaBR: but would need to be part of the system if you are going
            to make useful path data from numeric variables
  AmeliaBR: Need to concatenate not just letters but numbers from
            variables, calc() expressions, etc.
  TabAtkins: What are the use cases for coercion? Debugging obviously,
             anything else?
  leaverou: Generated content to display a variable value in the UI
  AmeliaBR: e.g. bar graphs, want to use value in drawing but also
            labeling
  AmeliaBR: Don't want to duplicate content
  TabAtkins: I really don't want to get into string formatting
  TabAtkins: Otherwise do see the value in do see value in displaying
             50% on bar chart while 50% also used to size the bar chart
  AmeliaBR: So if we want to leave the generic number formatting issue
            for later, that's fine
  AmeliaBR: So long as we still have idea that basic concat function
            can take non-string values and simply print them out
  AmeliaBR: so you can use them for path data
  AmeliaBR: In path data you generally want to preserve maximum
            precision anyway
  leaverou: Yes, that simplifies interpolation as well, if types of
            arguments were not coerced we'd need to define
            interpolation between two concat() calls
  leaverou: Don't want to define how concat() interpolates with each
            other

  dbaron: Reading the proposal wasn't clear to me what the inputs of
          this function is and what the output is in terms of types
  dbaron: What CSS value types can be used in here?
  TabAtkins: Output type is string
  TabAtkins: Input type is anything, standard serialization of the
             token
  dbaron: There will be a spec defining standard serialization of a
          token?
  TabAtkins: Need that for variables anyway
  TabAtkins: If it doesn't exist yet, some other spec is implicitly
             relying on it and it needs to be defined

  astearns: Wrt where used, it's anywhere with a string?
  fremy: Exception for url?
  TabAtkins: No, url() can take only a literal string, there's another
             issue for generic <string> input
  <fremy> (to clarify what tab said, url() can take a string but not a
          <string>)
  <TabAtkins> (It's specific as taking a <string> in the syntax, but
              in Syntax we handle url() in special ways that prevent
              it from taking string-producing functions.)

  astearns: I'm hearing lots of nods on having this thing. Any
            implementer interest?
  astearns: From silence sounds like, yes this would be a good thing,
            no it's not a priority

  emilio: Expectation is that you can do like sth(var(--whatev))?
  emilio: Then how can you define it to be any token?
  TabAtkins: var() is processed at a higher level than any value
  fremy: If you want a string, you do text("string")
  emilio: If it takes any token
  fremy: If it's not a string, then you convert
  TabAtkins: I think Emilio got it
  <xfq> like macro expansion

  astearns: OK, naming. What do we call the thing?
  AmeliaBR: Lea suggested text(), but there's already a text()
            function in paged content
  fantasai: How about string? was in Lea's original proposal
  leaverou: Sounds fine
  chris: Sounds fine
  <chris> I care more that it exists, than what precisely it is called
  AmeliaBR: Sorry, confused things. It's the string() function that
            exists, text() does not
  AmeliaBR: and already implemented
  <xfq> https://drafts.csswg.org/css-gcpm-3/#using-named-strings
  * bdc thinks text() is suspiciously generic

  astearns: Any objections to text()?
  <chris> Lets go with text
  dydz: Prefer concat(), but ...
  <Rossen> combine()
  AmeliaBR: Want names that are understandable by non-programmers
            in CSS
  AmeliaBR: Also, we tend not to truncate identifiers in CSS
  <chris> concat is not immediately obvious to non programmers either.
          both cat and concat are abbreviations
  <tantek> I for one am all for the cat() function, I bet it would
           poll well on Twitter 😺
  TabAtkins: We are not using cat(), tantek!
  bkardell: I don't have a better suggestion, but text() is not very
            clear to me
  <Rossen> +1 to bkardell
  bkardell: There are so many ways that I could interpret "text"
  <tantek> +1 to bkardell
  chris: I think it's pretty clear

  myles: We should think about whether concatenation or coercion is
         more common use case
  AmeliaBR: text() is clear for coercion, maybe less clear for
            concatenation
  iank: Spreadsheets use concatenate and concat
  TabAtkins: It's terrible and hard to spell
  [Lots of IRC joke suggestions]
  <bkardell> actually to-string and stringify both seem more intuitive
             to me but it's very possible I am not at all the norm and
             am happy to be wrong

  TabAtkins: These are all great names, except for all the ones that
             are bad.
  <chris> https://developer.mozilla.org/en-US/docs/Web/XPath/Functions/concat
  TabAtkins: Let's table this and put together a non-binding Twitter
             poll
  florian: Make sure you include an international audience
  bkardell: That works best if we all promote it so let us know
  leaverou: Twitter doesn't have enough space for examples, and based
            on what examples you use can get different reactions
  TabAtkins: I'll put together coercion example and concat example,
             and you can review them
  astearns: Sounds like we'll do this and decide the name later, would
            be interested in implementer interest
  astearns: Any objections?

  RESOLVED: Work on a string-coercion-and-concatenation function

  <AmeliaBR> Examples for Twitter poll: `content: NAME(
             var(--percentage)); background: url(NAME("/assets/img",
             var(--icon-name), ".svg"))`

Add url() alias that does not accept unquoted URLs
--------------------------------------------------
  github: https://github.com/w3c/csswg-drafts/issues/541

  leaverou: Right now people cannot use var() in url()
  leaverou: Reason being 1, we didn't have string concatenation
  leaverou: but even if we did, you cannot put any function inside
            url() because of its weird parsing rules
  leaverou: It has a lot of weird parsing, because of unquoted URLs
  leaverou: We were thinking we should have another url function that
            only accepts <string>
  * bkardell thinks that is an awesome idea
  TabAtkins: Right now if you write url(var()) it'll be invalid
  TabAtkins: Interpreted as a URL
  <leaverou> Right url(var(--foo)) doesn't work

  <florian> uri()
  <TabAtkins> florian , NO
  <florian> :D

  chris: We need a function that does stuff, I propose calling it
         fetch()
  <TabAtkins> fetch("http://example.com")
  emilio: It doesn't fetch anything though, only if it's loaded
  AmeliaBR: It's also a very JSy name and not very familiar to
            designers
  AmeliaBR: I would go with href()
  <chris> href() is nice actually
  astearns: fetch() should have all of fetch()'s semantics which it
            won't so let's stay away from that
  <florian> +1 to href()
  <bkardell> are there other things we could improve about the
             plumbing if it was fetch
  heycam: It might be nice to have a url function that uses relative
          URL rules rather than string concatenation
  <bkardell> like what heycam said, or something about CORs or SRI or
             something?
  leaverou: I think it would be useful to have a base argument, but it
            shouldn't be named after that feature, since there are
            many use cases where the default resolution is fine
  leaverou: Change the base URL
  <AmeliaBR> Would it work as a modifier? `url("base.png",
             relative("assets/images/")`?
  heycam: Similar but slightly different use case
  heycam: But if that did overlap, might indicate a name
  myles: Would such an addition make us not want to do this stringify
         concat thing also?
  chris: No, you need that generally. Just makes designing this easier
  leaverou: URL resolution is not the only reason you want concat in
            URLs, e.g. think of SVG data URLs with parameters in the
            SVG

  <florian> address()
  <fremy> +1 to address() from florian
  <Rossen> pointer()
  fremy: I like address()
  heycam: I don't like that it's synonymous with url()
  astearns: We actually want something that is basically better-URL,
            exact same semantics except working for all strings
  heycam: Are you expecting people to use it for
          non-string-interpolation cases?
  [yeah]
  <dbaron> either address() or location() is kinda synonymous with
           url()
  <florian> src()
  <fremy> dbaron yeah `location` is nice as well
  * fantasai likes src

  AmeliaBR: We also talked a few days ago about url() modifiers, I'm
            assuming we'll create modifiers on the better function?
  <chris< Amelia, yes I expect so
  <chris> we are very constrained in how we can evolve url()
  AmeliaBR: Any existing support for url modifiers?
  <fantasai> No
  AmeliaBR: So if we do modifiers, we can do it in the new function
  AmeliaBR: No progressive enhancement reason to add new features to a
            legacy function
  TabAtkins: No reason not to either
  chris: Incentive to move to the new one

  florian: If we want people to use it, then it needs to be a short
           name like url()
  florian: For familiar names we could re-use HTML attribute names
           like href() or src()
  <bkardell> src and href are 'strings' so that could be fairly
             unintuitive at least too
  dbaron: hypertext-reference?
  <AmeliaBR> changing my vote to src()
  <chris> src is nice and short

  astearns: From my reading of IRC, people like href() and src(),
            didn't see any other contenders that aren't silly
  <bkardell> fetch potentially wasn't silly imo
  dbaron: address() and location() seem OK too
  <leaverou> I'd vote for href() over src() because src: src(...)
             looks a bit weird (or maybe it doesn't?)
  <bkardell> agree with lea actually
  TabAtkins: I suggest polling later
  <bkardell> href() > src()
  <fantasai> since when do we have src property?
  <leaverou> fantasai: descriptor
  <myles> src descriptor, not property
  <chris> right, we have a src descriptor, which takes a url()
          currently

  RESOLVED: Add a new url function that accepts only <string>, name tbd

Trigonometric functions
-----------------------
  github: https://github.com/w3c/csswg-drafts/issues/2331

  leaverou: We should keep it cos()/sin() maybe tan() and only accept
            angle
  leaverou: That would solve all the use cases listed in the issue
  AmeliaBR: So initial proposal is to add simple trig functions in
            calc()
  AmeliaBR: Once you start doing graphical layouts involving arcs and
            stuff, you need trig functions to convert from width/
            height distances to angular distances
  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
  AmeliaBR: which is a pain
  AmeliaBR: JS only take radians, SVG only takes degrees, etc.
  AmeliaBR: Let's just do it in CSS which has everything
  AmeliaBR: I'd also like to get the arc functions
  AmeliaBR: CSS lengths, calculate angles, would be great
  AmeliaBR: You can't get a diagonal across the veiwport e.g. without
            this
  <dbaron> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
           might be an interesting source...
  <tantek> +1 dbaron get your trig funcs from
           https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
  TabAtkins: There's a demo of the Taylor expansion of sin() using
             stacked variable :)

  leaverou: We can look at preprocessors for usage stats, they've been
            supporting trig functions for years
  AmeliaBR: I asked an author about it the other day
  AmeliaBR: <quotes anatudor>
  TabAtkins: Very useful for transforms
  myles: People are doing this already today, and implementation
         burden is close to trivial
  myles: If doing arc, maybe also want atan, but probably just those
  chris: atan2 deals with that
  TabAtkins: Someone asked for hypot(), rather than having to do calc(
             sqrt(var(--x) * var(--x) + var(--y) * var(--y))
  dbaron: Only add functions that are on the JS math object? Not all
          of them, but a subset.
  fantasai: atan2?
  AmeliaBR: [explains the theory of atan]
  <fremy> fantasai atan2(a,b) = atan(a/b) with support infinity
  dbaron: If you have x and y coords on a graph, you typically want
          the tangent of y over x
  dbaron: if you have x=1 y=1 you're in Q1, if you're x=-1 x=-1 you're
          in Q3
  dbaron: atan(y/x) gives you Q1 always. atan2() let's you get 270deg
          because it takes y and x as separate arguments

  myles: So we gonna resolve on a list of functions?
  TabAtkins: Resolve on a small list, and then maybe do more research
             to see if anything else needed
  TabAtkins: but can resolve on basic trigs right now
  <myles> Sin() cos() tan() acos() asin() atan() atan2()
  <AmeliaBR> and probably hypot(), sqrt(), and pow()

  emilio: angles calc...
  emilio: Don't want sin(calc(10px + 20%))
  emilio: What is the type of these functions?
  TabAtkins: I think the output is always <number>s
  TabAtkins: Radians are numbers.
  fantasai: Not in CSS
  TabAtkins: Right. Inverse ones do need to return <angle>
  TabAtkins: Others return <number>
  <dbaron> sin() cos() tan() take an <angle> or a <number> (radians)
           and return a <number>
  <dbaron> asin() acos() atan() atan2() take a <number> (or 2, for
           atan2) and return an <angle>
  chris: Surely you can do atan2(20px, 4em) lengths in general
  ?: Yes, of course
  leaverou: (to Chris) yes, CSS in theory supports dividing lengths
            and it gives you a number. In practice, no UA supports
            this yet

  cbiesinger: You suggested that radians can be an input, but without
              a pi constant how do you type that in a CSS style sheet?
  TabAtkins: Use the turn unit. 0.5turn = pi
  AmeliaBR: We don't use radians much in CSS because we have better
            units
  AmeliaBR: But if you're calculating it somewhere else, we can bring
            it in
  <dbaron> so atan2(<number>, <number>) or atan2(<length>, <length>) ?
  TabAtkins: This is why I want to accept numbers (meaning radians) in
             addition to <angle>
  myles: So atan2() will accept lengths and numbers?
  TabAtkins: Yes
  myles: atan2(10px, 5) ?
  TabAtkins: No, type has to match
  <leaverou> atan2(calc(45deg * 1px), 1em)?

  dbaron: We need people to implement unit division in calc() so that
          people can use that as an argument to asin() and acos()
  dbaron: [repeats what's above]
  dbaron: sin() cos() tan() take an <angle> or a <number> (radians)
          and return a number
  dbaron: asin() acos() atan() atan2() take a <number> (or 2, for
          atan2) and return an angle
  TabAtkins: Unit division calc() should be implemented.
  astearns: OK, I think we can resolve to add these things
  astearns: Objections to dbaron's proposal?
  TabAtkins: I think the 10 from dbaron and AmeliaBR are good

  TabAtkins: hypot() sqrt() and pow()
  <xfq> sin() cos() tan() acos() asin() atan() atan2() hypot() sqrt()
        pow()
  TabAtkins: They would not adjust the unit, just multiply the
             magnitude
  fremy: Can you use these directly, or has to be inside calc()
  TabAtkins: Both

  [discussion of edits]
  fantasai: pow() is exponents, right? we don't want to use the ^
            notation?
  <leaverou> JS uses ** because ^ was taken (bitwise XOR)
  TabAtkins: JS uses **, others use ^, but everyone's function is
             called pow()
  <florian> Fortran uses ** too:
https://www.obliquity.com/computer/fortran/operate.html
  <tantek> +1 pow() http://php.net/manual/en/function.pow.php

  AmeliaBR: If you multiply two lengths together you still get a
            single-dimension length?
  TabAtkins: Multiplying two lengths would give you squared unit, but
             pow() and sqrt() wouldn't
  [AmeliaBR points out inconsistency of this]
  TabAtkins: So maybe pow() and sqrt() should only take numbers
  ...
  <tantek> do we need a unit(number, unit-name) function?
  myles: If you pow(3.5, 4.7) what's the dimension in CSS?
  TabAtkins: Maybe go back to pow() and sqrt() only accept numbers.
  AmeliaBR: and hypot() makes it easier to deal with the most common
            case
  TabAtkins: Good argument to keep hypot()

  AmeliaBR: So I could draft this up?
  fantasai: Would be edits to css-values-4
  AmeliaBR: Matter of 1-2 days of writing things up now that we've
            hashed this out

  RESOLVED: Add sin() cos() tan() acos() asin() atan() atan2() hypot()
            sqrt() pow()

Received on Thursday, 16 May 2019 22:56:06 UTC