Joel Trauger Joel Trauger - 7 months ago 12
Javascript Question

How can I change the text decoration on numbers only on my web page?

I have a page here: http://joeltrauger.com/games that has some information about a game walkthrough I'm about to post and I was hoping to provide some information about the game on the page. The only problem is that when I load the page the numbers are displayed in a superscript. I cannot find out why or how they are doing this. As far as I can tell, there is no CSS or JavaScript controlling this. The site template I'm using comes from Rick Waalders here.

Sample Code



<p>
Shadow Man is a game originally released for PC, Nintendo 64, Sega Dreamcast, and Sony PlayStation in 1999. A sequel, Shadow Man: 2econd Coming, was released exclusively for PlayStation 2 in 2002. Shadow Man is copyrighted by Acclaim Studios and Acclaim Entertainment. <br /><br />
Watch me play Shadow Man on PC:
</p>


Expected Output



Shadow Man is a game originally released for PC, Nintendo 64, Sega Dreamcast, and Sony PlayStation in 1999. A sequel, Shadow Man: 2econd Coming, was released exclusively for PlayStation 2 in 2002. Shadow Man is copyrighted by Acclaim Studios and Acclaim Entertainment.

Watch me play Shadow Man on PC:

Actual Output



Web Page actual output

Link to web site

I am using Google Chrome as my browser on Windows 8.

Answer

You are using a CSS property font-feature-settings in the body that is affecting how numbers are displayed:

body {
    font-feature-settings: "kern" 1, "liga" 1, "frac" 1, "pnum" 1;
    text-rendering: optimizeLegibility;
    ...
}

The "frac" 1 portion of it enables automatic fractions, which is causing the numbers to superscript automatically. Use this definition instead, if you need that CSS property still:

font-feature-settings: "kern" 1, "liga" 1, "pnum" 1;

Also, there is an error in your CSS for the font-family properties. They are written as such:

font-family: "font-family: " Helvetica Neue ",Helvetica,Arial,sans-serif";

This needs to be

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;