Teil eines Textes hochstellen via css?

[Axel Schmidt]

Hallo Ng,

nehmen wir mal an ich möchte von einem Firmennamen einen Teil
hochstellen.

<h1>4example</h1>

ich könnte jetzt schreiben <h1>⁴example</h1> was mir aber
eigentlich nicht gefällt. Aus dem Bauch herraus würde ich sagen <em>
könnte passen weil die '4' ja betohnt wird. Aber auch <span> könnte
passen. Doch wie bekomme ich dann die '4' via CSS hochgestellt?

Ich habe es mit

h1 em {
vertical-align: top;
}

versucht was aber nicht klappt. Ich hoffe auf ein paar Tips von euch.

Gruß Axel Schmidt

[Levin Alexander]

Axel Schmidt <***@web.de> wrote:

Hi,

Post by Axel Schmidt
<h1>4example</h1>
Doch wie bekomme ich dann die '4' via CSS hochgestellt?
h1 em {vertical-align: top;}

Fast. Du suchst: "vertical-align:super;"
<http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align>

(Das hättest du durch Nachschlagen gefunden.)

Post by Axel Schmidt
versucht was aber nicht klappt. Ich hoffe auf ein
paar Tips von euch.

Ich glaube <sup> ist die bessere Wahl; Die "4" ist nicht betont, nur
hochgestellt. Außerdem funktioniert <sup> auch ohne Stylesheets.

Viele Grüße,
Levin

[Andreas Borutta]

Post by Levin Alexander
Ich glaube <sup> ist die bessere Wahl; Die "4" ist nicht betont, nur
hochgestellt. Außerdem funktioniert <sup> auch ohne Stylesheets.

Ich sehe in der Benutzung von Elementen mit Gestaltungszweck einen
Bruch in dem Konzept der Trennung von Struktur und Gestaltung.

"<span class="hippness">4</span>example" ist zwar etwas länger, aber
erträglich.

Andreas

[Axel Schmidt]

Post by Andreas Borutta

Post by Levin Alexander
Ich glaube <sup> ist die bessere Wahl; Die "4" ist nicht betont, nur
hochgestellt. Außerdem funktioniert <sup> auch ohne Stylesheets.

Ich sehe in der Benutzung von Elementen mit Gestaltungszweck einen
Bruch in dem Konzept der Trennung von Struktur und Gestaltung.

Ich sehe es auch so, deshalb ja meine Frage. Und ohne Stylesheet
brauch es nicht zu funktionieren. Die Hochstellung diehnt einzig und
alleine dem Design, und Design gehört ins CSS hab ich hier gelernt :)

Post by Andreas Borutta
"<span class="hippness">4</span>example" ist zwar etwas länger, aber
erträglich.

Ok, ich werde dann Span benutzen.

Besten Dank und Gruß

Axel Schmidt

[Andreas Borutta]

Post by Axel Schmidt

Post by Andreas Borutta
"<span class="hippness">4</span>example" ist zwar etwas länger, aber
erträglich.

Ok, ich werde dann Span benutzen.

Falls es mal nicht um Pferde geht passt vielleicht hipness als
Klassenname noch besser ;)

Andreas

[Alexander Clauss]

Post by Axel Schmidt

Post by Andreas Borutta
"<span class="hippness">4</span>example" ist zwar etwas länger, aber
erträglich.

Ok, ich werde dann Span benutzen.

Nunja, bereits für einen bestimmten Zweck existierende HTML-Elemente
einfach zu ignorieren (Hier <sup>), und statt dessen auf bedeutungslose
SPANs oder DIVs auszuweichen, um damit genau das nachzubilden, was das
existierende Element bereits leistet, ist sicherlich nicht im Sinne des
Erfinders. Auch wenn <sup> jetzt vielleicht nicht das Musterbeispiel
eines "perfekten" HTML-Elements ist, weil es weniger die Struktur,
sondern eher Gestaltung beschreibt, sollte man es wohl doch besser
verwenden. <sup> ist zum hochstellen gedacht, und genau das soll hier
doch erreicht werden, oder nicht? Also nimm einfach das HTML-Element,
was zu Deiner Aufgabe perfekt passt: <sup>

