w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 668 forks source link

[css-pseudo] SVG only CSS text properties should not apply to ::placeholder, but should apply to ::first-line/::first-letter #9918

Open longsonr opened 9 months ago

longsonr commented 9 months ago

The specification says

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.

However the SVG 2 specification says...

Additionally, the @font-face rule must be supported for font selection as well as the ::first-line and ::first-letter pseudo-elements must be supported on ‘text’ elements.

No mention of ::placeholder in SVG 2 and I don't really see how you can have SVG text as a placeholder. Whereas SVG text content obviously has a first letter and somewhat less obviously a first line. E.g.

<svg><text>First</text></svg>

The letter F is the first-letter and we should be able to apply the usual set of SVG text formatting to it e.g. fill, stroke, stroke-width etc.

So perhaps the [css-pseudo] specification should instead say something like

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element, except for those that solely affect SVG text elements.

xiaochengh commented 9 months ago

If I read the spec correctly:

So the issue should be the other way around: whether/how to allow SVG-only properties in ::first-line/::first-letter only when the originating element is an SVG text element

longsonr commented 9 months ago

Well the SVG specification says that SVG text supports ::first-letter and ::first-line but if you can change the font-size but not the fill/stroke/stroke-width/stroke-dasharray/ etc then it's not that much use for SVG text - that partial support would be pretty surprising for anyone who tried to use it with SVG. Firefox intends to support most applicable SVG properties from version 124.

For HTML text you can, of course change the colour via the color property.

xiaochengh commented 8 months ago

Or maybe everything is working correctly, and no work is needed?

Currently, SVG properties can be applied to HTML elements and cascade as normal. They just don't do anything to the rendering.

Test case: https://jsfiddle.net/dmjhtnps/ , where we can see SVG property rx is treated as a normal property on HTML elements. The behavior is same on Chrome and Firefox.

So SVG properties can be always allowed in ::first-letter and ::first-line, and they don't do anything if the originating element is not an SVG element.

longsonr commented 8 months ago

@xiaochengh The css-pseudo specification says that only whitelisted HTML properties are applied. I'm saying

  1. that's in conflict with the SVG specification and not very not useful for SVG
  2. Firefox will be changing to allow first-letter and first-word to support SVG properties that makes sense for text.

You can try a Firefox nightly today and see the difference: https://codepen.io/CodeRedDigital/pen/MWxROBR

xiaochengh commented 8 months ago

It's not a very strict whitelist. It also includes:

  • any other properties defined to apply to ::first-line by their respective specifications

Which means the SVG spec can add more allowed properties.