18.- Superíndices y subíndices con CSS.
La presentación de textos técnicos puede resultar problemática dados los símbolos usados y su forma de presentación. Un claro ejemplo de esto son los superíndices y subíndices que tanto se usan en áreas como las matemáticas, física y química.
En el código que presentamos a continuación veremos como resolver este problema fácilmente y que nuestras formulas presenten un aspecto impecable.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<title>Superíndices y subíndices con CSS.</title>
<style type="text/css">
<!--
.tipographia{
font-family:verdana,arial; /*tipo de letra*/
font-size:16pt; /* tamaño letra */
}
.supidc {
vertical-align:super; /*superindice*/
font-size:12pt;
}
.subidc {
vertical-align:sub; /*subindice*/
font-size:12pt;
}
-->
</style>
</head>
<body>
<div class="tipographia">
<p>3<span class="supidc">2</span> = 9</p>
<p>Acido sulfúrico: SO<span class="subidc">4</span>H<span class="subidc">2</span></p>
<p>Agua: H<span class="subidc">2</span>O</p>
<p>Ecuación de segundo grado: aX<span class="supidc">2</span> + bX + c = 0</p>
</div>
</body>
</html>
