Ich habe ein Wort, das sowohl hochgestellt als auch tiefgestellt ist. Jetzt rende ich es so word<sub>1</sub><sup>2</sup> Und bekomme folgendes: HTML: Kann ich tiefgestellten Text direkt unter dem hochgestellten setzen?
word12 .
Wie kann ich den Index genau unter dem hochgestellten setzen?
Nun, Sie können das nicht mit Plain-Vanilla-HTML tun. Wie schon erwähnt, benutze CSS. Aber Sie werden auch eine Positionierung wünschen!
Es gibt viele Möglichkeiten, dies mit CSS zu tun, und jedes hat seine Vor- und Nachteile. Eine Möglichkeit wäre die relative Positionierung. Ein kurzes Beispiel könnte wie folgt funktionieren:
<span class="fraction">
<span class="numerator">3</span>
<span class="denominator">4</span>
</span>
Und die CSS mit diesem gehen zusammen:
span.fraction { }
/* Or child selector (>) if you don't care about IE6 */
span.fraction span.numerator {
position:relative;
top:-0.5em;
}
span.fraction span.denominator {
position:relative;
top:0.5em;
left:-0.5em; /* This will vary with font... */
}
Dieses spezielle Beispiel würde besser funktionieren, wenn Sie eine dicktengleiche Schriftart verwenden.
Aber hier hängt der Offset nach links von der Größe der hochgestellten und tiefgestellten ab. Was aber, wenn der Nenner 31234 ist und der Nenner 56547? Gibt es eine einheitliche Entscheidung, die unabhängig von der Größe von Hoch- und Tiefstellung funktioniert? – netimen
@netimen Das ist ein guter Punkt und ich dachte darüber nach, nachdem ich das obige Beispiel aufgepeppt habe. Kurz gesagt: Nein, es gibt keinen magischen Wert. Dies ist eine Gelegenheit, in der das CSS3-Ruby-Modul nützlich sein könnte. –
@netimen Es wäre möglich, den korrekten Offset mit JavaScript zu berechnen und dann auf jede Instanz von Super/Subscript anzuwenden. Was versuchst du darzustellen? Brüche? Chemische Komponenten? –
Hier ist eine saubere Lösung. Erstellen Sie zwei CSS-Klassen:
.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;
}
Sie bereits die "nobr" Klasse als <nobr> Ersatz haben könnte. Nun die Summenformel für Sulfat auszudrücken und nutzen die „supsub“ Klasse wie folgt:
<span class="nobr">SO<span class="supsub">2-<br />4</span></span>
Das heißt, Ihr Exponent/Index innerhalb der „supsub“ Klasse umschließen, und legte eine < br/> zwischen ihnen. Wenn Sie Ihre Hoch-/Tiefstellen etwas größer oder kleiner mögen, passen Sie die Schriftgröße an und basteln Sie dann mit der vertikalen Ausrichtung und Zeilenhöhe. Die Einstellung -9em in der Randeinstellung bewirkt, dass die hochgestellten/tiefgestellten Zeichen nicht zur Höhe der sie enthaltenden Zeile hinzugefügt werden. Jeder große Wert wird reichen.
Verwenden Sie den CSS-Tabellenstil (außer für IE8 und darunter). HTML:
<span class="over-under">
<span class="over">sup</span>
<span class="under">sub</span>
</span>
CSS:
span.over-under {
position: relative;
top: 1em;
display: inline-block;
}
span.over-under > .over {
display: table-row;
}
span.over-under > .under {
display: table-row;
}
Fiddle: https://jsfiddle.net/FredLoney/Loxxv769/4/
Neben einfacher als relative Position zwickt zu sein, diese Lösung vermeidet Verzerrungen Layout, die aus diesen Alternativen entstehen. Siehe z.B. https://jsfiddle.net/FredLoney/da89nyk2/1/.
Wie mache ich das? – netimen