Mark deletions and insertions with del and ins HTML tags (multilanguage support)

Estimated reading time of this article: 2 minutes

Good blogging practice recommends to mark deletions or insertions after publication. HTML provides for this purpose del and ins tag. These tags can be styled. But it isn't that simple. Removing a text-decoration such as line-through in a CSS :before meta class is unfortunately not possible. This, is really counter-intuitive, since font-style does not have this limitation.

Additionally, this solution supports multiple languages.

Here's my example:

This is deleted and inserted text.

This is <del datetime="25.08.2012">deleted</del> and <ins datetime="25.08.2012">inserted</ins> text.

Here is how to make it.

Style in your CSS file:

<?php
/**
 * del and ins
 */

del {
 
text-decoration: none;
}

del .del-inner {
 
text-decoration: line-through;
}

ins:before, del:before {
 
content: "[Aktualisierung " attr(datetime) ':\0020';
 
font-style: italic;
}

.
lang-en ins:before, .lang-en del:before {
 
content: "[Update " attr(datetime) ':\0020';
}

ins:after, del:after {
 
content: "]";
 
font-style: italic;
}
?>

Required jQuery for Drupal:

<?php
(function ($) {
 
/**
   * Fix del unterline.
   * Ref: http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work/1823388#1823388
   */
 
Drupal.behaviors.fix_del_underline = {
   
attach: function (context, settings) {
      $(
"del").wrapInner('<span class="del-inner" />');
    }
  };
})(
jQuery);
?>

Required jQuery for other systems:

<?php
 
/**
   * Fix del unterline.
   * Ref: http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work/1823388#1823388
   */
jQuery(document).ready(function($) {
  $(
"del").wrapInner('<span class="del-inner" />');
};
?>