Tag HTML <sup /> che influenza l'altezza della linea, come renderlo coerente?

Se ho un <sup>tag in un tag multi-linea <p>, la linea con l'apice su di esso ha una spaziatura di linea più grande sopra di essa rispetto alle altre linee, indipendentemente dall'altezza della linea che ho inserito <p>.

Modifica per chiarimento : non intendo che ho un sacco di <p>s, ognuna che si trova su una sola riga. Ne ho uno <p>con contenuto sufficiente per causare il wrapping su più righe. Da qualche parte (ovunque) nel testo potrebbe esserci un <sup>o <sub>. Ciò influenza l'altezza della linea per quella linea aggiungendo una spaziatura aggiuntiva sopra / sotto. Se imposto un'altezza di linea maggiore su <p>questo non fa differenza per il problema. L'altezza della linea viene aumentata, ma rimane ancora la spaziatura aggiuntiva.

Come posso renderlo coerente, ovvero tutte le linee hanno la stessa spaziatura, che contengano <sup>o meno?

Le tue soluzioni devono essere cross-browser (IE 6+, FF, safari, opera, chrome)

line-height lo risolve, ma potresti doverlo rendere abbastanza grande: sui miei settaggi devo aumentare l'altezza della linea a circa 1,8 prima che <sup>non interferisca più con esso, ma questo varierà da font a font.

Un possibile approccio per ottenere altezze di linea coerenti è quello di impostare il proprio stile in apice anziché quello predefinito vertical-align: super. Se lo usi topnon aggiungerà nulla alla casella della riga, ma potresti dover ridurre ulteriormente la dimensione del carattere per adattarlo:

sup { vertical-align: top; font-size: 0.6em; }

Un altro trucco che potresti provare è utilizzare il posizionamento per spostarlo leggermente verso l'alto senza influire sulla casella di linea:

sup { vertical-align: top; position: relative; top: -0.5em; }

Naturalmente questo corre il rischio di schiantarsi contro la linea sopra se non si dispone di un'altezza sufficiente.

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

Il trucco è impostare l' <sup>altezza della linea su 0. @Scott ha detto di usare normale, ma questo non sempre funziona.

Ciò significa che non è necessario modificare l'altezza di riga del testo circostante per adattarlo al testo in apice. Ho provato questo in IE7 + e gli altri principali browser.

Ho avuto lo stesso problema e nessuna delle risposte fornite ha funzionato. Ma ho trovato un commit git con una correzione che ha funzionato per me:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

stai tranquillo:

sup { vertical-align: text-top; }

[ la dimensione del carattere dipende dal tuo tipo di carattere]

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Preferisco usare lengthsull'allineamento verticale. Questo allinea la linea di base dell'elemento alla lunghezza data sopra la linea di base del suo genitore.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Il motivo per cui il <sup>tag influenza la spaziatura tra due linee ha a che fare con una serie di fattori. I fattori sono: altezza della riga, dimensione dell'apice in relazione al carattere normale, altezza della riga dell'apice e ultimo ma non meno importante qual è la parte inferiore dell'apice che si allinea con ... Se imposti ... l'altezza della linea del testo normale per essere in una "banda tunnel" (questo è quello che io chiamo) del 135%, quindi il testo normale (il 100%) diventa bianco imbottito del 35% di più bianco. Per un paragrafo questo assomiglia a questo:

 p
    {
            line-height: 135%;
    }

Se poi non apri in bianco il apice ... (cioè mantieni l'altezza della linea a 0) l'apice ha solo la larghezza del suo testo ... se poi chiedi all'apice di essere una percentuale del carattere normale (per esempio 70%) e lo allineate con la metà del testo normale (text-middle), è possibile eliminare il problema e ottenere un apice che assomiglia a un apice. Ecco qui:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Preferisco la soluzione suggerita qui , come esemplificato da questo jsfiddle :

CSS:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

Il bello di questa soluzione è che puoi adattare il posizionamento verticale dell'apice e del pedice, per evitare qualsiasi scontro con la linea sopra o sotto ... in quanto sopra, aumenta o diminuisci semplicemente 0.2emin base alle tue esigenze.

Per rendere più alte tutte le linee , per sembrare uguale alla linea con l'apice, definirne una più grande line-heightper l'intero paragrafo

<p style='line-height:150%'>

o qualunque valore dia l'effetto desiderato.

Può sembrare strano, ma è così che hai descritto le tue esigenze.

EDIT: Al fine di rendere tutte le linee uguali quando solo una ha bisogno di più spazio verticale rispetto alle altre , TUTTE le linee nel paragrafo dovranno essere più alte.

Questa, come ho detto, potrebbe non essere una soluzione interessante. Forse qualcosa può essere fatto con un arco facendo solo il testo con il sub / Apice più piccolo , a parte che non credo ciò che si vuole può essere raggiunto. Ma mi piacerebbe vedere la soluzione di qualcun altro.

EDIT2: Per inciso, ho provato un piccolo file HTML contenente

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

E le linee hanno la stessa altezza in FF3.0.14 e Konqueror (non posso parlare per altri browser)

Ho usato line-height: normale per l'apice, che funziona bene per me in Safari, Chrome e Firefox, ma non sono sicuro di IE.

Usalo specialmente sulla newsletter -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Mi piace la soluzione di Milingu Kilu, ma nello stesso spirito preferisco

sup { vertical-align:top; line-height:100%; }

& sup1, & sup2 ecc. potrebbero fare il trucco. è un trucco HTML da scrivere in apice

Risposta da qui , funziona sia in phantomjs che in HTML incorporato nella posta elettronica:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>