Re: [csswg-drafts] [css-inline-3] make `text` of `leading-trim` interoperable? (#3978)

The CSS Working Group just discussed `make text of leading-trim interoperable?`, and agreed to the following:

* `RESOLVED: Spec that text-top/bottom and background boxes of inlines ought to match`
* `RESOLVED: make leading-trim's text value match the same value for text-top/text-bottom/etc`

<details><summary>The full IRC log of that discussion</summary>
&lt;emilio> Topic:  make text of leading-trim interoperable?<br>
&lt;RossenF2F> github:https://github.com/w3c/csswg-drafts/issues/3978<br>
&lt;fantasai> https://drafts.csswg.org/css-inline-3/#leading-trim-property<br>
&lt;emilio> fantasai: we have some proposals in the early-brainstorming phases, and one of them is leading-trim which allows you to visually align some text so that it's aligned with the top of an image or such<br>
&lt;emilio> ... there's several values like cap-height x-height etc<br>
&lt;emilio> ... and the normal one which is laying out the text and then add the half-leading<br>
&lt;emilio> ... but there's also leading-trim which doesn't add the half-leading<br>
&lt;emilio> ... koji pointed out that these metrics don't have interop<br>
&lt;emilio> ... so if we did trim out the half-leading above and below the text we'd probably get no interop<br>
&lt;emilio> florian: can you clarify what's not interoperable? I think unless you use line-height normal stuff should mostly match<br>
&lt;emilio> fantasai: different browsers use different font-metrics<br>
&lt;emilio> ... I don't have a solution and don't understand the full issue from koji, but I hope we can close it somehow<br>
&lt;emilio> koji: in the current implementation stuff is not interoperable. I'd like to ask about jfkthame  and myles' opinion if any<br>
&lt;emilio> jfkthame: I don't have an answer here, it's not clear to me there'd be any useful metric for text-top value because the metrics in font vary considerably across fonts<br>
&lt;emilio> ... so the ascender in a font may or may not what you actually want. It may correspond to the ascenders of some glyphs, but it may instead have been defined to allow for accents are such<br>
&lt;emilio> ... so that's probably not what you want as a designer<br>
&lt;emilio> ... not clear there's a good answer<br>
&lt;emilio> fantasai: there's vertical-align: text-{top,bottom}, we should probably be consistent with them<br>
&lt;emilio> jfkthame: I'd bet that's not interoperable<br>
&lt;RossenF2F> q?<br>
&lt;emilio> koji: jfkthame is right, even with the same font Chrome peeks different ascent behavior in mac / windows to match platform behavior<br>
&lt;myles> q+<br>
&lt;fantasai> s/even/but even/<br>
&lt;emilio> ... I'd like browsers to match at least given the same font binary<br>
&lt;emilio> faceless: we've been trying to figure out what browsers do<br>
&lt;emilio> ... we find different behavior between FF and Chrome when a font specifies a zero line-gap in OS/2<br>
&lt;emilio> ... not sure if this is about<br>
&lt;emilio> fantasai: that's probably the answer for why line-height is not interoperable. But this feature should probably not use line-gap<br>
&lt;RossenF2F> ack myles<br>
&lt;fantasai> s/line-height/line-height: normal/<br>
&lt;emilio> myles: there's content out there that places elements so that they match up what the browser does... Whatever we do, let's say we add some switch to have an interoperable metric. It probably can't be default behavior<br>
&lt;emilio> fantasai: this is opt-in<br>
&lt;fantasai> initial value is auto, which just does the usual thing with half-leading and whatever<br>
&lt;fantasai> s/auto/normal/<br>
&lt;emilio> stantonm: I think if you give authors the ability to do this even for a particular case of having a font it'd be nice<br>
&lt;emilio> myles: there are three ascent/descend pairs in fonts, I don't think we want three options<br>
&lt;emilio> koji: I agree... Any specific set you can accept?<br>
&lt;emilio> myles: not particularly, I just have like a general aversion to parsing font files, and any interoperable solution requires code that parses font files, and that makes me sad myles<br>
&lt;emilio> hober: in terms of a general principle I think there's a good thing that browser engines can rely on other platform frameworks<br>
&lt;emilio> ... the job of parsing fonts is the job of the font library not the browsers<br>
&lt;emilio> fantasai: can you pull out the cap height and such metrics?<br>
&lt;emilio> myles: I think the best answer is we work very closely with coretext<br>
&lt;emilio> fantasai: one of the goals of these features is exposing the values the font author has chosen, the remaining issue is that which metrics are not interoperably chosen across platforms, so we'd hit the issue of authors hitting different results on different platforms<br>
&lt;emilio> ... I have two related concerns here: Can we give authors an interoperable way to strip the half-leading? If not, can we strip the half leading without stripping down all the way to the cap height?<br>
&lt;emilio> myles: Not 100% sure about the question but I don't think we can change default text rendering<br>
&lt;emilio> fantasai: we're not proposing that<br>
&lt;emilio> ... one of the features that we drafted is that you remove the half leading so that you get to align with the specified line-height<br>
&lt;emilio> ... I think we have two options, either figure out an interoperable metric<br>
&lt;emilio> ... or drop this value<br>
&lt;fantasai> https://drafts.csswg.org/css-inline-3/#propdef-leading-trim-over<br>
&lt;emilio> florian: right now, the total size you add after the leading is well defined, but the leading itself is not interoperable so we don't know the starting point<br>
&lt;emilio> fantasai: there's several places where the top and bottom edge of the text comes into play<br>
&lt;emilio> ... one is vertical alignment<br>
&lt;emilio> ... the other is when we're trying to draw backgrounds and borders<br>
&lt;emilio> ... so the content box edges of the inline<br>
&lt;emilio> ... I don't think that's well defined<br>
&lt;emilio> koji: canvas exposes this but I don't think it's interoperable<br>
&lt;dbaron> s/canvas/canvas TextMetrics/<br>
&lt;emilio> fantasai: the last one is vertical-align text-{top,bottom}<br>
&lt;emilio> ... but I don't know what they do<br>
&lt;emilio> ... so I don't know what to put in the spec<br>
&lt;emilio> myles: so if text layout is different between browsers, is it so bad that these new properties are also different between browsers? we're already in this world<br>
&lt;emilio> fantasai: I think authors want a little bit more control / consistency about what's happening in the documents<br>
&lt;RossenF2F> q?<br>
&lt;RossenF2F> ack dbaron<br>
&lt;emilio> ... the other thing is that I'm supposed to write the spec for these things, and I don't know what to put in them right now<br>
&lt;emilio> dbaron: myles has asked about the lack of interop. I think that causes real bugs for minority browsers<br>
&lt;emilio> ... like cases where a minimal amount of space perturbs the whole layout<br>
&lt;emilio> ... we do hit these things occasionally, probably a bit less during the last few years, probably because of the choice of layout techniques people are using lately is changing<br>
&lt;emilio> RossenF2F: but that's not true for the long tail of the web<br>
&lt;RossenF2F> +1 to dbaron<br>
&lt;emilio> dbaron: there's another source of lack of interop about how you deal with all these sizes for text / inlines when these things have multiple fonts in them<br>
&lt;RossenF2F> q?<br>
&lt;emilio> ... sort of the same points fantasai mentions but even more complicated and less interoperable<br>
&lt;emilio> ... so probably worth separating it<br>
&lt;emilio> fantasai: we can also drop the feature of leading-trim that allows you to drop the half-leading<br>
&lt;emilio> ... but I'd still have the issue of text-top/text-bottom<br>
&lt;dbaron> s/perturbs the whole layout/perturbs the whole layout (e.g., if going from 20px high to 21px high bumps into a float and moves it to a totally different position)/<br>
&lt;emilio> florian: with flex / grid people can do more robust design and they're more likely to start trying improve typography, and then these interop differences are more likely to come up<br>
&lt;dbaron> s/another source of lack of interop/another source of lack of interop (which we discussed when we last met at Keio University in Tokyo)/<br>
&lt;emilio> fantasai: what do people do for text-top / text-bottom<br>
&lt;emilio> ?<br>
&lt;emilio> hober: myles described a simple way to do this with information you already have in the engine. Can we specify that as a baseline?<br>
&lt;emilio> RossenF2F: what's that?<br>
&lt;emilio> myles: that's using the ascent / descent that you already have during text layout<br>
&lt;emilio> RossenF2F: that feels like "keep doing what you're doing", which may be fine but I want to clarify what you're trying to say<br>
&lt;emilio> myles: I agree that interoperability is good<br>
&lt;emilio> ... but I think there are constraints that make that difficult<br>
&lt;emilio> ... I also think that this is worth a warning on the spec given this is a new feature<br>
&lt;emilio> florian: so this is about using text-top/text-bottom, whatever they're currently doing right?<br>
&lt;emilio> ... but that's exactly about what this issue is about<br>
&lt;myles> s/I also think that this is worth a warning on the spec given this is a new feature//<br>
&lt;emilio> koji: I think we need at least one interoperable value<br>
&lt;emilio> ... so that authors can have control<br>
&lt;emilio> myles: in some other issue I proposed somewhere else is additional descriptors in @font-face<br>
&lt;emilio> ... that the browser could use<br>
&lt;emilio> faceless: for fonts that have incorrect info that'd be of huge help<br>
&lt;emilio> myles: and that also allows avoiding to parse font files<br>
&lt;emilio> hober: that is a good idea, I think<br>
&lt;emilio> koji: I'm fine with that<br>
&lt;emilio> florian: so you'd add descriptors for where the text-top / text-bottom are and the browser would use these values<br>
&lt;emilio> ... everywhere<br>
&lt;emilio> ... seems worth looking into<br>
&lt;emilio> myles: it's in some comment of some issue a long time ago, can dig it up<br>
&lt;fantasai> testcase for content-edge vs vertical-align: text-top http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=7710<br>
&lt;emilio> florian: if we manage to characterize how these behaviors differ we could let authors choose<br>
&lt;emilio> myles: that'd reintroduce the problem of parsing font files<br>
&lt;emilio> fantasai: so we should open an issue about this against fonts-5, and that'd get rid of the interoperability<br>
&lt;emilio> ... the other thing is how we define how to use these metrics<br>
&lt;emilio> ... at least in Firefox on Linux the text-top edge seems to be the same as the background of the inline, so if that happens in other platforms we can specify that they have to match<br>
&lt;emilio> fremy: they don't seem to match in Chrome<br>
&lt;emilio> florian: It matches here<br>
&lt;emilio> koji: I think it can change across OSes<br>
&lt;emilio> fantasai: does it match on Safari?<br>
&lt;emilio> florian: yeah, looks like<br>
&lt;emilio> dbaron: they don't see to match by a pixel in Firefox here, but might be a pixel-snapping issue<br>
&lt;emilio> fantasai: I'd like to resolve that text-top and the background-box of inlines use the same metrics<br>
&lt;fremy> (I want to clarify, that neither Chrome nor Firefox do match on my Windows device)<br>
&lt;dbaron> (I see a 1px mismatch for the serif example.)<br>
&lt;emilio> ... can we resolve that they ought to match<br>
&lt;emilio> florian: so the non-matching behavior is something we want to fix?<br>
&lt;emilio> dbaron: we could try to understand why they don't match first<br>
&lt;emilio> RossenF2F: but the intent is pretty good modulo bugs/rounding issues<br>
&lt;emilio> RESOLVED: Spec that text-top/bottom and background boxes of inlines ought to match<br>
&lt;emilio> RESOLVED: make leading-trim's text value match the same value for text-top/text-bottom/etc<br>
&lt;tantek> both really hoping this works / happy to see this from a web author perspective, and frankly a bit suspicious about odd pixel compat issues that will show up when this stuff gets tweaked in implementations<br>
&lt;emilio> fantasai: we should try to request vendors to describe what's happening to have better spec text<br>
</details>


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

Received on Friday, 24 January 2020 11:37:33 UTC