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

Use <s> for strikethrough, not <del> #14389

Merged
merged 2 commits into from
Mar 14, 2019
Merged

Use <s> for strikethrough, not <del> #14389

merged 2 commits into from
Mar 14, 2019

Conversation

ellatrix
Copy link
Member

Description

The s element falls under text-level semantics, just like bold and italic.

The s element represents contents that are no longer accurate or no longer relevant.

The s element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the del element.

In this example a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element

The ins and del elements represent edits to the document.

The ins and del element are meant to be used together. They also share the same attribute spec (cite and datetime).

The del element represents a removal from the document.

del elements should not cross implied paragraph boundaries.

The following shows a "to do" list where items that have been done are crossed-off with the date and time of their completion.

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

https://html.spec.whatwg.org/multipage/edits.html#the-del-element

What about other editors?

  • TinyMCE has always used inline styles for it. It was WordPress that mapped it to the del element.
  • CKEditor uses the s element. Some interesting discussion.
  • Someone from CKEditor put together a table of what elements are used for different formats in a bunch of editors.

Thoughts?

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.

@ellatrix ellatrix added this to the 5.3 (Gutenberg) milestone Mar 13, 2019
Copy link
Member

@aduth aduth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The semantics strike me as being correct justification, yes 👍

@youknowriad
Copy link
Contributor

Is there a way to provide a "deprecated" version :P or away to support previous content :) (to be able to untoggle them). I don't consider this critical but thought I'd ask.

@ellatrix
Copy link
Member Author

@youknowriad No, there isn't at the moment. A button cannot be assigned to two formats. I think it's fine since strikethrough is a much lesser used format, and you can still remove it in HTML view.

Perhaps we should consider adding a "clear formatting" button at some point which could clear all known and unknown formatting.

@youknowriad
Copy link
Contributor

Yes, It's fine for me but we can think about it if we notice this pattern of changing formats more. Let's move forward.

@ellatrix
Copy link
Member Author

Yeah, I agree if we'd want to change bold or italic. Speaking of which, let me check who uses i and em. This is a much tougher choice, I think it's ok to get leave it as is.

@ellatrix ellatrix merged commit 13334d7 into master Mar 14, 2019
@ellatrix ellatrix deleted the fix/strikethrough branch March 14, 2019 09:42
@ellatrix
Copy link
Member Author

Ugh, I now just realise that we should update paste.

youknowriad pushed a commit that referenced this pull request Mar 20, 2019
* Use <s> for strikethrough, not <del>

* Update e2e test
youknowriad pushed a commit that referenced this pull request Mar 20, 2019
* Use <s> for strikethrough, not <del>

* Update e2e test
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants