Properly formatting <del> and <ins>

Here are some alternative ways to format <del> and <ins>, with explanations. I’d love to hear your own improvements. Solution so far.

The most straightforward solution is just using a space character between the elements:
Speling Spelling is hard.

However, this is not semantically correct, since the space inside is not part of the text.

You could insert a space character using CSS (del + ins:before {content: ' ';}):
Speling Spelling is hard.

Now the markup is semantically correct, but the content shown to the user is worse: Both display and semantics are wrong.

Inserting a margin between the elements should do the trick (del + ins {margin-left: 0.3em;}):
SpelingSpelling is hard.

This should be semantically correct, but the width of the space character can depend on the browser implementation and the font, so make sure you check the results.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s