Implement a new Highlight button in tiny MCE using the semantic <mark> html tag

[hugobaeta]

In #27159 we're discussing how some buttons in TinyMCE generate non-semantic html. Part of the proposal there is to remove the underline button because it inserts non-semantic inline styles in our database entries: <span style="text-decoration: underline;">.

The HTML Mark Element (<mark>) represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. There's more information here: ​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

This new buttons should appear next to strike-through/del (since that grouping affects inline relevance - strong, emphasis, delete, mark).

New icon is needed as well as a patch before we can do some user testing.

[azaozz]

In 38315.patch:

• Register the <mark> element in TinyMCE.
• Add WP_Mark command and "Mark" button.
• Remove the "Underline" button.

The button temporarily uses this dashicon: ​https://developer.wordpress.org/resource/dashicons/#admin-customizer. It looks quite good but maybe we can make another one.

@hugobaeta can you test this, or perhaps I should just commit it so it is easier to test.

[hugobaeta]

Thanks for the patch @azaozz - I've been fiddling around with a proper icon for this, and boiled it down to three options. I'd love to get some feedback from @empireoflight and @melchoyce on this - I'm not an icon designer (I'm reminded of that harsh reality every time I try to make one... It's so hard!!), so your input is essential here :)

​Here's the `.ai` file I created with these options. (it has 3 separate artboards with each icon, and the preview mockup)

A preview of normal, hover, and active states:

I've done some research on "highlight" icons, and these three approaches seemed like the ones that made most sense to me. I'm having a hard time making a decision, maybe the third is the clearest on what happens when you click it... but the other two are valid - more abstract - approaches.

Let me know what you think and what the next sep would be here!

[hugobaeta]

Did a quick test of how the <mark> tag would look like in the default themes (+1 one that is based on (​_s starter theme) on Chrome53 running on MacOS10.11.6:

[melchoyce]

Nice :)

From an English-speaking perspective, I find the Option 3 most clear — but this opinion is very much influenced by my understanding of "H" as a stand-in for "Highlight."

The shape in Option 2 reminds me more of a plug, due to its use of negative space. I also like Option 1, but it feels a little abstract — I think it could work, especially since there is a tooltip, but it kind of reminds me of "signature?"

[hugobaeta]

Replying to melchoyce:

From an English-speaking perspective, I find the Option 3 most clear — but this opinion is very much influenced by my understanding of "H" as a stand-in for "Highlight."

I thought about that, but B and I also suffer from the same issue (english language based). But these things are so ubiquitous that the meaning is implied there (but maybe not on highlight).

I also like Option 1, but it feels a little abstract — I think it could work, especially since there is a tooltip, but it kind of reminds me of "signature?"

So I asked my significant other, who's a lawyer, and he said Option 1 is the clearest for him of what "highlight" is. Don't know if this counts as user testing :D

For inspiration I ran a ​search for "Highlight" on the Noun Project (so you can see where I based these ideas off of)

[melchoyce]

Replying to hugobaeta:

Replying to melchoyce:

From an English-speaking perspective, I find the Option 3 most clear — but this opinion is very much influenced by my understanding of "H" as a stand-in for "Highlight."

I thought about that, but B and I also suffer from the same issue (english language based). But these things are so ubiquitous that the meaning is implied there (but maybe not on highlight).

True. Would like to hear some non-English perspectives here.

I also like Option 1, but it feels a little abstract — I think it could work, especially since there is a tooltip, but it kind of reminds me of "signature?"

So I asked my significant other, who's a lawyer, and he said Option 1 is the clearest for him of what "highlight" is. Don't know if this counts as user testing :D

Totally XD

[azaozz]

Ugh, there is a prior ticket about this, #38115. Sorry I missed it, should have used it instead. There is also a sample icon there:

(thanks @mor10)

It seems the first icon from the above suggestions is the way to go?

[mor10]

Happy to see this move forward. I figured since nothing happened on my ticket it was not something people wanted. Guess it was just a question of getting the right eyes on it.

[afercia]

The only a11y concern here is that browsers render the mark element with a yellow background which is not accessible (not sufficient color contrast ratio) but not sure there's much that can be done. It's up to the themes to style it properly.

