Scott Hanselman's Computer Zen - Making Negative Numbers turn Red using CSS and Javascript

First time here? Check out the site's "greatest hits" or read a post from the archives. Feel free to leave a comment or ask a question, and consider subscribing to the latest posts via RSS or e-mail. Thanks for visiting!

« ASP.NET MVP Hacks | Main | Coding4Fun Hardware Webcast »

Making Negative Numbers turn Red using CSS and Javascript

Posted in ASP.NET | Javascript

A common thing one wants to do in a table of financial figures is to turn negative numbers red. Given that folks would rather use CSS than <font>, there's some conflicting thinking around the right way to do it.

Some propose adding "negative" a css class like:

but others find that distasteful and say:

number is a data type.
currency is both a presentational instruction and a sub-type of the number data type.
negative is neither type nor presentational — it’s dependent on the data value, not the type or the author’s formatting preference. It doesn’t belong there. [Xaprb]

and go on to provide a clever CSS-only technique that works everywhere but IE6 (demo here).

In the specific situation I've got, I'd like to make the change without changing any server-side code (which precludes adding a "negative" css class) and I need it to work everywhere (which nixes clever css).

So, here's my not-so-clever Javascript solution (Warning, I'm not a Javascript guy so give Phil a few minutes and he'll no doubt include color commentary).

<html>
<head>
    <style type="text/css">
     td.negative { color : red; }
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    function MakeNegative() {
        TDs = document.getElementsByTagName('td');
        for (var i=0; i<TDs.length; i++) {
                var temp = TDs[i];
                if (temp.firstChild.nodeValue.indexOf('-') == 0) temp.className = "negative";
            }
    }
    //-->
    </script>
</head>
<body>
 <table id="mytable">
  <caption>Some Financial Stuff</caption>
  <thead>
    <tr><th scope="col">Date</th><th scope="col">Money is good</th></tr>
  </thead>
  <tbody>
  <tr><td>2006-05-01</td><td>19.95</td></tr>
  <tr><td>2006-05-02</td><td>-54.54</td></tr>
  <tr><td>2006-05-03</td><td>34.45</td></tr>
  <tr><td>2006-05-04</td><td>88.00</td></tr>
  <tr><td>2006-05-05</td><td>22.43</td></tr>
  </tbody>
 </table>
    <script language="JavaScript" type="text/javascript">
  <!--
   MakeNegative();
  //-->
    </script>
</body>

May not be Web 2.0, and it likely doesn't please the standards wonks, but it works.

UPDATE: Similar attempt seen here.

Posted at 2006-05-01 01:07 PM by Scott
Comments [9]
Permalink

Monday, May 01, 2006 12:59:43 PM (Pacific Standard Time, UTC-08:00)

Hmmm. Interesting way to go. That said, I'm not sure about the flexibility. If negative numbers have parens instead of a minus sign, the script would have to know. Or if the currency symbol was in there, it'd have to know (is it $-12.50 or -$12.50?). Generally speaking, you could always just attach to the OnItemCreated event, even in ASPX, and update the cell as needed.

Two things it'd be awesome for:
* Changing the look of stuff post-compile time where you want to deal with it entirely through theme (add that script to your theme).
* Letting non-C# coders update what things look like (folks who aren't allowed to play with the ASPX).

You'd have to be careful if the table changes through AJAX, too, but that wouldn't be too hard to accommodate. You'd also have to be careful about having multiple classes assigned to a cell:

[tr][td class="debitAmount"]-12.50[/td][/tr]

You wouldn't want to overwrite the debitAmount class there, you'd want multiple CSS classes attached, like this:

[tr][td class="debitAmount negative"]-12.50[/td][/tr]

Travis

Monday, May 01, 2006 7:25:20 PM (Pacific Standard Time, UTC-08:00)

Scott, your script will never work when displaying numbers in base -1. I thought someone of your caliber would've recognized that and have taken it into account.

;)

Haacked

Monday, May 01, 2006 7:27:51 PM (Pacific Standard Time, UTC-08:00)

I meant to say it will never work for base -2 number systems (aka negabinary). A base -1 system is pretty useless.

Haacked

Tuesday, May 02, 2006 3:21:46 AM (Pacific Standard Time, UTC-08:00)

Seems like I'm not the only one lately to notice that the CSS emperor has no clothes.

Joe Brinkman

Tuesday, May 02, 2006 4:23:11 AM (Pacific Standard Time, UTC-08:00)

>> Scott, your script will never work when displaying numbers in base -1. I thought someone of your caliber would've recognized that and have taken it into account.

Is base -1 like monochromatic art? You use various sizes of -1? (Note, this is only possible on certain Pentium Processors).

Eric D. Burdo

Tuesday, May 02, 2006 6:45:40 AM (Pacific Standard Time, UTC-08:00)

>> You wouldn't want to overwrite the debitAmount class there, you'd want multiple CSS classes attached...

Travis,
do you know of a clever way of ensuring that any existing classes are not replaced by the new element.className assignment? It seems we need to just append the new class to the element.className attribute.

Steve Harman

Tuesday, May 02, 2006 4:07:36 PM (Pacific Standard Time, UTC-08:00)

Less work for the browser with this:

document.body.innerHTML = document.body.innerHTML.replace(/[td]-/gi,"[td class=\"negative\"]-");

(Please replace [ and ] with < and >)

Nik Kalyani

Friday, May 05, 2006 11:51:19 AM (Pacific Standard Time, UTC-08:00)

Steve's right. You'd want to check for an existing classname and append a space and the new class name.

Haacked

Friday, May 12, 2006 1:00:14 PM (Pacific Standard Time, UTC-08:00)

Let's not forget about HTC :-)

td { behavior: url(numbers.htc); }

in css/htm will do the job too and will be ignored by firefox

----------------- numbers.htc:
<PUBLIC:ATTACH EVENT="onreadystatechange" O`NEVENT="postInit()" />
<SCRIPT LANGUAGE="JScript">
function postInit() {
if(readyState=="complete") {
if(innerText.indexOf('-') == 0) runtimeStyle.color = "red";
}
}
</SCRIPT>

Comments are closed.