CSS - Easy Way to Change Style of Cents in Money Text

Question

I have a label (literal, whatever), that is being filled with currency ($5000.00). Is there an easy way to style the cents, like make the font-size smaller.

I know I can split the two up, but I am using MVP, and am looking for an easy way than passing all these new properties to the control (4+ of these labels are present).

Open to any suggestions, like a new control instead of the label, whatever you got.

Answer 1

Ideally you need to format it like the following.

$5000.<span class="Cents">00</span>

How you accomplish this is a bit tricky, you can have a "Dollars" and a "Cents" property and then manipulate the string into the format.

Answer 2

I would suggest creating a new control that simply extends to Label/Literal. You can call it MoneyLabel, though Literal would probably be easier to work with. From that point, you can override the Render method to change the HTML output, format the string as you like.

Referencing it is not that tricky, the pages would need to reference the assembly where the class is stored.

In this way, you are not introducing CSS and HTML from the codebehind, not having to create extra JavaScript from what you need, and this is extremely reusable and its into how you code .NET already

Answer 3

You could use javascript and let the client do all the heavy lifting...eg, in jquery (you'd have to define the putSpansAroundDollarsAndCents() function)

<div class="currencyToSplit">$5000.00</div>

$(".currencyToSplit").each(function() { putSpansAroundDollarsAndCents($(this)) });

Answer 4

I suppose in an ideally semantic world you'd probably do something like:-

<span class="currency-symbol">£</span>
<span class="major-currency-unit">5000</span>
<span class="decimal-point">.</span>
<span class="minor-currency-unit">00</span>

and then style away to your heart's content.

Answer 5

I would inherit from the label class, then create a newlabel class, StyledMoneyLabel. I haven't tested this code, but hopefully you'll get the idea.

class StyledMoneyLabel : Label
{
    double money = 0.0;

    Render(HtmltextWriter)
    {
        HtmlSpan dollars = new HtmlSpan(CSS_CLASS);
        dollars.Text = money.ToString(FORMAT_STRING_FOR_GETTING_DOLLARS.
        ///etc for decimals and so forth
     }
}