- From: Dael Jackson <daelcss@gmail.com>
- Date: Thu, 16 May 2019 18:54:41 -0400
- To: www-style@w3.org
=========================================
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