HTML <sup /> -Tag, das die Zeilenhöhe beeinflusst. Wie kann es konsistent gemacht werden?

130

Wenn ich ein <sup>Tag in einem mehrzeiligen <p>Tag habe, hat die hochgestellte Zeile einen größeren Zeilenabstand darüber als die anderen Zeilen, unabhängig davon, welche Zeilenhöhe ich auf die gesetzt habe <p>.

Zur Verdeutlichung bearbeiten : Ich meine nicht, dass ich viele <p>s habe, die sich jeweils in einer einzelnen Zeile befinden. Ich habe eine Single <p>mit genügend Inhalten, um mehrere Zeilen zu umbrechen. Irgendwo (irgendwo) im Text kann es ein <sup>oder geben <sub>. Dies wirkt sich auf die Linienhöhe für diese Linie aus, indem ein zusätzlicher Abstand über / unter hinzugefügt wird. Wenn ich eine größere Zeilenhöhe einstelle, <p>macht dies keinen Unterschied für das Problem. Die Zeilenhöhe wird erhöht, der zusätzliche Abstand bleibt jedoch bestehen.

Wie kann ich es konsistent machen - dh alle Zeilen haben den gleichen Abstand, unabhängig davon, ob sie ein enthalten <sup>oder nicht?

Ihre Lösungen müssen browserübergreifend sein (IE 6+, FF, Safari, Oper, Chrome).

Andrew Bullock
quelle

Antworten:

172

Die Zeilenhöhe behebt das Problem, aber Sie müssen es möglicherweise ziemlich groß machen: Bei meinen Einstellungen muss ich die Zeilenhöhe auf etwa 1,8 erhöhen, bevor sie <sup>nicht mehr beeinträchtigt wird. Dies variiert jedoch von Schriftart zu Schriftart.

Ein möglicher Ansatz, um konsistente Linienhöhen zu erzielen, besteht darin, anstelle der Standardeinstellung ein eigenes hochgestelltes Styling festzulegen vertical-align: super. Wenn Sie es verwenden top, wird dem Zeilenfeld nichts hinzugefügt, aber Sie müssen möglicherweise die Schriftgröße weiter reduzieren, damit es passt:

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

Ein weiterer Hack, den Sie versuchen könnten, besteht darin, die Positionierung zu verwenden, um sie ein wenig nach oben zu verschieben, ohne das Zeilenfeld zu beeinträchtigen:

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

Dies birgt natürlich die Gefahr, dass Sie in die darüber liegende Linie stürzen, wenn Sie nicht genügend Linienhöhe haben.

Bobince
quelle
1
vertikal ausrichten behoben, danke. Selbst eine massive Zeilenhöhe von 300% + behebt dies nicht in IE8, Chrome 3 oder FF 3.5. Ich bekomme immer noch 1-2px Unterschied.
Andrew Bullock
Wie bereits erwähnt, funktioniert dies nicht immer, wenn die Linienhöhe zu eng ist.
Ric
5
@simPod: Gleiche Situation vertical-align: bottom(obwohl das nicht so viel bringt wie top) und dann position:relative;mit einem positiven top.
Bobince
Eigentlich würde ich {vertikal ausrichten: super} bevorzugen, da es, soweit ich mich erinnere, einige Anzeigefehler mit Zeilenhöhe in IE8 verhindert. Ich würde versuchen, die Positionierung nicht zu oft zu verwenden, wenn es bessere Alternativen gibt. Eine unachtsame Positionierung der Oberseite kann später im Projekt zu kaskadierten Problemen führen.
Alle Bits sind gleich
88
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;
}

Der Trick besteht darin, die <sup>Zeilenhöhe des S auf 0 zu setzen. @Scott soll normal verwenden, aber das funktioniert nicht immer.

Dies bedeutet, dass Sie die Zeilenhöhe des umgebenden Textes nicht ändern müssen , um den hochgestellten Text aufzunehmen. Ich habe dies in IE7 + und den anderen gängigen Browsern getestet.

Ric
quelle
2
+1. Wie bereits erwähnt, verhindert dies Konflikte mit den anderen line-heightAttributen. Es kann line-heightnatürlich immer noch Schnittpunkte mit der vorherigen Linie verursachen, wenn der Gesamtwert auf klein eingestellt ist.
Chris Krycho
fantastische Lösung, macht Chrom nicht mehr schlecht benehmen! Die bisher einfachste Antwort.
Aktau
Ich habe gerade festgestellt, dass dies nicht standardmäßige Zeilenhöhen des umgebenden Textes beeinflusst. Verwenden Sie line-height: 100%in diesem Fall.
Matthias Hauert
Das funktioniert perfekt. Zusätzlich haben mögliche Werte für line-heightI 0, 1, 1em & 100% gefunden. All dies funktioniert sicherlich in Chrome & Firefox.
ClarkeyBoy
Ich bevorzuge diese Antwort auch für meinen Anwendungsfall: Diese Antwort funktioniert bei E-Mails in Google Mail, die akzeptierte Antwort nicht. stackoverflow.com/questions/21118072/…
Mshnik
7

