subindice - ¿Superíndice solo en CSS?
superindice css (13)
¿Cómo puedo hacer superíndice, solo en CSS?
Tengo una hoja de estilo donde marque los enlaces externos con un carácter superíndice, pero me cuesta mucho alinear correctamente el carácter
Lo que tengo actualmente, se ve así:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
pero no funciona
Naturalmente, usaría la etiqueta <sup> , solo si el content permitiera HTML ...
Aquí está la manera exacta en que usa sup:
.superscript{
vertical-align:super;
font-size:smaller;
}
Encontrado esto a través de Google Chrome inspeccionar elemento.
si parece que quieres "vertical-align: text-top"
Esta es otra solución limpia:
sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */
De esta manera, aún puede usar las etiquetas sup / sub, pero ha corregido su comportamiento idioso para siempre arruinar la altura de la línea del párrafo .
Así que ahora puedes hacer:
<p>This is a line of text.</p>
<p>This is a line of text, <sub>with sub text.</sub></p>
<p>This is a line of text, <sup>with sup text.</sup></p>
<p>This is a line of text.</p>
Y la altura de la línea de tu párrafo no debe ser jodida.
Probado en IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9
Probé usando p {line-height: 1.3;} (que es una buena altura de línea a menos que quieras que tus líneas se peguen demasiado) y aún funciona, porque "-0.6em" es una cantidad tan pequeña que también con eso altura de línea, el texto sub / sub se ajustará y no se superpondrán.
Olvidé un detalle que podría ser relevante. Siempre uso DOCTYPE en la primera línea de mi página (específicamente, uso el HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ). Por lo tanto, no sé si esta solución funciona bien cuando el navegador está en modo remoto (o no en modo estándar) debido a la falta de DOCTYPE o a un DOCTYPE que no activa el modo Estándar / Casi Estándar.
Estaba trabajando en una página con el objetivo de tener un texto claramente legible, con elementos en superíndice NO cambiando los márgenes superior e inferior de la línea, con las siguientes observaciones:
Si para su texto principal tiene line-height: 1.5em por ejemplo, debe reducir la altura de la línea del texto del superíndice para que aparezca correctamente. Utilicé line-height: 0.5em .
Además, vertical-align: super funciona bien en la mayoría de los navegadores pero en IE8 cuando tiene un elemento superíndice presente, el resto de esa línea se empuja hacia abajo. Así que en lugar de eso, utilicé vertical-align: baseline junto con una top y position: relative negativas position: relative para lograr el mismo efecto, que parece funcionar mejor en todos los navegadores.
Entonces, para agregar a las "implementaciones locales":
.superscript {
font-size: .83em;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
Honestamente, no veo el punto de hacer superíndices / subíndices solo en CSS. No hay un atributo CSS práctico para eso, solo un montón de implementaciones locales que incluyen:
.superscript { position: relative; top: -0.5em; font-size: 80%; }
o utilizando la alineación vertical o estoy seguro de otras maneras. La cosa es que empieza a complicarse:
- Espaciado de superíndice CSS en altura de línea;
- Tenga cuidado con CSS for Superscript / Subcript en cuanto a por qué podría decirse que no debería aplicar estilo a superscript / subcript con CSS;
Cabe destacar el segundo punto. Normalmente, el superíndice / subíndice no es realmente un problema de estilo, pero es un indicador de significado
Nota al margen: vale la pena mencionar esta lista de entidades para expresiones comunes de superíndice y subíndice , aunque esta pregunta no se relaciona con eso.
Las etiquetas sub / sup están en HTML y XHTML. Sólo usaría esos.
En cuanto al resto de su CSS, los atributos después de pseudoelemento y contenido no son ampliamente compatibles. Si realmente no quiere poner esto manualmente en el HTML, creo que una solución basada en Javascript es su próxima mejor opción. Con jQuery esto es tan simple como:
$(function() {
$("a.external").append("<sup>+</sup>");
};
La documentación de CSS contiene el equivalente de CSS estándar de la industria para todas las construcciones HTML. Es decir: la mayoría de los navegadores web en estos días no manejan de forma explícita SUB , SUP , B , I , etc. - (se convierten en algo así como) se convierten en elementos SPAN con las propiedades CSS adecuadas, y el motor de procesamiento solo se ocupa de eso.
La página es el Apéndice D. Hoja de estilo predeterminada para HTML 4
Los bits que quieres son:
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
La propiedad de CSS font-variant-position está bajo consideración y puede ser la respuesta a esta pregunta. A partir de principios de 2017, solo Firefox lo admite, sin embargo.
.super {
font-variant-position: super;
}
Ver MDN .
Lo siguiente se toma de html.css interno de Mozilla Firefox:
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
Entonces, en tu caso sería algo como:
.superscript {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
No estoy seguro de si esto está relacionado, pero he resuelto mi problema con ² Las entidades HTML como no pude agregar ninguna otra etiqueta html dentro de una <label> . Así que la idea era usar códigos ASCII en lugar de css o etiquetas HTML.
Puede hacer superíndice con vertical-align: super , (más una reducción de font-size adjunta).
Sin embargo, asegúrese de leer las otras respuestas aquí, particularmente las de paulmurray y cletus , para obtener información útil.
Si está cambiando el tamaño de la fuente, es posible que desee dejar de reducir los tamaños con esta regla:
sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}
http://htmldog.com/articles/superscript/ Esencialmente:
position: relative;
bottom: 0.5em;
font-size: 0.8em;
Funciona bien en la práctica, por lo que puedo decir.
.superscript {
position: relative;
top: 5px;
font-size: 90%;
vertical-align: super;
}