- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Mon, 16 Sep 2019 05:20:21 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed `Images with layout information`.
<details><summary>The full IRC log of that discussion</summary>
<emilio> Topic: Images with layout information<br>
<emilio> GitHub: https://github.com/w3c/csswg-drafts/issues/4116<br>
<emilio> myles: I'd like to present a problem and no suggestions about how to solve it, but I hope to leave with a sense of whether we're interested in solving it<br>
<emilio> myles: there are images that need to be positioned similarly to text<br>
<emilio> myles: like a math formula with a tall integral sign where most of the formula should be aligned to the baseline but the presence of the integral sign the whole image will sit on the baseline<br>
<emilio> myles: so the formula won't align with the text<br>
<fantasai> if we're talking about things like gaiji, which is inline images that should have a baseline and stuff... there was some proposal to add a property to specify a baseline table<br>
<fantasai> we didn't spec it out because it wasn't a high priority<br>
<emilio> myles: it'd be cool if the math formula could say "my baseline is in the middle of the image", and layout could align it correctly<br>
<fantasai> but it's certainly possible to do<br>
<emilio> myles: similarly with the apple pay logo and similar, because of the descender of the y<br>
<emilio> myles: a similar case is for symbols like the play button in the ios music app, which is not fully horizontally centered, but visually centered<br>
<emilio> myles: it's a triangle, so if you mathematically center it horizontally it would look wrong<br>
<emilio> myles: so the layout moves it slightly horizontally<br>
<emilio> myles: same for kanbun, which are cjk chars which are not in unicode and people use them using images<br>
<emilio> myles: since they're images they behave wrong<br>
<emilio> myles: three of the examples show the need for horizontal baselines, the other is a vertical baseline<br>
<fantasai> s/kanbun/kaiji<br>
<fantasai> s/kaiji/gaiji/<br>
<tantek> There's another fairly common use-case of this, images used for decorative first/initial letters<br>
<emilio> myles: there are various ways to do this, one option is using it on the image formats and such to provide the information<br>
<emilio> myles: another option is to add a css properties<br>
<emilio> myles: mac has these system assets that contain this information<br>
<nmccully> unencoded glyphs = gaiji; Chinese poetry typeset for Japanese audiences = kanbun<br>
<emilio> myles: another option would be to provide a css function that takes a name to these system assets, and returns the information<br>
<emilio> myles: so at least we could use it for system assets<br>
<emilio> myles: I wanted to get an indication of whether this is a problem worth solving, and if it is what's the solution could look like<br>
<tantek> q+<br>
<emilio> TabAtkins: chrome is fine with that, we have taken a look to the image formats to provide x-height and baseline<br>
<smfr> ack<br>
<stantonm> q+<br>
<tantek> q+ to note use-case of decorative image first/initial letters and also prior art / related feature CSS cursors which reference the hotspot of the cursor image<br>
<emilio> nmccully: a single baseline is fine, but multiple baselines may be needed for multiple writing systems<br>
<heycam> q=<br>
<astearns> ack tantek<br>
<emilio> ack tantek<br>
<Zakim> tantek, you wanted to note use-case of decorative image first/initial letters and also prior art / related feature CSS cursors which reference the hotspot of the cursor image<br>
<heycam> q+<br>
<smfr> q-<br>
<emilio> tantek: I agree this is worth solving. Another use case is a decorative image for the first-letter which has decorations and borders alone<br>
<emilio> s/alone/and such<br>
<emilio> tantek: we have a similar feature / challenge in css-ui with the cursor property<br>
<krit> q+<br>
<emilio> tantek: cursor has a hotspot. May be something that we could reuse somehow<br>
<emilio> TabAtkins: cursors are usually set once, but in this case you need the same information every time you set the image<br>
<chrishtr> q+<br>
<astearns> ack stantonm<br>
<emilio> tantek: I think cursors can also have the same issue. Having the info in the image would be great, but maybe both<br>
<emilio> TabAtkins: both is fine<br>
<emilio> stantonm: we have a similar use case for @font-face / images and cjk, where adding a baseline to the font-face rule would be useful<br>
<emilio> myles: can you link me to it?<br>
<emilio> stantonm: we also have a use case to get rid of these images and use the font, so we wanted to use @font-face with the images, and for that the baseline would be great, but for the symbols it may not make sense<br>
<fremy> @myles: if you want more details about the CUR format wrapper which can contain a PNG image and specify a hotspot: https://en.wikipedia.org/wiki/ICO_(file_format)#Icon_resource_structure<br>
<emilio> stantonm: another thing we wanted to see if we can treat images more like a bitmap, to invert in dark mode<br>
<emilio> myles: mix-blend-mode?<br>
<emilio> stantonm: haven't looked into impl that much<br>
<emilio> heycam: I wanted to express general agreement on the problem being worth solving<br>
<emilio> heycam: have run into this with svg<br>
<stantonm> creating @font-face from an CJK image (gaiji) - https://github.com/w3c/csswg-drafts/issues/4013<br>
<astearns> q?<br>
<astearns> ack heycam<br>
<emilio> heycam: I think modifying image formats would be useful, though I'm concerned for compat if we run into a situation with image-orientation<br>
<emilio> heycam: where we start reacting to image metadata and breaking pages<br>
<emilio> myles: we still need some css integrations to define how these are read or what not<br>
<tantek> FYI CSS UI cursors with optional hotspot x y that can override any built-in hotspot: https://www.w3.org/TR/css-ui-3/#cursor<br>
<astearns> ack krit<br>
<emilio> heycam: using vertical writing mode to getting centering and alignment seems a bit odd<br>
<emilio> krit: file formats seems nice, but there are formats which we may not be able to modify<br>
<emilio> krit: so we may want a css-only solution as well<br>
<astearns> ack chrishtr<br>
<emilio> chrishtr: what formats have this already, any examples?<br>
<emilio> myles: nope, 0<br>
<emilio> myles: the ui image in iOS apps have this, but it's not a file format<br>
<bkardell_> q+<br>
<emilio> chrishtr: so in an iOS app you create an image and set this and use it in your layout?<br>
<emilio> myles: yes<br>
<emilio> chrishtr: I'm curious about how feasible is it to modify the formats<br>
<emilio> myles: people think it's a good idea so I'll try and come back if fail<br>
<fantasai> myles, I think we need to make sure whatever we do can handle multiple baselines<br>
<emilio> fremy: we may not need to change formats, the cursor format is a small wrapper file with some metadata. May be able to use a similar wrapper-format<br>
<fantasai> e.g. alphabetic vs ideographic vs central vs mathematical<br>
<emilio> chrishtr: you're proposing a new format?<br>
<nmccully> Adobe's SING glyph format was one way to make an image with font metrics : https://web.archive.org/web/20080627183635/http://www.adobe.com/devnet/opentype/gdk/topic.html<br>
<emilio> fremy: windows cursors do exist already, and include the hotspot. It already has the hotspot, but we don't want exactly that<br>
<emilio> fremy: so we may want that instead<br>
<astearns> ack bkardell_<br>
<chrishtr> q+<br>
<emilio> fremy: as changing formats is going to be a pain<br>
<emilio> myles: only interested in jpeg and png really, and those do have optional tags<br>
<emilio> myles: but yeah, first thing to try is changing those, second the wrapper format, third css-only solution<br>
<myles> optional tags inside their existing formats<br>
<emilio> bkardell_: We need to specify what do we do with these values, and people thought that a css solution would also be valuable too<br>
<emilio> bkardell_: so it seems like we'd get into a situation where there are multiple sources of truth<br>
<emilio> myles: image-orientation was like that until not long ago<br>
<emilio> bkardell_: right, also aspect-ratio and such<br>
<emilio> bkardell_: do you think a property of that sort would be valuable?<br>
<astearns> ack chrishtr<br>
<emilio> myles: I think the way I'd approach is the underline-{offset,thickness} where there is an auto value, then from-font (which would look and the image), then <length><br>
<emilio> chrishtr: we discussed something similar about mathml not long ago right?<br>
<emilio> myles: I think the mathml proposal was to identify the baseline out of specific elements inside the formula<br>
<emilio> myles: but that doesn't work for non-formula use-cases like the ones I've provided<br>
<emilio> chrishtr: that makes sense<br>
<emilio> cbiesinger: could potentially work for svg<br>
<emilio> myles: yeah, true<br>
<emilio> chrishtr: drott mentioned that fonts can be the wrapper format<br>
<emilio> chrishtr: that may be a lot of overhead<br>
<emilio> myles: I think making icon fonts is an anti-pattern<br>
<emilio> drott: there are some ergonomic issues with them<br>
<emilio> drott: but my point is that we don't need a new wrapper format, you could wrap an image in a font file<br>
<emilio> myles: I'd prefer a new format, there's tons of unrelated stuff that you'd need to create a valid font<br>
</details>
--
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4116#issuecomment-531644339 using your GitHub account
Received on Monday, 16 September 2019 05:20:23 UTC