Ich hatte das gleiche Problem und keine der gegebenen Antworten funktionierte. Aber ich habe ein Git-Commit mit einem Fix gefunden, der für mich funktioniert hat:

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

halte es einfach:

sup { vertical-align: text-top; }

[ Schriftgröße abhängig von Ihrer individuellen Schrift]

Milingu Kilu
quelle
2
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}
Anup Puri
quelle
3
Bitte geben Sie eine Erklärung mit Ihrem Code an, damit das OP daraus lernen kann.
EBH
1

Ich bevorzuge lengthdie vertikale Ausrichtung. Dadurch wird die Grundlinie des Elements auf die angegebene Länge über der Grundlinie seines übergeordneten Elements ausgerichtet.

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

Der Grund, warum das <sup>Tag den Abstand zwischen zwei Zeilen beeinflusst, hängt mit einer Reihe von Faktoren zusammen. Die Faktoren sind: Zeilenhöhe, Größe des hochgestellten Zeichens im Verhältnis zur regulären Schriftart, Zeilenhöhe des hochgestellten Zeichens und nicht zuletzt, wie der untere Rand des hochgestellten Zeichens mit ... Wenn Sie ... die Zeilenhöhe einstellen von regulärem Text in einem "Tunnelband" (so nenne ich es) von 135%, dann wird regulärer Text (100%) weiß gepolstert mit 35% mehr Weiß. Für einen Absatz sieht das so aus:

 p
    {
            line-height: 135%;
    }

Wenn Sie dann den hochgestellten Text nicht weiß auffüllen ... (dh die Zeilenhöhe auf 0 halten), hat der hochgestellte Text nur die Breite seines eigenen Textes ... wenn Sie dann den hochgestellten Index bitten, ein Prozentsatz der regulären Schriftart zu sein (z Beispiel 70%) und wenn Sie es an der Mitte des regulären Textes (Text-Mitte) ausrichten, können Sie das Problem beseitigen und einen hochgestellten Index erhalten, der wie ein hochgestellter Text aussieht. Hier ist es:

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

Ich bevorzuge die hier vorgeschlagene Lösung , wie diese jsfiddle veranschaulicht :

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

Das Schöne an dieser Lösung ist, dass Sie die vertikale Positionierung von hochgestelltem und tiefgestelltem Index 0.2emanpassen können, um Konflikte mit der darüber oder darunter liegenden Linie zu vermeiden .

drmrbrewer
quelle
0

Um alle Zeilen größer zu machen und mit der hochgestellten Zeile gleich auszusehen, definieren Sie eine größere Zeile line-heightfür den gesamten Absatz

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

oder welcher Wert auch immer den gewünschten Effekt ergibt.

Es mag seltsam aussehen, aber so haben Sie Ihre Anforderungen beschrieben.

BEARBEITEN: Damit alle Zeilen gleich aussehen, wenn nur eine mehr vertikalen Raum benötigt als die anderen , müssen ALLE Zeilen im Absatz höher sein.

Dies ist, wie gesagt, möglicherweise keine attraktive Lösung. Vielleicht kann etwas mit einer Spanne gemacht werden, die nur den Text mit dem hochgestellten / hochgestellten Text verkleinert . Abgesehen davon glaube ich nicht, dass das, was Sie wollen, erreicht werden kann. Aber ich würde gerne die Lösung eines anderen sehen.

EDIT2: Übrigens habe ich eine kleine HTML-Datei ausprobiert, die enthält

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

Und die Linien sind in FF3.0.14 und Konqueror alle gleich hoch (ich kann nicht für andere Browser sprechen)

Pavium
quelle
1
Ich sagte in der Frage, dass dies das Problem nicht löst. Ich habe Klarstellung hinzugefügt, falls Sie missverstanden haben
Andrew Bullock
Ja, ich verstehe, wenn ich mehr Platz für eine Zeile brauche, muss ich aus Gründen der Konsistenz den anderen zusätzlichen Platz hinzufügen, das ist offensichtlich. Was ich sage ist, dass die Zeilenhöhe es nicht behebt, dies vergrößert den Platz ja, aber es gibt noch zusätzlichen Platz mit dem sup
Andrew Bullock
Vielleicht gibt es einen Unterschied zwischen Browsern - schließlich beginnt die Antwort, die Sie akzeptiert haben, "Zeilenhöhe behebt das Problem", aber wir wissen nicht, welchen Browser Bobince verwendet hat.
Pavium
0

Ich habe die Zeilenhöhe verwendet: Normal für das hochgestellte Zeichen, was für mich in Safari, Chrome und Firefox gut funktioniert, aber ich bin mir über den Internet Explorer nicht sicher.

Scott Chandler
quelle
0

Verwenden Sie dies speziell für Newsletter -

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

Ich mag die Lösung von Milingu Kilu, aber in dem Geist, den ich bevorzuge

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

& sup1, & sup2 usw. könnten den Trick machen. Es ist ein hochgestellter HTML-Trick

Rizzoli
quelle
0

Antwort von hier , funktioniert sowohl in Phantomjs als auch in E-Mail-eingebettetem HTML:

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

TheZver
quelle