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>

UPDATE: This is a pretty old idea, I don't think you need the JavaScript for Internet Explorer users unless you have a lot of Internet Explorer 6 people still coming to your site. Also one could use different colors for different inflections. For example things meant to be taken as poetry could show up as red when hovered over. Also with some JQuery magic there could be a delay before the hover was active so that one couldn't ascertain something as sarcastic right away. For mobile one could switch hovering over with holding one's finger on the text.

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

Back to Main