Skip to content
This repository has been archived by the owner on Jul 23, 2024. It is now read-only.

Highlight #63

Closed
jodator opened this issue Oct 26, 2017 · 9 comments
Closed

Highlight #63

jodator opened this issue Oct 26, 2017 · 9 comments
Labels

Comments

@jodator
Copy link

jodator commented Oct 26, 2017

Similar to font background color but with more semantic meaning.

The highlight feature is inspired by highlighting a text on paper with a marker pen. As such the approach in implementing this in HTML code might be different. I image this as applying a defined CSS class to a text that later might be styled depending on a web-page theme.

Rather then adding a background color to a text the highlight feature would rather mark this text with a meaning like "important" or "check with legal department". The visual style of such highlight must be also defined.

@Comandeer
Copy link
Member

There is dedicated HTML element for such use cases: mark.

@fredck
Copy link
Contributor

fredck commented Oct 30, 2017

The <mark> element fits perfectly to this case. This is how Chrome styles it by default:

image

@jodator
Copy link
Author

jodator commented Oct 30, 2017

The same on Firefox:
selection_023

@Comandeer
Copy link
Member

Comandeer commented Mar 31, 2018

Added draft for this feature in eac4d80.

@duracell80
Copy link

duracell80 commented May 21, 2018

In HTML4 this must be done with a class and not an inline style. This is because of accessibility. The editor should not override user stylesheet settings particularly not for background colors of text.

In HTML 5 ... < mark >highlighted text here< / mark > should take the browser default, we should not demand yellow.
https://www.w3schools.com/tags/tag_mark.asp

Users can then style this how they need it to be styled to keep it readable for them, the editor shouldn't assume highlighted text must always be yellow. White text on a black background should always be the first high contrast option, though I know from experience black text on yellow is what project contributors will want to see.

mark {
    background-color: yellow;
    color: black;
}

https://www.boia.org/blog/the-most-common-web-accessibility-issues-to-avoid

Color. Colors should not be used to convey meaning. If developers wish to use colors to communicate something meaningful, alternative options should also be provided to communicate the meaning. This applies to features such as highlighted text.

With this example ... the green is hard to read, if dark background the text must be white

low-constrast

@duracell80
Copy link

Add "high contrast" as a marker (white text on black bg)

add-high-contrast-options

@Comandeer
Copy link
Member

@duracell80 it seems that you are missing feature in CKEditor 5. In that case, please report a feature request.

@duracell80
Copy link

duracell80 commented May 21, 2018

Done, I don't think this feature currently is "fully accessible". The green marker in particular.

@Comandeer
Copy link
Member

Ok, it seems like a stable feature. I propose moving it from draft to the recommendation status. I'll wait 3 days for objections and then mark it as recommendation.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

4 participants