Und ob Du nun ein <sup> oder ein <span> zur Gestaltung in Deinem
HTML-Code stehen hast, mach letztendlich überhaupt keinen Unterschied,
denn beide haben die selben gestalterischen Aufgaben. Bei <sup> ist es
ja auch noch genau die ureigene Aufgabe des Elements.

[Christoph Päper]

Post by Alexander Clauss

Post by Andreas Borutta
"<span class="hippness">4</span>example"

Nunja, bereits für einen bestimmten Zweck existierende HTML-Elemente
einfach zu ignorieren (Hier <sup>), und statt dessen auf bedeutungslose
SPANs oder DIVs auszuweichen, um damit genau das nachzubilden, was das
existierende Element bereits leistet, ist sicherlich nicht im Sinne des
Erfinders.

Das sehe ich zwar grundsätzlich genauso, aber in diesem Falle kann ich auch
die Wahl von 'span' verstehen, da es wirklich rein gestalterischen Zwecken
zu dienen scheint.

H<span class="sub">2</span>O und
Na<span class="sup">2+</span>

hingegen hielte ich ganz klar für falsch.

[Daniel Seuthe]

Post by Alexander Clauss
Und ob Du nun ein <sup> oder ein <span> zur Gestaltung in Deinem
HTML-Code stehen hast, mach letztendlich überhaupt keinen Unterschied,

<sup> ist nicht gerade ein gestalterisches Element. Als Beispiel für
<sup> werden in der HTML4-Dokumentation mathematische Formeln genannt
(MathML wäre hier mittlerweile natürlich angebrachter). Ein a2 ist
eben doch was anderes als ein a^2. Das hat nichts mit Gestaltung zu
tun, sondern mit Inhalt.

Da es im konkreten Fall aber um reine Gestaltung geht, ist <sup>
ungünstig. Was passiert denn, wenn statt hochgestellt plötzlich nur
die Farbe geändert werden soll?

[Andreas Borutta]

Post by Daniel Seuthe
<sup> ist nicht gerade ein gestalterisches Element. Als Beispiel für
<sup> werden in der HTML4-Dokumentation mathematische Formeln genannt

Ich finde die Spezifikation hier sehr uneindeutig.

| Many scripts (e.g., French) require superscripts or subscripts for
| proper rendering. The SUB and SUP elements should be used to markup
^^^^^^^^^^^^^^^^
| text in these cases.

Um semantisches Markup geht es hier nicht.

Ich sagte ja schon im anderen Posting: Die Spezifikation bricht mit
ihrer Empfehlung "should" hier IMO das wesentliche Konzept der
Trennung von Gestaltung und Struktur.

Die Bedeutung einer Zahl als Exponent ist nicht "hochgestellt". Sie
ist "Exponent".

Jukka Korpela plädiert in einem Artikel
http://www.webaim.org/discussion/mail_message.php?id=4243
[...]
| It was also suggested that <dfn> be used. Logically, it's neither an
| acronym nor a defining instance of a term. It isn't an abbreviation
| either, so <abbr> can be ruled out too. Note that on several modern
| browsers, <acronym> and <abbr> with a title causes a thin dotted underline
| as a hint of an explanation being available, which is sometimes OK,
| sometimes confusing. But I think the most logical way is
| <span title="union">&#8746;</span>
| When no logical markup exists, it's best to use semantics-free markup,
| like <span> for inline text, <div> for blocks.

gegen die Verwendung eines "faulen Kompromisses".

Na ja, sicher ist dieses Thema eines, zu welchem kontroverse Ansichten
existieren.

Andreas

[Daniel Seuthe]

Post by Andreas Borutta

Post by Daniel Seuthe
<sup> ist nicht gerade ein gestalterisches Element. Als Beispiel für
<sup> werden in der HTML4-Dokumentation mathematische Formeln genannt

Ich finde die Spezifikation hier sehr uneindeutig.

Dito

Post by Andreas Borutta
Die Bedeutung einer Zahl als Exponent ist nicht "hochgestellt". Sie
ist "Exponent".

Nur leider (oder zum Glück? [1]) bietet HTML eine derart feine
Untergliederung nicht.

