CODEWITHSUNDEEP
htmlcss
Steen
Steen

Reputation: 2877

Using CSS or other instead of js to display decimal as superscript

I have a lot of:

<span class="price">17.998,80</span>

Customer wants me to replace with:

<span class="price">17.998<sup>80</sup></span>

...fine, lets javascript... BUT WAIT!

Could the equivalent result not be obtained via some fancy CSS/CSS trick?

(large $ figures, no decimal, superscript cents - , is my decimal delimiter)

Kind Regards,

Steen

NOTE: This works fine:

$('span.price').html($('span.price').html().replace(',','<sup>')+'</sup>');

BUT preference is to ALL CSS/CSS3 solution

Upvotes: 5

Views: 7970

Answers (4)

ashleedawg
ashleedawg

Reputation: 21639

CSS Superscript and Subscript:

.super{
  vertical-align: super;
 }
.sub{
  vertical-align: sub;
 }

(Source)

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201668

No, there is no CSS trick for the purpose: you cannot refer to digits after decimal point in content without turning them into an element.

A sup element is not really adequate for the purpose, since it puts characters in a superscript position so that they look like an exponent. A better approach is to generate

<span class="price">17.998<span class="cents">80</span></span>

and style it with

 .cents {
   font-size: 0.7em;
   position: relative;
   bottom: 0.25em;
 }

Upvotes: 3

jalynn2
jalynn2

Reputation: 6457

I think you are stuck with Javascript unless you can get the service you are calling with AJAX to return each price in two elements: Euros and cents:

<span class="priceEuros">17.998</span>,<span class="priceCents">80</span>

Of course, if they are separate elements, they would be easy to style separately.

Upvotes: 0

Andrea Turri
Andrea Turri

Reputation: 6500

The best way is to find all your price and add the HTML <sup> ... </sup> because if someone do not load javascript there is no HTML markup.

And there is no CSS trick to to that.

The only thing that CSS do is to apply a style to the <sup> element.

Upvotes: 4

Related Questions