subíndice y superíndice para el mismo elemento

¿Hay alguna manera de agregar tanto el subíndice como el superíndice al mismo elemento? Si lo hagosubíndice y superíndice para el mismo elemento

Sample Text<sub>Sub</sub><sup>Sup</sup>

el superíndice aparece después del subíndice. Una idea que tuve fue hacer algo como:

<table> 
    <tr> 
     <td rowspan='2' valign='center'>Sample Text</td> 
     <td>Sup</td> 
    </tr> 
    <tr> 
     <td>Sub</td> 
    </tr> 
</table>

Parece que hace el trabajo, pero es bastante feo. Alguna mejor idea?

Gracias!

Fuente

2010-09-18 Amati

¿Qué está realmente tratando de lograr? Me arriesgaría a suponer que deberías mirar MathML, pero tu ejemplo ha sido demasiado abstracto como para decirlo. – Quentin

Es solo algunos datos que quiero que se muestren de una manera específica. Nada especial como matemáticas, física, química ... etc. Comprobé MathML pero IE no lo soporta de forma nativa y eso significa que no puedo usarlo. – Amati

No soy ningún gurú de la CSS, pero usted podría intentar algo en la línea de http://jsfiddle.net/TKxv8/1/

hay una gran cantidad de valores codificados y los efectos sobre otros elementos a su alrededor sólo puede ser encontrado después, pero es Un buen lugar para comenzar.

Sample Text 
<span class='supsub'> 
    <sup class='superscript'>Sup</sup> 
    <sub class='subscript'>Sub</sub> 
</span> 

.supsub {position: absolute} 
.subscript {color: green; display:block; position:relative; left:2px; top: -5px} 
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}

Fuente

2010-09-18 19:10:31 CyberDude

¡Gracias, exactamente lo que necesitaba! Es posible que desee incluir su código aquí, en caso de que alguien tenga el mismo problema, ya que la versión jsfiddle puede eliminarse. – Amati

.supsub {position: absolute} .subíndice {color: verde; bloqueo de pantalla; posición: relativa; izquierda: 2px; arriba: -5px} .superscript {color: rojo; bloqueo de pantalla; posición: relativa; izquierda: 2px; arriba: -5px} texto de muestra ^Sup_Sub – CyberDude

lo del formato - que no trabajan en los comentarios y No agregaría una nueva respuesta – CyberDude

Bueno, puede especificar la posición de sup relativa al borde derecho de Sample Text.

http://jsfiddle.net/a754h/

Fuente

2010-09-18 18:50:40

No muy seleccionable. MathML sería mejor, aunque no es ampliamente compatible. –

Ben, ¿puedo preguntar a qué te refieres con "no muy seleccionable"? ¿Quiere decir si alguien quiere copiar/pegar los datos? – Amati

parece fallar (en relación con las expectativas) cuando el sup es más largo que el sub, y el texto continúa después. en este ejemplo, el ancho está determinado por el sub. las posiciones super just, pero no expande el cuadro delimitador. –

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á.

Fuente

2013-06-10 08:48:42 Dragonfly

Ésta es similar al enfoque CyberDudes, además, se sangra el texto siguiente en función del ancho de la sub y sup:

http://jsfiddle.net/jwFec/1/

Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br /> 

<style> 
.supsub { 
    display: inline-block; 
} 

.supsub sup, 
.supsub sub { 
    position: relative; 
    display: block; 
    font-size: .5em; 
    line-height: 1.2; 
} 

.supsub sub { 
    top: .3em; 
} 
</style>

Fuente

2014-07-23 10:35:33 Thomas

subíndice y superíndice para el mismo elemento

Respuesta

Cuestiones relacionadas