Re: [css-houdini-drafts] [css-layout-api] String based inline layout API (#990)

The CSS Working Group just discussed `String based inline layout API`.

<details><summary>The full IRC log of that discussion</summary>
&lt;Rossen_> Topic: String based inline layout API<br>
&lt;Rossen_> github:https://github.com/w3c/css-houdini-drafts/issues/990<br>
&lt;fantasai> Rossen_: More and more desire to be able to perform typographic text layout from Canvas<br>
&lt;Rossen_> https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Canvas/FormattedText.md<br>
&lt;fantasai> Rossen_: There were some proposals put forward to essentially expose API in the platform that will allow developers to do that<br>
&lt;fantasai> Rossen_: e.g. ^<br>
&lt;fantasai> Rossen_: When I looked at it, and when we discussed it, my initial reaction was, hey, we have Houdini, and Houdini Custom Layout API was intended to handle exactly this<br>
&lt;fantasai> Rossen_: Overall idea, instead of performing layout that is based on a particular subsection of DOM that has text, inline markup, etc.<br>
&lt;fantasai> Rossen_: Instead expose an API that simply, for custom layout or maybe different API, takes as input a string<br>
&lt;fantasai> Rossen_: and does layout into the given space<br>
&lt;fantasai> Rossen_: If Houdini is not able to handle this, we are failing this on some higher level<br>
&lt;fantasai> Rossen_: So talked about it with iank_  and he expanded in the issue why this makes perfect sense and is good fit for the API<br>
&lt;fantasai> Rossen_: Since then see that some additional comments by Travis and ?<br>
&lt;fantasai> Rossen_: from Edge Team<br>
&lt;AmeliaBR> q+<br>
&lt;fantasai> Rossen_: and I wanted to essentially turn this into a question and ask, does it seem like a reasonable API?<br>
&lt;fremy> q+<br>
&lt;fantasai> Rossen_: Is this a good API to add, given intended functionality?<br>
&lt;fantasai> Rossen_: Will it serve the purpose motivating the other proposal?<br>
&lt;fantasai> AmeliaBR: Ian had a question in the issue about, once you've laid out, how do you query back the position of content?<br>
&lt;fantasai> AmeliaBR: If you're going down that road, might look at APIs from SVG<br>
&lt;fantasai> AmeliaBR: Can't promise they'll be all you want, but if can harmonize it's better<br>
&lt;fantasai> AmeliaBR: More specifically on the proposal, like the idea of being able to run layout separately from full CSS layout context<br>
&lt;fantasai> AmeliaBR: And re-using Houdini Layout APIs sounds good<br>
&lt;fantasai> AmeliaBR: I'm concerned about being based on simple text strings<br>
&lt;fantasai> AmeliaBR: As soon as you go beyond the simplest things, need annotations<br>
&lt;fantasai> AmeliaBR: Need info on languages, need markup for bidi, going to need nest it with italic phrase inside regular text phrase, etc.<br>
&lt;iank_> q+<br>
&lt;fantasai> AmeliaBR: So it might be better to keep thinking of styling a DOM fragment<br>
&lt;fantasai> AmeliaBR: but DOM fragment doesn't necessarily need to be attached to the document<br>
&lt;fantasai> AmeliaBR: Because you will need some hierarchy of content<br>
&lt;fantasai> Rossen_: what you're asking for already exists, just extending to handle string only<br>
&lt;Rossen_> ack AmeliaBR<br>
&lt;Rossen_> ack fremy<br>
&lt;fantasai> fremy: One issue of doing with strings is, if you have ? such as text selection<br>
&lt;fantasai> fremy: Doesn't work if you don't have something in the DOM to select<br>
&lt;fantasai> fremy: Don't know the use case for the text<br>
&lt;fantasai> fremy: But selection is something users expect, and problematic if we can't handle selection<br>
&lt;fantasai> fremy: But at the same time, think about what Amelia said<br>
&lt;fantasai> fremy: if you have something in the DOM to represent the string<br>
&lt;fantasai> fremy: [something about spans]<br>
&lt;fantasai> fremy: If in the DOM, you can copy and paste, etc.<br>
&lt;fantasai> fremy: A lot of times you don't want to have everything possible in CSS<br>
&lt;fantasai> fremy: Sounds useful in many cases<br>
&lt;Rossen_> ack iank_<br>
&lt;fantasai> iank_: The linked formatted text explainer is much more well thought out<br>
&lt;fantasai> iank_: and seems pretty good<br>
&lt;fantasai> iank_: Amelia brought up point wrt doing on document fragments<br>
&lt;fantasai> iank_: Issue there is, this API wanted to work inside of workers<br>
&lt;fantasai> iank_: because have the Canvas API<br>
&lt;fantasai> iank_: I don't think needs that much of hierarchy<br>
&lt;fantasai> iank_: styling particular runs is roughly equivalent to structured hierarchy<br>
&lt;sushanth> q+<br>
&lt;fantasai> iank_: One thing to think about there is bidi reordering, though<br>
&lt;fantasai> iank_: To harmonize APIs<br>
&lt;fantasai> iank_: call out some core ? or mixins that can be shared between the APIs<br>
&lt;fantasai> iank_: Once you have a line of text, what info can you query?<br>
&lt;Rossen_> q<br>
&lt;fantasai> iank_: no reason they should be different<br>
&lt;fantasai> ??: Motivation was apps, like photoshop / excel<br>
&lt;fantasai> sushanth: API was trying to give them ability to do multiline text<br>
&lt;astearns> s/??/sushanth/<br>
&lt;fantasai> sushanth: Houdini, they have control over canvas context they'd want text to be rendered?<br>
&lt;fantasai> sushanth: Paint Worklet, Houdini controls context<br>
&lt;fantasai> sushanth: but these cases rendering other things, just want a few lines of text<br>
&lt;fantasai> sushanth: In terms of measuring API, we went towards existing Canvas Text Metrics API<br>
&lt;fantasai> sushanth: exposes same set of things<br>
&lt;fantasai> sushanth: Not the same as SVG, but has precedence on having some APIs<br>
&lt;fantasai> sushanth: Chromium has advances as well<br>
&lt;jfkthame> q+<br>
&lt;fantasai> sushanth: I think last question, selection / background / borders missing from this API<br>
&lt;fantasai> sushanth: with metrics can implement this<br>
&lt;fantasai> sushanth: in JS<br>
&lt;Rossen_> q?<br>
&lt;fantasai> sushanth: Just wanted basic multiline text<br>
&lt;fantasai> jfkthame: I wanted to comment that what I've seen of the text metrics API for canvas there, particularly advances from Chromium, that really does not address the needs of international text well<br>
&lt;fantasai> jfkthame: Does not handle that one character can map to arbitrary number of glyphs and vice versa<br>
&lt;fantasai> jfkthame: the mapping between glyphs and characters can be quite complex, and it doesn't handle that<br>
&lt;Rossen__> q?<br>
&lt;fantasai> AmeliaBR: Hadn't clicked through to explainer previously, and only saw the examples in the issue. Explainer looks like a much more complex model, allows annotations<br>
&lt;fantasai> AmeliaBR: if that's extended to handle i18n issues, that's a good start [wrt bidi and lang?]<br>
&lt;fantasai> AmeliaBR: Might be useful to export a DOM fragment to this format<br>
&lt;fantasai> AmeliaBR: so if you have CSS-styled markup in Canvas Shadow DOM or in your SVG<br>
&lt;fantasai> AmeliaBR: and want to run through this API to get layout, would be a great feature<br>
&lt;Rossen__> q<br>
&lt;sushanth> q+<br>
&lt;fantasai> Rossen__: SVG has had this capability request for the longest time<br>
&lt;fantasai> Rossen__: some such as inkscape that support, no renderers<br>
&lt;fantasai> Rossen__: Want it in Canvas<br>
&lt;fantasai> Rossen__: If for every one of these [sound breaks]<br>
&lt;fantasai> AmeliaBR: He was talking about how SVG has long wanted formatted multiline text, haven't been able to get implemented in browsers, so will be very jealous if Canvas gets it before we do<br>
&lt;astearns> ack sushanth<br>
&lt;fantasai> sushanth: Point about advances in text metrics, it's incomplete<br>
&lt;fantasai> sushanth: flag to get it to wokr<br>
&lt;fantasai> sushanth: Does handle multiple glyphs per characters<br>
&lt;fantasai> sushanth: We augmented with hierarchy to allow advances within ?<br>
&lt;fantasai> sushanth: It addresses multiple chars into single glyph is that it gives you the same advance value<br>
&lt;fantasai> sushanth: They'll all have the same advance value<br>
&lt;fantasai> sushanth: advance = position from the start<br>
&lt;Rossen___> q?<br>
&lt;fantasai> jfkthame: That won't be any different than a zero-width character right?<br>
&lt;AmeliaBR> This is similar to how the SVG API works: multiple characters will match to the same glyph box<br>
&lt;fantasai> sushanth: true<br>
&lt;fantasai> sushanth: Some other issues also?<br>
&lt;fantasai> Rossen__: Main point I wanted to make before network drop...<br>
&lt;fantasai> Rossen__: If we're not looking for ways to harmonize Houdini APIs with rest of platform<br>
&lt;fantasai> Rossen__: failing main use case of exposing ? to other things like Canvas and SVG<br>
&lt;AmeliaBR> s/?/text layout/<br>
&lt;fantasai> Rossen__: As we all know, text seems very benign and easy, when you thinking only about a few ascii glyphs<br>
&lt;fantasai> Rossen__: breaks based on simple logic<br>
&lt;fantasai> Rossen__: Things get increasingly complex<br>
&lt;fantasai> Rossen__: to the point where you're mostly ending up re-implementing layout for CSS<br>
&lt;fantasai> Rossen__: which now intended to be exposed as Houdini APIs<br>
&lt;iank_> q+<br>
&lt;Rossen___> ack fantasai<br>
&lt;Zakim> fantasai, you wanted to ask us to get Myles's opinion before signing off on anything like this<br>
&lt;fremy> q+<br>
&lt;fantasai> fantasai: Just wanted to say, I echo concerns about getting i18n right.<br>
&lt;iank_> q-<br>
&lt;iank_> q+<br>
&lt;fantasai> fantasai: Also want to say, I would be very uncomfortable resolving to add a new major text API without Myles signing off<br>
&lt;fantasai> fremy: Was thinking about use case, the idea is to run this in workers<br>
&lt;fantasai> fremy: because can't ? directly<br>
&lt;fantasai> fremy: So that's why don't want to take something from the DOM and draw it<br>
&lt;AmeliaBR> s/?/access the DOM/<br>
&lt;fantasai> fremy: ...<br>
&lt;fantasai> fremy: HTML content and canvas can automatically update<br>
&lt;fantasai> fremy: what gets drawn on it<br>
&lt;fantasai> fremy: that could get the other things to work<br>
&lt;fantasai> fremy: for ppl using the API<br>
&lt;fantasai> fremy: Draw on the canvas, put this in the DOM, and gets updated<br>
&lt;fantasai> fremy: enables selection, a11y, etc. everything to wokr<br>
&lt;astearns> s/.../describes an export from this API to a DOM fragment/<br>
&lt;fantasai> fremy: That's an idea, another way of looking at it<br>
&lt;fantasai> iank_: Based on the canvas text explainer here, definitely possible to harmonize SVG and layout API with htis<br>
&lt;Rossen___> ack iank_<br>
&lt;Rossen___> ack fremy<br>
&lt;fantasai> iank_: might me helpful to get on videochat and talk about details in detail at some point<br>
&lt;fantasai> Rossen___: As stated in the beginning, wanted to get opinion on whether good approach in general<br>
&lt;fantasai> Rossen___: For the proposed solution put together by ian on that issue, wanted to get feedback from sushanth and others<br>
&lt;fantasai> Rossen___: whether approach worth pursuing<br>
&lt;fantasai> Rossen___: Closing remarks are let's get together and work on this<br>
&lt;sushanth> thank you Ian, happy to follow up. :D<br>
&lt;florian> q+<br>
&lt;Rossen___> ack fantasai<br>
&lt;fantasai> fantasai: bidi, lang-tagging or markup for change in formatting, selection, a11y, character to glyph mapping ...<br>
&lt;fantasai> fantasai: justification? would it be possible?<br>
&lt;Rossen___> q<br>
&lt;fantasai> sushanth: ? has some some text justification, has just left/right/center<br>
&lt;AmeliaBR> s/?/canvas/<br>
&lt;fantasai> fantasai: just wanted to make sure these points don't get lost<br>
&lt;fantasai> florian: Want to echo a bit of the warning Myles gave us last time on this topic<br>
&lt;fantasai> florian: needs to be foolproof, so that if user of API doesn't think about them, they still work<br>
&lt;fantasai> florian: otherwise we make large parts of internet inaccessible or unusable to a lot of the world population<br>
&lt;fantasai> florian: ...<br>
&lt;fantasai> florian: getting the right balance is hard, but we have to do it<br>
&lt;fantasai> iank_: This API is a substantial leap forward from current Canvas APIs<br>
&lt;fantasai> [Note to scribe: insert link to Myle's comments here]<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/990#issuecomment-667190629 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 31 July 2020 15:46:14 UTC