sub - Etiqueta HTML<sup/> que afecta la altura de la línea, ¿cómo hacer que sea consistente?
textbox html (12)
Si tengo una etiqueta <sup> en una etiqueta de varias líneas <p> , la línea con el superíndice tiene un espacio de línea mayor que las otras líneas, independientemente de la altura de línea que coloque en el <p> .
Edite para aclarar : no quiero decir que tengo muchos <p> s, cada uno en una sola línea. Tengo un solo <p> con contenido suficiente para provocar el ajuste en múltiples líneas. En algún lugar (en cualquier lugar) en el texto puede haber un <sup> o <sub> . Esto afecta la altura de la línea para esa línea al agregar espacios adicionales arriba / abajo. Si configuro una altura de línea más grande en <p> esto no hace ninguna diferencia al problema. La altura de la línea aumenta, pero el espaciado adicional aún permanece.
¿Cómo puedo hacer que sea coherente, es decir, que todas las líneas tengan el mismo espaciado ya sea que contengan un <sup> o no?
Sus soluciones deben ser de navegador cruzado (IE 6+, FF, safari, opera, cromo)
& sup1, sup2, etc. podría hacer el truco. es un truco HTML para superíndice
Especialmente use esto en el boletín de noticias -
<sup style="font-size:9px; line-height:8px;">®</sup>
He estado usando line-height: normal para el superíndice, que funciona bien para mí en Safari, Chrome y Firefox, pero no estoy seguro de IE.
La razón por la cual la etiqueta <sup> está afectando el espaciado entre dos líneas tiene que ver con una serie de factores. Los factores son: altura de la línea, tamaño del superíndice en relación con la fuente regular, altura de la línea del superíndice y, por último pero no menos importante, ¿cuál es la parte inferior del superíndice que se alinea con ... Si establece ... la altura de la línea de texto normal para estar en una "banda de túnel" (así es como lo llamo) de 135%, luego el texto normal (el 100%) se rellena de blanco con un 35% de más blanco. Para un párrafo, esto se ve así:
p
{
line-height: 135%;
}
Si, a continuación, no hace ningún pad en blanco sobre el superíndice ... (es decir, mantiene su altura de línea en 0), el superíndice solo tiene el ancho de su propio texto ... si le pide al superíndice que sea un porcentaje de la fuente regular (para ejemplo 70%) y lo alinea con la mitad del texto regular (texto medio), puede eliminar el problema y obtener un superíndice que se parece a un superíndice. Aquí está:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}
Me gusta la solución de Milingu Kilu pero prefiero el mismo espíritu
sup { vertical-align:top; line-height:100%; }
Para que todas las líneas sean más altas , para que se vean igual que la línea con el superíndice, defina una line-height de line-height más grande para todo el párrafo
<p style=''line-height:150%''>
o cualquier valor da el efecto que deseas.
Puede parecer extraño, pero así es como describió sus requisitos.
EDITAR: para que todas las líneas se vean iguales cuando solo se necesita más espacio vertical que las demás , TODAS las líneas del párrafo deberán ser más altas.
Esto, como dije, puede no ser una solución atractiva. Tal vez se pueda hacer algo con un lapso de tiempo que haga que el texto con el sub / superíndice sea más pequeño , aparte de eso, no creo que se pueda lograr lo que se desea. Pero me gustaría ver la solución de otra persona.
EDIT2: Por cierto, he probado un pequeño archivo html que contiene
<html>
<head>
<title>line-height</title>
<style>
p {
line-height : 1.5em;
width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow,
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>
Y las líneas tienen la misma altura en FF3.0.14 y Konqueror (no puedo hablar de otros navegadores)
Prefiero usar la length en la alineación vertical. Esto alinea la línea de base del elemento en la longitud dada por encima de la línea de base de su elemento primario.
sup {
font-size: .83em;
vertical-align: 0.25em;
line-height: 0;
}
Tuve el mismo problema y ninguna de las respuestas dadas funcionó. Pero encontré un commit de git con una solución que funcionó para mí:
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
line-height lo arregla, pero es posible que deba hacerlo bastante grande: en mis ajustes tengo que aumentar la altura de la línea a aproximadamente 1.8 antes de que <sup> ya no interfiera con él, pero esto variará de una fuente a otra.
Un posible enfoque para obtener alturas de línea consistentes es establecer su propio estilo de superíndice en lugar del estilo vertical-align: super predeterminado vertical-align: super . Si usa la top , no agregará nada al cuadro de líneas, pero tal vez tenga que reducir el tamaño de la fuente para que encaje:
sup { vertical-align: top; font-size: 0.6em; }
Otro truco que podrías probar es usar posicionamiento para moverlo un poco sin afectar el cuadro de línea:
sup { vertical-align: top; position: relative; top: -0.5em; }
Por supuesto, esto corre el riesgo de chocar con la línea de arriba si no tiene suficiente altura de línea.
Manténgalo fácil:
sup { vertical-align: text-top; }
[ tamaño de letra depende de tu tipo de letra individual]
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
El truco está en establecer la altura de línea del <sup> en 0. @Scott dijo que usara normal, pero esto no siempre funciona.
Esto significa que no tiene que cambiar la altura de línea del texto circundante para acomodar el texto del superíndice. He probado esto en IE7 + y en los otros navegadores principales.
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}