- From: Dael Jackson <daelcss@gmail.com>
- Date: Tue, 15 Nov 2016 20:57:57 -0500
- To: www-style@w3.org
- Cc: public-digipub-ig@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. ========================================= Joint Meeting with DPUB (cont.) Regions proposal from Jen ========================= - Slides at https://speakerdeck.com/jensimmons/proposal-to-csswg-sept-2016 - Jensimmons presented a summary of some aggravations with CSS layout: * Lack of regions; except regions requires empty <div>s which is yucky * Inability to style empty grid cells * Inability to skip certain grid cells during auto-flow She suggested that these could all be solved by being able to address and set properties directly on particular grid areas. - It was noted that it was similar to (though not the same as) the @slot proposal, but there was now a use case that needed solving so the could be more momentum. - There was a concern about the developer want to attach event listeners to each region, but jensimmons thought this could be achieved by styling the region. - Another raised concern is how to handle content that doesn't fit in its assigned slot or when the slot is missing. - Some of these examples may be solvable by overflow:fragments and jensimmons will work up some examples. - In summary it was felt that this is problem-space is hard but worth solving. CSS Color: High Dynamic Range ============================= - This topic was to discover how do you define colors in CSS with colors that match the pixels in a video. - ChrisL volunteered to work with lrosenth in bringing a subset of ICCMax into CSS Color. ===== FULL MINUTES BELOW ====== Agenda: https://www.w3.org/dpub/IG/wiki/Detailed_TPAC_2016_Agenda#Meeting_with_CSS_WG and https://wiki.csswg.org/planning/tpac-2016#agenda Scribe: fantasai Regions proposal from Jen ------------------------- <gregwhitworth> https://speakerdeck.com/jensimmons/proposal-to-csswg-sept-2016 jensimmons [introduces self] [longtime designer] jensimmons: Wanted to talk about Regions spec and alternative, and how it ties to Grid. jensimmons: Grid is totally awesome. jensimmons: Can do responsive layout in one line of code. Thank you everybody. jensimmons: [shows cool examples] jensimmons: writing-modes, transform / rotate, etc. jensimmons: You can make Mondrian responsive. jensimmons: Auto-flows, let Grid handle math. jensimmons: Grid is fantastic if you have items and you want to place the items. jensimmons: Can do that traditional way, or do that by adding white space. jensimmons: But when it comes to long passages of text, still stuck with one giant column jensimmons: You can center it or right-align it jensimmons: Or break it up with some images jensimmons: But stuck with one long column. jensimmons: multicol is awesome... except [scroll up and down problem with 3 cols of text] jensimmons: We need some way to place items like this [arrows showing compex flow with short block, wide block, three cols, another spanning block, two col block] jensimmons: Or do rows of multicols. [multi cols in rows, each shorter than viewport] jensimmons: Could scroll-snap, but don't have to, jensimmons: Got regions spec. jensimmons: Regions spec works like this. [shows pile of empty divs, plus a few lines of CSS] jensimmons: Need a bunch of elements to use. jensimmons: You flow your actual content into a variables thing (named flow), then later you pull out into empty divs. jensimmons: Not in agreement about this, 'cuz have to use empty divs, add/subtract divs in JS. jensimmons: Been wondering can we do this in CSS alone? jensimmons: Obsessed with this question. jensimmons: I like this part (flow-into: foobar) jensimmons: Then see Grid, I see grid. jensimmons: We have layout we want in grid, but need to be able to flow things into / out of boxes. jensimmons: I think the solution to this is also solution to another problem. jensimmons: Other problem - jensimmons: Let's say you have a layout jensimmons: Title, figure, article, bio. jensimmons: Can lay these things out on to grid. jensimmons: What if you want to put a line down the column. jensimmons: What if you wanted a border down the full length? jensimmons: Could put a border on each item, but not on the edge of a grid, or edge of cells. jensimmons: Or here, got items with background colors... but what if I want to put a background on the cell? jensimmons: Want color blocking on the page, change it on responsive breakpoints? jensimmons: Grid doesn't have a way to style empty cells. jensimmons: Rachel Andrew says at every workshop, people ask how to style empty cells. <rachelandrew> I get asked the backgrounds and borders question re grid, pretty much every time (unprompted). jensimmons: Design like this [block borders between random things] can't do it jensimmons: or this [circle in the background; rectangle in the corner]. jensimmons: I know how to lay this out, but don't have anything to style. jensimmons: How do solve this right now? jensimmons: Add empty divs! jensimmons: I know how to do this... spacer gifs as <div>s [[[[RETURN OF THE SPACER GIFS]]]] jensimmons: Solution is to solve the problem you haven't realized we have yet. jensimmons: Trick of the thing is this: jensimmons: If I want to style an item on the grid, no problem: place the item, then style it with a color jensimmons: What I want to do is to take the thing inside the curly braces and put it outside the braces. jensimmons: grid: 3/1/4/2 { background: blue; } jensimmons: What else in CSS does this kind of thing? jensimmons: Animations does that, with @keyframes jensimmons: How about we do something like this? @region foobar { grid: 3 /1/4/2 } foobar { background:blue } jensimmons: Name the region, target it, and style it. jensimmons: Let's say we have multiple grid, maybe @region #grid-container foo bar { ... } jensimmons: or @grid-container:region(foobar) { ... } jensimmons: So in this example, place first three things. jensimmons: Next, create a color block. jensimmons: Whenever you use grid to explicitly place items jensimmons: OK jensimmons: But when using auto-placement, just get lots of rows of things jensimmons: Not a lot of ways to do creative things in that space. jensimmons: What if I wanted the item in the 2nd to last column tilt a bit. jensimmons: I always want that one tilted, however it auto-flows? jensimmons: Can do it with this design. jensimmons: Ability to style a place in the grid, not just an item in the grid. jensimmons: Another item on my running list of questions... jensimmons: I want to skip cells jensimmons: I want a bunch of holes in my grid: auto-flow, but skip these cells. jensimmons: Maybe reuse this syntax for that. jensimmons: How do you flow content through regions? jensimmons: So far can define a place on the grid, give it a name. jensimmons: Also saying to name a region chain. jensimmons: Looks like @region-chain .... { 1 { grid ... } 2 { ... } ... } jensimmons: Target a named area, target a region. jensimmons: This makes it possible to easily switch from one region chain to another at any break point. jensimmons: Named grid areas and named regions gets complicated. jensimmons: Have to rename grid areas every time you want to change your region flow. jensimmons: This complicates things and makes it harder. jensimmons: Name areas for styling the areas... but have the region chain be separate. jensimmons: Here are some examples: jensimmons: Here's a bunch of paragraphs jensimmons: Grid on my main element jensimmons: Region chain, I want these particular areas on the grid to be in the region chain. jensimmons: In this way as well, I could say text is bigger in this region jensimmons: Text is less in this other region. jensimmons: Here's all the code in one slide [10 lines of code] jensimmons: Another thing about it; jensimmons: You have mobile version, responsive bigger. jensimmons: Right now reordering wrt ads, etc is done by screwing up a11y jensimmons: Want to place ads in particular way. jensimmons: Here have content in <main>, but mix it with ads that are not in <main> jensimmons: Here I have two region chains. One is maincontent flow jensimmons: Another one is the adcontent flow jensimmons: Great to have ability to pull content from another part of the DOM for this case. jensimmons: Would be great to pull content from one place and pull it into grid in another part of the document. jensimmons: Also helps to solve CSS shapes. jensimmons: Can create multiple regions, and then pull content from one to another. jensimmons: Solves a lot of use cases of exclusions. jensimmons: A lot of things we want, thought of way off in the distance, could cover partially by this stuff. jensimmons: I do think there's a need to figure out how to do a repeat syntax jensimmons: e.g. want an unknown amount of regions. jensimmons: But maybe a way to do this jensimmons: So requires grid, using grid to do heavy lifting for layout sizing targeting, etc. jensimmons: Three things: ability to define a region in grid jensimmons: property for "skip me during auto flow" jensimmons: And then region chain Rossen: Thank you for presentation <rachelandrew> for some other background stuff, I did a bit of playing around with Grid + Regions as it keeps coming up as a possible answer to certain use cases https://rachelandrew.co.uk/archives/2016/03/25/css-grid-and-css-regions/ <rachelandrew> https://rachelandrew.co.uk/archives/2016/06/17/thinking-about-page-floats-figures-regions-and-grids/ demos in those posts. <ChrisL> twitter points me to https://blogs.igalia.com/mrego/2014/12/10/web-engines-hackfest-2014/ <ChrisL> "On the other hand, I’ve been talking with Mihnea Ovidenie about CSS Regions and how CSS Grid Layout could help to avoid the criticism regarding empty HTML elements required to create regions." TabAtkins: I saw four things in here. TabAtkins: First is decorative pseudos for grid. TabAtkins: Sounds fine. TabAtkins: Specify chunk of grid, specify whitelisted properties. TabAtkins: Second is saying whether those take up auto-flow cases. TabAtkins: Might even be able to do something automatic there, TabAtkins: Example of tilting something. TabAtkins: Was that selecting a normal item in the grid based on the position in the grid? jensimmons: My thought was that the pseudo is like a container for the item in that area. TabAtkins: Spanning items ignore it then? jensimmons: I guess. jensimmons: Would need to limit CSS that applies. TabAtkins: Re-parenting under the pseudo. TabAtkins: Not sure how difficult it is. plinss: We insert anonymous boxes. TabAtkins: Never insert a pseudo-element as parent of another box. plinss: Anonymous boxes were a long time ago intended to be styleable. glazou: You have summarized what used to be in a lot of our drafts -- @slots glazou: I think Apple has some earlier version of @slot dino: Not in WebKit impl. jensimmons: Yes, read that stuff. jensimmons: Similar, but not. glazou: We had something approaching your wishes. glazou: Alan and I discussed region chains. glazou: Much of this considered, and rejected. jensimmons: Yeah, read up on all that. Was concerned of getting same response. jensimmons: But we're also in a different place now than we were then. glazou: The proposals were made to solve these issues. glazou: Now we have a use case. At that time feedback was internal, not pulled in from external world. glazou: There was almost no progress on regions side... only one implementer of regions, only one for shapes. glazou: Basically no interoperable progress in the browser world. Florian: Quick point, I mostly agree with you. Florian: A subtle but important difference from before. [missed what the difference was] TabAtkins: Fourth point is that region chain is identical to region chains from before, has same problems as regions with later bits of dom and layout effects. TabAtkins: Possible with heuristics or iterative layout, both bad ideas. TabAtkins: I think anything like region chains will be problematic. astearns: I think Tab is correct that ordered chain in your proposal has all the problems Tab described. astearns: But grid-order pseudos don't have those problems. TabAtkins: Clarification, if we're just handling overflow-style regions, where something has to be a set size and remainder after overflow is somewhere else, theoretically more handleable. TabAtkins: Cannot reasonably do balancing across regions. TabAtkins: Might not be enough power to do what you want. jensimmons: I think putting stuff in a region in a different part of the DOM is optional. jensimmons: My instinct is that something is different here jensimmons: A lot of the questions, the answers are handled by grid. jensimmons: This is about putting things into a layout, not calculating the layout. jensimmons: I read some of the earlier conversation... that allowed regions to do any layout, abspos whatever. jensimmons: Let's do xyz regions because grid takes longer... jensimmons: I think we should simplify regions to only work within context of grid. jensimmons: Later, talk later. TabAtkins: I think the grid layout algo still has those exact problems. TabAtkins: Very scary circularity issues around size of tracks. david_wood: Wanted to quickly ask dpub group: david_wood: How does this affect pagination? Rossen: Orthogonal. [nodding agreement from lrosenth and dauwhe] lrosenth: Flow is different. tzviya: Lots of problems.... Florian: I agree with Tab's concern about this not solving everything. Florian: I think I have a proposal for solving things. Florian: Haven't studied your styling empty grid slots proposal. Florian: [missed] then maybe works Florian: Wrt fragmentation, don't see how it's orthogonal. Florian: If you're using Grid to make your template, you want different templates on different pages. Florian: So this does interact with pagination to have a set of templates, to pick one in each page. Rossen: We have a module for this -- page templates. Florian: Rehash of that module is my idea for making this work. Rossen: One thing I wanted to bring as part of conversation, I love the fact that everyone is passionate about solving layout problem here. Rossen: Other side of equation is attaching event listeners and interaction, so this needs to be solved as well. Rossen: We can have all of the event model into CSS... we can re-implement HTML into CSS... Rossen: But that point stands. jensimmons: Thought about that a lot. Rossen: This is a major sticking point, for when we were implementing regions this was one of the first requirements. Rossen: app developers wanted specific event handlers per region. jensimmons: Style the region. Bert: My concern is related to Florian's comments. Bert: In template module, wanted to attach grid to a page, e.g. left and right pages different. Bert: If I have content goes into a slot, but second template doesn't have a corresponding slot, where does the content go? glazou: I think that the rendering in iBooks solved that issue, not sure. jensimmons: This idea definitely depends on grid. jensimmons: Up to the author to create layout that they need with grid. jensimmons: This just gives author a way to flow into grid. Bert: Page size is smaller.. content doesn't fit. SteveZ: Just wanted to see if I understood what Tab said. SteveZ: If layout can be done independently of content, no problem with region chains SteveZ: E.g. all fixed-size boxes. TabAtkins: Not no problems, just less problems. TabAtkins: Have to lay out into varying-width containers. fantasai: That exists in paged media, handled by css-break spec. SteveZ: If you restrict self to grids whose layouts were defined before content added. SteveZ: No particular problem to regions that didn't exist with fragmentation today. dauwhe: I'm hearing that this might be hard, but it's absolutely worth doing. dauwhe: What I see on this screen is beautiful, cuts right to the heart of what we want to do in design. dauwhe: Even first paragraph on first page being different size... such a fundamental thing in our world. dauwhe: These are the problems we are here to solve. scribe: TabAtkins fantasai: One Q: agree that we need to style pieces of the grid, straightforward. fantasai: How much of the regions stuff that you want to do here can we do with overflow:fragments? fantasai: Has less problems than arbitrary regions. jensimmons: Should code up some examples and see what it's like. jensimmons: Should choose something that'll seem elegant to authors. tzviya: When you tell people about overflow:fragment, they don't want to do it. <astearns> need a way to ensure that the overflow fragments can't be assigned grid slots that are not in grid order fantasai: I mean, it's new. People have a way of doing grids right now that will be abandoned when they use Grid, it's revolutionary. fantasai: I think this goes in line with what we want to do in CSS future. <ChrisL> Would like to see more worked examples and get author feedback scribe: fantasai High Dynamic Range ------------------ markw: Doing a lot of work on HDR video. markw: Standard is luminous from 0 to 100? markw: They would master video to look good in that range. markw: For HDR, available range is up to 100 nits (candelas per square meter). markw: Went from content mastered to this new range. <pal> 0 to 10,000 nits for HDR markw: Nobody has 10000nits markw: Highest is 4000 range markw: Consumer devices more like 1000. TabAtkins: What's 10000? pal: Sun on a chrome bumper. <pal> 10,000 candela/m^2 (or nits) <ChrisL> https://www.itu.int/dms_pubrec/itu-r/rec/bt/R-REC-BT.2100-0-201607-I!!PDF-E.pdf markw: Immediate question is how do I define colors in CSS with colors that match the pixels in my video. markw: Or perhaps have a still image. markw: Want to make it match the frame in the video / photo markw: Looking at CSS work in Colors spec, great to see there are more profiles in there. markw: BT.2020 profile are ones that people use for HDR video. markw: Question that came to mind which I raised on the list is: markw: How do you signal that the colors you want are from this wide luminous range, and not from the 0-100nits or 0-80 of sRGB. markw: The BT.2020 was used earlier. markw: Not a lot of content, really, but it was created for [?] markw: PPl use this with an HDR transfer function. markw: Specced in a different one, BT.21 markw: Discussion of maybe using ICC profiles, to solve this problem. markw: Not sure this solves the whole problem. markw: In problem because when I look at ICC stuff markw: It focuses on reproducing on paper. markw: Peak white on paper is blank paper white. markw: Whereas peak white on HDR is very different, very different of emitted light. markw: So the question that we struggle with is how, given sRGB pixels and HDR pixels, what is the peak white of sRGB? Probably what the user set it to. markw: But for specular highlights might need it to be brighter. markw: That's my summary of the problem. markw: Wanted to get feedback. markw: At a high level, problem is how do I take images out of video and get it into the graphics plane, draw things that look the same color. dino: Said video source has defined transfer function. markw: Several. dino: Would it be enough for us to point at that? dino: So you could say color(BT.2020 transfer-function) ChrisL: Not in the profile though. dino: You'd have to specify the ICC profile and the transfer function. ChrisL: CSS color is based on ICC4, white is based on white paper. ChrisL: HDR has much higher luminance and shadow detail. ChrisL: There's a new thing, iccMax, which should handle that. <lrosenth> iccMAX - http://www.color.org/iccmax.xalter <ChrisL> link to the spec being discussed: https://www.itu.int/dms_pubrec/itu-r/rec/bt/R-REC-BT.2100-0-201607-I!!PDF-E.pdf pal: Mark provided quick overview, wanted to bring up some specific topics. pal: First one, expanding on combining rec2020 with extended transfer function (PQ) pal: Transfer function encodes absolutes absolute luminance values from 0 to 10K nits into 10-bit pal: In that combination of rec.2020 and white point and transfer function. pal: ITU spec. pal: Supported today in consumer and professional monitors. pal: This doesn't solve the problem of how you composite pal: But allows you to capture the most common wan of distributing and representing HDR images. pal: Second point is that I noticed is DCI-P3 pal: It doesn't really exist. pal: No such system defined anywhere. pal: People colloquially use it to reference one of two things. pal: Digital cinema defines transfer function and quantization equation. pal: But doesn't specify white point pal: Or color primaries. pal: Maps absolute xyz values onto integer code values. pal: Only supports max of 50 nits. pal: Not useful for consumer applications. pal: For cinema, lower peak luminance. pal: For color primaries and white point, need reference digital cinema projector. pal: The white point is avocado green, though. pal: So that's what digital cinema uses, but it's not good for the home. pal: That is the most correct definition of DCI-P3. pal: Other thing it might refer to is P3D65, which is used for mastering. pal: That uses the P3 primaries (same as reference projector) but uses D65 white point and PQ transfer function. pal: Same as REC2020 pal: Neither of these are used in consumer applications. pal: What makes it to the consumer is Rec.709 for SDR or Rec.2100 for HDR pal: I'm not sure that was intended, but wanted to bring some specific comments to the spec. lrosenth: Among other things, I represent Adobe at ICC so member of international color consortium lrosenth: also ISO standardization of ICC. lrosenth: ICC4 is used on the Web, is not enough for HD color. lrosenth: ICC is working on addressing this. lrosenth: Not just for Web, but also print, fabric, etc. lrosenth: Pasted a link to draft spec, about to become final spec at ICC. lrosenth: Other piece of work done at ICC lrosenth: As of last week, ISO committee met, work is moving to ISO lrosenth: Rather than moving entire spec into ISO. lrosenth: Entire spec is very large, addresses many things. lrosenth: Rather than bringing many things, decided to create profiles or subsets for individual uses. lrosenth: So going to make individual profiles for specific use cases. lrosenth: Want to bring to this group, bring subset of ICCMax for the web. lrosenth: I would love help from the group. lrosenth: Happy to work with you in whatever is appropriate fashion. lrosenth: Obviously needs to be a joint effort. <ChrisL> I volunteer to work with lrosenth on an ICCMax for Web profile lrosenth: What I'd like to see from directional perspective, move this forward correctly. lrosenth: Adopt CSS Color. TabAtkins: Given that we have video profiles that handle high luminance already, do those work for images already? ChrisL: Undefined. ChrisL: No way to say "preserve this frame as an image" TabAtkins: Separate point wrt css colors TabAtkins: LAB as it stands doesn't have ability to do luminescences TabAtkins: but can add on later. TabAtkins: So for CSS, can punt until ICCMax stabilizes. TabAtkins: Seems like for images will automatically work once browsers update to color space work. ChrisL: Not a CSS issue, but people in this group need to be aware to help drive this work. lrosenth: CSS Color would affect SVG and other groups that work in colors. lrosenth: You need to have one single color space, color model, for all that. TabAtkins: Yes lrosenth: Assuming this group will influence the others. TabAtkins: We'll need a syntactic change in CSS colors, but in the future. SteveZ: The issue of compositing seems to creep in here somewhere. SteveZ: While it may be behind the scenes, seems like a fairly significant change. ChrisL: Yes, once it lands compositing will need to be updated. ChrisL: [...] ChrisL: This new stuff is input colors. ChrisL: Like when you take a digital photo, map 14-bit range to this. pal: REC.2100 is display-referred pal: The actual output level on the monitor. markw: With compositing, you've got PQ thing that says the output. markw: You have sRGB that says ... but people don't do that because they make their screens brighter. markw: Sometimes peak of display, sometimes 200 nits. markw: Seems like can't address the problem until people play with it. markw: Question of where is peak sRGB signal mapped to. markw: Otherwise what you end up with is user has set their display brightness so that their sRGB apps look comfortable, if that determines brightness of HDR video. markw: Part of this problem of people boosting up brightness levels for years, to ... pal: Added captions and subtitles is an example. pal: If peak white is 10,000 nits, but on dark scene, don't want to map white subtitles to 10,000nits cuz subtitles will be painfully bright. pal: Have to composit intelligently so don't end up that. lrosenth: Shouldn't need to change the current spec, refer to profiles. pal: Right now have REC2020, but that's SDR. Florian: You can also sideload profiles, can load an ICCMax profile. pal: Have to go into detail of whether you can map 1-1 pal: Through an ICC profile. lrosenth: Right now can't do that, without loss. Will clip. lrosenth: Going forward it's fine, no problem. lrosenth: Instead of using PCS / LAB lrosenth: Use PCS, wide even more wide in terms of mapping system. lrosenth: Much richer model transform. pal: How does it work? lrosenth: How you define your profile table. lrosenth: Can do math, formulas, lookup table. pal: Can you show a sample that demonstrates round-tripping? pal: We need to convince ourselves that this will work. pal: Mastered in 2100, seems lots of work to map into this other space and back. lrosenth: Handled by ... lrosenth: color management module. pal: What you're saying, color spec would be the 3 10-bit component of the color, associated with that would be mapping. pal: Up to 10000nits. lrosenth: Whatever you ask for. pal: Have to map the right xyz coordinates. lrosenth: I will work with committee to come up with that. Florian: Short point earlier, ISO wanted to do subsets, and you were interested in subset for Web. Florian: One tricky thing is that Web is fairly universal. Not sure about textiles, but e.g. we have to handle books as well as screens. ChrisL: The DCI-P3 stuff was brought in because Apple was shipping displays described as.. dino: Display P3 ChrisL: P3 primaries, but 2.2 transfer curve ChrisL: But ? is 2.6. pal: Yes. ChrisL: Because of dark surround ChrisL: Presume that P3 is also ? pal: No, 0-10K nits. pal: DCI-P3 is a misnomer here. pal: Transfer function is intended for displaying in the home. dino: The MQ that detects... that doesn't need to change. Just saying "P3-ish" dino: Specifying color, need to be more precise. ... ChrisL: Laptop, phone, has what it calls a "movie mode", which is P3 with 2.6 curve. pal: Even though monitor is capable of P3, how much content is authored for that? dino: Our devices generate content with that, we sell millions per day. ... dino: I would be overjoyed if keyword we chose was display-p3 Florian: apple-p3 dino: Assuming that when ICCMax comes in, point to those profiles, possibly with new keywords, to profile HDR colors. pal: Also have to talk about fallback, tho. pal: If you can't get it, what happens? dino: Spec says you can reference one, but never want to do that. dino: Keyword is important. dino: Browser knows what that profile is. dino: Choose small but useful set that will allow 99% of what people need. ChrisL: Question to lrosenth, ICCMax is spec plus reference code. ChrisL: Can we experiment with that now or too early? lrosenth: Please try out reference implementation. It's fully complete. markw: Some kind of capability discover. ChrisL: Media Queries. dino: color-gamut media query has "good better best" values. <astearns> "good better best bestest" in the future markw: Understanding profile is different from being able to display it. dino: MQ is for the whole stack. <br duration=20min>
Received on Wednesday, 16 November 2016 01:59:02 UTC