I am displaying text from MySQL database which has a text like this "measurement of trace gases CH4, N2O and CO2 and the processes governing their production and emissions". The text gets saved through a text area. I wanted to apply superscript/subscript to CH4, N20 and CO2 using javascript/jquery when the text is displayed in the HTML Doc? Please let me know if this is possible?

I am displaying text from MySQL database which has a text like this "measurement of trace gases CH4, N2O and CO2 and the processes governing their production and emissions". The text gets saved through a text area. I wanted to apply superscript/subscript to CH4, N20 and CO2 using javascript/jquery when the text is displayed in the HTML Doc? Please let me know if this is possible?

• javascript
• jquery
• html

2 Answers 2

The simplest method is to process the data so that the digits are placed inside sub markup, e.g. CH4 bees CH<sub>4</sub>. This, however, produces typographically poor results (including uneven line spacing), so I would suggest generating CH<span class=sub>4</span> and using the CSS rules

.sub {
  vertical-align: 0;
  position: relative;
  top: 0.8ex; 
  font-size: 80%;
}

The values used can be tuned, of course, perhaps depending on font.

Other options include using subscript characters (as suggested in @TachyonVortex’s answer) and using OpenType features for subscripting with font-feature-settings (limited browser support, limited font support).

You can use the subscript number characters in Unicode: CH₄, N₂O, CO₂.

• Unicode Character 'SUBSCRIPT FOUR' (U+2084)
• Unicode Character 'SUBSCRIPT TWO' (U+2082)

You could write a regex to match chemical formulae (eg: CH4) and reformat them using the subscript number characters (CH₄).

You have two options:

1. Store the text from the <textarea> in the database without any reformatting. Then when you render the HTML page, add the subscript numbers, either server-side (eg: PHP) or client-side (eg: JavaScript).
2. Reformat the text before writing it to the database.

Once the subscript numbers have been added, you need to ensure that you're using the UTF-8 charset from that point onwards, to avoid corrupting the characters.