[EmpireOfLight]

Dragging an angled marker across a flat surface seems to be the most ubiquitous symbol for "highlight" according to a google search for "highlight icon" and the nounproject.com
With that in mind, a combo of #1 and #2 would work best. #1 has the dragged mark, #2 looks more like a highlighter. ​https://cdn4.iconfinder.com/data/icons/design-solid-style/24/highlight-128.png does a nice job of combining the 2 . Anyone want to try something like that?

[mrwweb]

Regarding icons, that 1st icon is very similar to buttons in other editors (Word, G Docs, etc.) where the end-user gets to pick the highlight color. I think that sends the wrong message to users.

I like 3 the most as it's rather literal. I think 2 could work with some refinement to make it more highlighter-y. Just searching for ​highlight text icon there are lots of icons that take an approach similar to the strikethrough icon (i.e. "ABC").

Given the current discussions of semantic formatting, I think we should keep the ​definition and intention of <mark> in mind when thinking about an icon:

The HTML Mark Element (<mark>) represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context.

• In a quotation or another block, the highlighted text typically marks text that is referenced outside the quote, or marked for specific scrutiny even though the original author didn't consider it important.
• In the main text, the highlighted text typically marks text that may be of special relevance for the

Two rough options that play off the strikethrough icon:

[samuelsidler]

I'm all for semantic markup, but removing underline seems like it could be contentious. Have we done any research to know how often that button gets used? Do we know that users would prefer (or even accept) "highlight" instead of "underline"? A better path might be to add the highlight button this release and see what adoption looks like before removing the underline button.

[mor10]

I made the same argument both on Slack and in the "simplify TinyMCE" ticket multiple times but was voted down. That's where the original highlight ticket came from: a replacement that meets the semantics requirement.

[hugobaeta]

@samuelsidler this ticket is about introducing the new <mark> button, not about removing the underline (I know, @azaozz mixed that in here, but that is being addressed in #27159).

Either way, the arguments in #27159 remain: underline produces non-semantic code, and above all creates a potential accessibility issue by creating confusion between underlined text and linked text. The arguments are well described in the other ticket.

[iseulde]

I'm not sure if introducing this for everyone is a good idea. There are not a lot of cases where this markup should be used.

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

See ​https://www.w3.org/TR/html-markup/mark.html.

So this should only be used if you want to mark/emphasise some text that you extracted from somewhere else, like a piece of a block quote. Think about the case where someone adds the text "emphasis (is) mine". <mark> is exactly for that. It is also used for things like search, where the search term is emphasised in all extracts. I'm a bit afraid that people will start using it for other things as well because they desire the effect, but not the semantics. Is there a way we can make this clearer? Should we maybe only enable it inside quotes?

[iseulde]

Also, <mark> shouldn't be seen as a replacement for underlining, except when you used it as an alternative to emphasise in another context.

[mrwweb]

Replying to iseulde:

Is there a way we can make this clearer? Should we maybe only enable it inside quotes?

What about putting it above pre in the formatselect and calling it "Highlight" or "Mark"? Buries it a bit, labels it clearly, and avoids icon issues.

[iseulde]

Another good use case: highlighting as it is done on medium.com. Ironically they are not using <mark> for this. But you can see there are some use cases (search, reader highlight) where it might become confusing if this markup is also used in the original text.

[iseulde]

Replying to mrwweb:

Replying to iseulde:

Is there a way we can make this clearer? Should we maybe only enable it inside quotes?

What about putting it above pre in the formatselect and calling it "Highlight" or "Mark"? Buries it a bit, labels it clearly, and avoids icon issues.

formatselect contains block markup that cannot be used together. You cannot have headings inside headings, paragraphs, or <pre> tags. See ​https://www.w3.org/TR/html-markup/pre.html. This would be a bad place for <mark>.

[EmpireOfLight]

Kindle's way

[azaozz]

Moving to future release as per the above chat. Will need to add styling for <mark> to the default themes as the default browser styling is not good for accessibility.

[karmatosed]

@joen letting you know about this ticket because of Gutenberg.

[karmatosed]

Closing this as work is going on in Gutenberg to resolve highlighting like this. For now, lets close and take from there.