[go: nahoru, domu]

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-4] styling the spelling error marker #1828

Closed
frivoal opened this issue Sep 22, 2017 · 4 comments
Closed

[css-pseudo-4] styling the spelling error marker #1828

frivoal opened this issue Sep 22, 2017 · 4 comments
Assignees
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-pseudo-4 Current Work

Comments

@frivoal
Copy link
Collaborator
frivoal commented Sep 22, 2017

With the ::spelling-error pseudo introduced in css-pseudo-4, if you want for example to highlight spelling mistakes with a green wavy underline, you can do this:

::spelling-error {
  text-decoration: wavy green underline;
}

However, this only works if the browser's original spelling mistake marker was created using the same mechanism in the UA stylesheet. If it is created some other way, what you'd get instead would be this:
screenshot_from_2017-09-22_10-54-09

Since that's not what the author would want, I think we should normatively require that browsers that support ::spelling-error and ::grammar-error must create the error indicators using these pseudos in the UA stylesheet.

@frivoal frivoal added the css-pseudo-4 Current Work label Sep 22, 2017
@frivoal frivoal self-assigned this Sep 22, 2017
@tabatkins
Copy link
Member

That's literally the entire intent of the feature, yes, so if it's not yet clear in the text, it should be made so.

(You don't have access to the spelling/grammar checker yourself, all you have is the ability to style its output via these pseudo-elements. If your styling didn't override the built-in one, it would be 100% useless.)

@FremyCompany
Copy link
Contributor

I agree

@css-meeting-bot
Copy link
Member

The Working Group just discussed Styling the ::spelling-error marker, and agreed to the following resolutions:

  • RESOLVED: Specify that custom styling of the underline overrides the UA-rendered underline (not just adds to it). Details to be determined in a separate issue.
