Hochgestellte Schrift nur in CSS?

Question

Wie kann ich die Hochstellung nur in CSS erreichen?

Ich habe ein Stylesheet, in dem ich die externen Links mit einem hochgestellten Zeichen markiere, aber ich habe Schwierigkeiten, das Zeichen korrekt auszurichten.

Was ich derzeit habe, sieht wie folgt aus:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

aber es funktioniert nicht.

Natürlich würde ich die <sup> -Tag, nur wenn content würde HTML ermöglichen...

Answer 1

Sie können hochgestellt werden mit vertical-align: super (plus eine begleitende font-size Reduktion).

Achten Sie jedoch darauf, dass Lesen Sie die anderen Antworten hier, insbesondere die von paulmurray y cletus für nützliche Informationen.

Answer 2

Ehrlich gesagt sehe ich keinen Sinn darin, hoch- und tiefgestellte Zeichen nur in CSS zu verwenden. Es gibt kein praktisches CSS-Attribut für sie, nur eine Reihe von hausgemachten Implementierungen einschließlich:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

oder mit vertical-align oder sicher auch auf andere Weise. Die Sache ist, dass es anfängt, kompliziert zu werden:

• CSS-Abstand für hochgestellte Buchstaben auf Zeilenhöhe;
• Vorsicht bei CSS für Superscript/Subcript warum man hochgestellte und tiefgestellte Schrift nicht mit CSS gestalten sollte überhaupt ;

Der zweite Punkt ist hervorzuheben. In der Regel ist die Hochstellung/Tiefstellung nicht wirklich eine Frage der Gestaltung, sondern ein Hinweis auf die Bedeutung.

Nebenbei bemerkt: Es ist erwähnenswert, dass Liste der Einheiten für allgemeine hoch- und tiefgestellte mathematische Ausdrücke auch wenn sich diese Frage nicht darauf bezieht.

Die sub/sup-Tags sind in HTML und XHTML enthalten. Ich würde nur diese verwenden.

Was den Rest Ihres CSS betrifft, so werden die Attribute :after pseudo-element und content nicht allgemein unterstützt. Wenn Sie dies wirklich nicht manuell in den HTML-Code einfügen möchten, ist eine Javascript-basierte Lösung die nächstbeste Wahl. Mit jQuery ist dies so einfach wie:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

Answer 3

Die CSS-Dokumentation enthält die branchenüblichen CSS-Äquivalente für alle HTML-Konstrukte. Das heißt: Die meisten Webbrowser behandeln heutzutage nicht explizit SUB , SUP , B , I und so weiter - sie werden (gewissermaßen) umgewandelt in SPAN Elemente mit den entsprechenden CSS-Eigenschaften, und die Rendering-Engine befasst sich nur damit.

Die Seite ist Anhang D. Standard-Stylesheet für HTML 4

Die Bits, die Sie brauchen, sind:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Answer 4

Ich arbeitete an einer Seite mit dem Ziel, deutlich lesbaren Text zu haben, wobei hochgestellte Elemente den oberen und unteren Rand der Zeile NICHT verändern - mit den folgenden Beobachtungen:

Wenn Sie für Ihren Haupttext Folgendes haben line-height: 1.5em Sie sollten zum Beispiel die Zeilenhöhe Ihres hochgestellten Textes verringern, damit er korrekt erscheint. Ich habe line-height: 0.5em .

Auch, vertical-align: super funktioniert in den meisten Browsern gut, aber im IE8 wird der Rest der Zeile nach unten verschoben, wenn ein hochgestelltes Element vorhanden ist. Daher habe ich stattdessen vertical-align: baseline zusammen mit einem negativen top y position: relative um denselben Effekt zu erzielen, was in allen Browsern besser zu funktionieren scheint.

Um die "Eigenentwicklungen" zu ergänzen:

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

Answer 5

Der folgende Text stammt aus der internen html.css von Mozilla Firefox:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

In Ihrem Fall wäre es also etwa so:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}