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" />');};?>