The full IRC log of that discussion <TabAtkins> Topic: Styling the ::spelling-error marker
<TabAtkins> GitHub: https://github.com//issues/1828
<TabAtkins> florian: In Pseudo4 we have ::spelling-error and ::grammar-error. The spec doesn't say that the browser is supposed to use these to put their own markers.
<TabAtkins> florian: So technically it's valid for your outlines to *add* to the browser UI, not replace.
<TabAtkins> florian: So the spec needs to state that...
<fantasai> +1 to Florian's proposal
<fantasai> to require that UA styles are expressed in this manner
<TabAtkins> florian: Maybe do UA stylesheet to mandate what they look like by default, or just say that the UA one has to use ::spelling-error
<TabAtkins> TabAtkins: Don't mandate the UA style, let it do whatever. But definitely mandate that it replaces.
<TabAtkins> myles: The existing markers don't necessarily map to something in CSS, so we can't do it precisely in the UA stylesheet.
<TabAtkins> myles: For example, the MacOS style is under-dots with a gradient inside, and we try hard to make sure there's never a partial dot.
<tantek> q+
<TabAtkins> florian: Okay, so how to specify it?
<fantasai> I don't think making sure there's never a partial dot is incompatible with CSS
<TabAtkins> florian: Any property specified, it shuts down the native one?
<fantasai> CSS doesn't mandate dot spacing, leaves it up to the UA so that it can do exactly these things
<TabAtkins> florian: That seems too much, they might just want to do the color.
<TabAtkins> myles: Adjusting the color of our dots isn't possible. It should be just like 'outline'.
<TabAtkins> TabAtkins: Agreed.
<astearns> ack tantek
<TabAtkins> fremy: Yes, it should also have a value that means "native", just like outline.
<TabAtkins> tantek: Agreed as well, it's also like borders - the natives might look more special than you can get with built-in stuff.
<TabAtkins> tantek: The key aspect here is normative text that says "if you draw it normally, don't draw it when CSS specifies one".
<TabAtkins> astearns: And we can agree on that text regardless of whether UAs can specify something today.
<dbaron> Tantek was also pointing out to me that what myles described with the dots sounds like a new underline style
<TabAtkins> florian: So is that sufficient? If you set color, does that count as "CSS-drawn"?
<fantasai> "Any styling provided by the author must override, not duplicate, any particular aspect of the UA's default styling, even if the exact characteristics of that styling are not expressable in CSS."
<TabAtkins> myles: That seems like a clear intent that they want a pink error, should switch to the CSS one.
<TabAtkins> florian: So what happens then? What style?
<TabAtkins> TabAtkins: The default one.
<TabAtkins> florian: The default is "none".
<tantek> "text-decoration-style:system-spelling-error"
<TabAtkins> fantasai: Cant' change the default value - it's 'text-decoration', used more widely than just ::spelling-error.
<TabAtkins> fremy: We can say that the default pixel is "1px wavy red" in the UA stylesheet, and the browser is free to render whatever way it wants...
<TabAtkins> fremy: Say that if you don't override anything you get the UA rendering, but if you override something you get the other values defined in the spec.
<TabAtkins> florian: Model after outline-style:auto which lets UA do whatever, or is the same as solid. We could do somethign similar here, with t-d-s: auto, which can do what it wants, or fall back to wavy.
<tantek> or even just text-decoration: system-spelling-error
<tantek> since it may affect color/style/etc.
<TabAtkins> florian: Only problem is that then you can use the spelling-error style on any element.
<TabAtkins> TabAtkins: Is taht a problem?
<gregwhitworth> this sounds like possibly an option for env()
<tantek> and there may be no way to decompose the system-spelling-error "look" into components
<TabAtkins> florian: No, I think it's useful, so you can do your own spelling marking in JS or something and have it match with native.
<gregwhitworth> env(spelling-error)
<tantek> same with text-decoration: system-grammar-error
<TabAtkins> astearns: So it sounds like we want to add a system-spelling-error style for text-decoration.
<tantek> just thinking off the top of my head
<TabAtkins> myles: We have a new concern, and have the WK person implementing this.
<tantek> please consider these proposals with a grain of salt. or is that sand. I forget.
<TabAtkins> Daniel: So are you proposing these for each of the error types?
<tantek> haven't through through the connotations for the cascade, but similar to outline right?
<TabAtkins> florian: Just the two.
<TabAtkins> TabAtkins: We only recognzie two with pseudo-elements so far.
<TabAtkins> Daniel: Sounds great to opt into the system-spelling one.
<TabAtkins> Daniel: What if they want to style the errors and achieve the look of the system one.
<TabAtkins> Daniel: So on Mac the spelling errors are always drawn beneath existing text decorations, so if you have underlines, the spelling markers are put below them.
<TabAtkins> Daniel: How do you achieve the same effect?
<TabAtkins> florian: No problem here, I think. The underline isn't set on the spelling error, it's set on some parent element. The spelling error decoration is set on ::spelling-error.
<dbaron> maybe somebody should write up what the proposal is and we should come back to it once people had a chance to read and ask questions?
<astearns> +1
<TabAtkins> Daniel: I specifically mean if you just want, say, a black wavy underline, but definitely underneath the existing underline.
<TabAtkins> fantasai: We have a control for that in Text level 4.
<TabAtkins> florian: text-underline-offset.
<florian> https://drafts.csswg.org/css-text-decor-4/#underline-offset
<TabAtkins> Daniel: Okay, so that would allow offsetting.
<TabAtkins> fantasai: Yeah. The "auto" value is different tho - "auto" just means "UA decides on the offset appropriately", and can use text information or something.
<TabAtkins> fantasai: Currently can't pay attention to other decorations to avoid overlapping, we would need another value for that.
<TabAtkins> astearns: So we're going to resolve that if the ::spelling-error has t-d styles, we'll use CSS drawing for that, and override the system-level decoration.
<tantek> q+ dbaron
<TabAtkins> dbaron: I think that might need to be specific to certain properties.
<tantek> ack dbaron
<TabAtkins> dbaron: Dont' want it to happen just if the selector exists, want specific properties to be specified.
<TabAtkins> florian: The proposal was to have a t-d value of "system-spelling-error" that gives magic rendering, and if that gets overridden, it uses CSS rendering instead.
<tantek> btw feel free to bikeshed the value. e.g. env-spelling-error and env-grammar-error
<tantek> etc.
<TabAtkins> TabAtkins: So back to what dbaron said in the chat, can we get the actual new proposal in the issue, and reoslve on it next week?
<tantek> I have no attachmen to any particular name, presented straw-name only to illustrate concept
<gregwhitworth> I must have missed this - but who is asking for this?
<gregwhitworth> ^ the feature as a whole
<TabAtkins> astearns: Yeah, can we resolve to just do the UA overriding?
<tantek> ok with that
<TabAtkins> RESOLVED: Specify that custom styling of the underline overrides the UA-rendered underline (not just adds to it). Details to be determined in a separate issue.

frivoal added a commit to frivoal/csswg-drafts that referenced this issue Oct 16, 2017
This (together with the 2 previous commits) solves w3c#1828
frivoal added a commit to frivoal/csswg-drafts that referenced this issue Oct 16, 2017
This (together with the 2 previous commits) solves w3c#1828
@frivoal
Copy link
Collaborator Author
frivoal commented Oct 16, 2017

Added a pull request (#1881) to try and address this based on what we discussed during the call. Feedback appreciated

FremyCompany pushed a commit that referenced this issue Oct 17, 2017
This (together with the 2 previous commits) solves #1828
@frivoal frivoal added Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Needs Feedback/Review labels Nov 3, 2017
@frivoal frivoal closed this as completed Nov 3, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-pseudo-4 Current Work
Projects
None yet
Development

No branches or pull requests

4 participants