Step 1: The HTML
The way to get around this problem is to nudge the superscript and subscript out of the whole flow a little bit so if you have the following HTML:
<p>Step 1: The HTML
The way to get around this problem is to nudge the superscript and subscript out of the whole flow a little bit so if you have the following HTML:
<p>My name is Doctor Womac and I am going to teach you all about chemical formulae.
A chemical formula is a way to describe the chemical elements that make up a particular chemical compound.
It consists of chemical symbols to covey the elements and numbers to show the number of atoms of each element.
H<span class="atoms">2</span>S0<span class="atoms">4</span> is the chemical formula for sulphuric acid, for example.
The charge of an ion can be displayed in superscript, such as Au<span class="charge">2+</span>.
This concludes my lesson.
I must rush off home now because I have a problem with some radioactive phosphate.</p>
Step 2: Vertically aligning
You can achieve the desired effect with the following CSS:
body { font: 80% "Times New Roman", Times, serif }
p { line-height: 1.5 }
.charge {
position: relative;
bottom: 0.5em;
color: red;
font-size: 0.8em;
}
.atoms {
position: relative;
top: 0.3em;
color: blue;
font-size: 0.8em;
}
Whereas vertical-align will mess about with the line-height (try changing the line-height of the paragraph to 1 and replacing bottom: 0.5em with vertical-align: 0.5em), simply pushing the required elements up or down a bit with top or bottom makes things much easier and neater.
Step 2: Vertically aligning
You can achieve the desired effect with the following CSS:
body { font: 80% "Times New Roman", Times, serif }
p { line-height: 1.5 }
.charge {
position: relative;
bottom: 0.5em;
color: red;
font-size: 0.8em;
}
.atoms {
position: relative;
top: 0.3em;
color: blue;
font-size: 0.8em;
}
Whereas
vertical-align will mess about with the line-height (try changing the line-height of the paragraph to 1 and replacing bottom: 0.5em with vertical-align: 0.5em), simply pushing the required elements up or down a bit with top or bottom makes things much easier and neater.Step 1: The HTML
The way to get around this problem is to nudge the superscript and subscript out of the whole flow a little bit so if you have the following HTML:
My name is Doctor Womac and I am going to teach you all about chemical formulae.
A chemical formula is a way to describe the chemical elements that make up a particular chemical compound.
It consists of chemical symbols to covey the elements and numbers to show the number of atoms of each element.
H2S04 is the chemical formula for sulphuric acid, for example.
The charge of an ion can be displayed in superscript, such as Au2+.
This concludes my lesson.
I must rush off home now because I have a problem with some radioactive phosphate.
Step 2: Vertically aligning
You can achieve the desired effect with the following CSS:
body { font: 80% "Times New Roman", Times, serif }
p { line-height: 1.5 }
.charge {
position: relative;
bottom: 0.5em;
color: red;
font-size: 0.8em;
}
.atoms {
position: relative;
top: 0.3em;
color: blue;
font-size: 0.8em;
}
Whereas vertical-align will mess about with the line-height (try changing the line-height of the paragraph to 1 and replacing bottom: 0.5em with vertical-align: 0.5em), simply pushing the required elements up or down a bit with top or bottom makes things much easier and neater.Once upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.
If ever there was ...[Big load of text]... humble pea is it.
Once upon a time in a blueberry bubblegum land...[Big load of text]...a lost sunfish from the Sweet Spaghetti River.
Mother Nature has never created ...[Big load of text]... something so flawless.
If ever there was ...[Big load of text]... humble pea is it.
Mother Nature has never created ...[Big load of text]... something so flawless.
It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.
The green seed ...[Big load of text]... favorite for good reason.
"It is my educated opinion that this is complete and utter tosh."
Patrick Griffiths
The green seed ...[Big load of text]... favorite for good reason.
