HTML: ¿puedo colocar texto de subíndice justo debajo del superíndice?

Question

Tengo una palabra, que tiene tanto superíndice como subíndice. Ahora me hacen como este word<sub>1</sub><sup>2</sup> Y sale el siguiente:

word12 .

cómo puedo poner el subíndice exactamente bajo el superíndice?

Answer 1

Bueno, no se puede hacer eso con HTML simple y corriente. Como se mencionó, usa CSS. ¡Pero también querrás un poco de posicionamiento!

Answer 2

Hay muchas maneras en que puede hacer esto con CSS, y cada una tiene sus pros y sus contras. Una forma sería usar posicionamiento relativo. Un ejemplo rápido podría funcionar así:

<span class="fraction"> 
    <span class="numerator">3</span> 
    <span class="denominator">4</span> 
</span> 

Y el CSS para ir junto con esto:

span.fraction { } 

/* Or child selector (>) if you don't care about IE6 */ 
span.fraction span.numerator { 
    position:relative; 
    top:-0.5em; 
} 

span.fraction span.denominator { 
    position:relative; 
    top:0.5em; 
    left:-0.5em; /* This will vary with font... */ 
} 

Este ejemplo particular funcionaría mejor si se utiliza una fuente de espacio fijo.

Answer 3

Aquí hay una solución limpia. Crear dos clases CSS:

.nobr { 
    white-space: nowrap; 
} 
.supsub { 
    display: inline-block; 
    margin: -9em 0; 
    vertical-align: -0.55em; 
    line-height: 1.35em; 
    font-size: 70%; 
    text-align: left; 
} 

Es posible que ya tenga la clase "nobr" como reemplazo <nobr>. Ahora para expresar la fórmula molecular para el sulfato, utilice la clase "supsub" como sigue:

<span class="nobr">SO<span class="supsub">2-<br />4</span></span> 

es decir, incluir su superíndice/subíndice dentro de la clase "supsub", y poner un < br/> entre ellos. Si desea que sus superíndices/subíndices sean un poco más grandes o más pequeños, ajuste el tamaño de la fuente y luego modifique con la alineación vertical y la altura de línea. La opción -9em en el margen es evitar que los superíndices/subíndices se agreguen a la altura de la línea que los contiene; cualquier gran valor servirá.

Answer 4

Utilice el estilo de tabla CSS (excepto para IE8 y abajo). HTML:

<span class="over-under"> 
    <span class="over">sup</span> 
    <span class="under">sub</span> 
</span> 

CSS:

span.over-under { 
    position: relative; 
    top: 1em; 
    display: inline-block; 
} 
span.over-under > .over { 
    display: table-row; 
} 
span.over-under > .under { 
    display: table-row; 
} 

violín: https://jsfiddle.net/FredLoney/Loxxv769/4/

Además de ser más simple que ajustes de posición relativa, esta solución evita distorsiones de diseño que surgen de esas alternativas. Ver, por ejemplo, https://jsfiddle.net/FredLoney/da89nyk2/1/.