Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
longsonr opened this issue Feb 7, 2024 · 5 comments
Labels
css-pseudo-4 Current Work

Comments

@longsonr
Copy link

longsonr commented Feb 7, 2024

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.

@emilio emilio added the css-pseudo-4 Current Work label Feb 7, 2024
@emilio emilio changed the title SVG only CSS text properties should not apply to ::placeholder, but should apply to ::first-line/::first-letter [css-pseudo] SVG only CSS text properties should not apply to ::placeholder, but should apply to ::first-line/::first-letter Feb 7, 2024
@xiaochengh
Copy link
Contributor

If I read the spec correctly:

  • ::first-line/::first-letter has an allowlist of properties which doesn't include SVG properties
  • As a result, ::first-line/::first-letter on SVG text elements do not support SVG-only properties

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
Copy link
Author

longsonr commented Feb 8, 2024

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
Copy link
Contributor

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
Copy link
Author

@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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-pseudo-4 Current Work
Projects
None yet
Development

No branches or pull requests

3 participants