Indicating Sarcasm

I came up with the idea of putting everything sarcastic in blue. At first glance it sounded good but the whole point of sarcasm is that the humor of the statement sinks in after much of it's been said. An immediate indicator of sarcasm such as blue text just serves to ruin the humor in the statement.

A better idea would be to make the sarcastic portion of the statement not look any different than the surrounding text, but have it change upon being hovered over. So for example, I'm dead sexy or Achieve power through change, stick a dime in a light socket. This is easily done (especially in non Internet Explorer browsers). The code is below.

<style type="text/css">
<!--
  span.sarcasm:hover,span.sarcasm.shover{
   color: #0000ff; 
  }
-->
</style>

You can incorporate this style into your custom style sheet but for the sake of beginners we are going to show it as self-contained. Adjust the shade of blue as needed. Now for the JavaScript (to make the behaviors work with Internet Explorer), lifted mostly from about.com's JavaScript section and Suckerfish Dropdowns.

<script language="JavaScript">
  <!--
  document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
      var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
      }
    return retnode;
  };
  sfHover = function() {
  if (document.all && document.getElementById) {
    var sfEls = document.getElementsByClassName("sarcasm");
    for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
        this.className+=" shover";
      }
      sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(" shover\\b"), "");
      }
    }
    }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
  // -->
</script>
  

Now all you have to do in your source code is put <span class="sarcasm" title="(sarcasm)">Sarcastic Saying</span>

I know some folks out there might be hesitent to implement this because people might confuse sarcastic text with link text, but this script does not turn the person's curser into a finger, which is a link indicator.

Back to Main