Post by Andreas Borutta
| When no logical markup exists, it's best to use semantics-free markup,
| like <span> for inline text, <div> for blocks.
gegen die Verwendung eines "faulen Kompromisses".

Das sehe ich genau so.

Post by Andreas Borutta
Na ja, sicher ist dieses Thema eines, zu welchem kontroverse Ansichten
existieren.

Ich sehe das eher pragmatisch: Was muß ein Browser (insbesondere
Textbrowser) dem *reinen* HTML-Code entnehmen können, um den *Inhalt*
verständlich darzustellen? Das spricht bei chemischen oder
mathematischen Formeln für die Verwendung von »sub« und »sup«. Im
Falle eines gestalterisch veränderten Firmennamens dagegen.

Daniel

[1] Ich denke da an die Argumente gegen DocBook, wo ja fast jeder
»Furz« ausgezeichnet werden kann.

[Lukas Graf]

Post by Daniel Seuthe

Post by Andreas Borutta

Post by Daniel Seuthe
<sup> ist nicht gerade ein gestalterisches Element. Als Beispiel für
<sup> werden in der HTML4-Dokumentation mathematische Formeln genannt

Ich finde die Spezifikation hier sehr uneindeutig.

Dito

Ich glaube das Problem ist sprachlicher Natur.

Siehe <http://dict.leo.org/?search=superscript+superior>.

Dort finden sich

superior adj. [typogr.] hochgestellt

superscript der Exponent
superscript adj. hochgestellt
superscript [math.] hochgestellte Zahl
superscript [math.] oberer Index

Das Englische unterscheidet also offensichtlich zwischen einer
typografischen und einer semantischen Form des Worts "hochgestellt". In der
Spezifikation ist auch nur von "superscript" die Rede, <sup> scheint sich
also nicht auf den rein typografischen Einsatz einer Hochstellung zu
beziehen.

Post by Daniel Seuthe
Ich sehe das eher pragmatisch: Was muß ein Browser (insbesondere
Textbrowser) dem *reinen* HTML-Code entnehmen können, um den *Inhalt*
verständlich darzustellen? Das spricht bei chemischen oder
mathematischen Formeln für die Verwendung von »sub« und »sup«. Im
Falle eines gestalterisch veränderten Firmennamens dagegen.

"...für <span>." fehlt da vermutlich noch.

Sehe ich genauso.

Gruss Lukas

[Axel Schmidt]

Post by Alexander Clauss
Und ob Du nun ein <sup> oder ein <span> zur Gestaltung in Deinem
HTML-Code stehen hast, mach letztendlich überhaupt keinen Unterschied,
denn beide haben die selben gestalterischen Aufgaben. Bei <sup> ist es
ja auch noch genau die ureigene Aufgabe des Elements.

Naja, ich sehe schon einen Unterschied darin ob ich span oder sup
benutze. Wenn sup das richtige wäre würde ich es auch verwenden doch
ich bin mir da halt nicht ganz so sicher.

Mein Wörterbuch sagt zu sup=superscripts=Exponent oder hochgestellte
Schrift.

Exponent können wir streichen bleibt noch die Hochgestellte Schrift
was in meinem Fall ja aber auch nicht zutrifft da ich ja kein Wort
benutze was in einer speziellen Sprache(Schrift) so geschrieben wird,
sondern ich möchte einen Firmennamen auszeichenen. Also denke ich das
sup nicht in Frage kommt.

Gruß

Axel Schmidt

[Andreas Prilop]

Post by Andreas Borutta
"<span class="hippness">4</span>example" ist zwar etwas länger, aber
erträglich.

Dann doch besser
<sup class="hippness">4</sup>example

[Andreas Borutta]

Post by Axel Schmidt
nehmen wir mal an ich möchte von einem Firmennamen einen Teil
hochstellen.
<h1>4example</h1>
ich könnte jetzt schreiben <h1>⁴example</h1> was mir aber
eigentlich nicht gefällt. Aus dem Bauch herraus würde ich sagen <em>
könnte passen weil die '4' ja betohnt wird. Aber auch <span> könnte
passen. Doch wie bekomme ich dann die '4' via CSS hochgestellt?

{ vertical-align: super }

http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap10.html#vertical-align|

Andreas