esse est percipi
Das Weblog eines Grafikdesigners. Seit 2003.

esse est percipi

Einfach gute Mac-Apps.

Von einem unabhängigen Entwickler,
der sie täglich selbst nutzt.

Blog Apps

Impressum/Datenschutz/AGB

Webdesign | Montag, 17. März 2008

Tipp: Zeilenabstand trotz hoch- oder tiefgestellter Zeichen erhalten

Gerade habe ich einen Artikel im Fontblog gelesen: „Wie schreibt man eigentlich dieses ⁿ?“. Dabei ist mir wieder einmal aufgefallen, dass viele Webdesigner den Umstand nicht berücksichtigen, dass (mit sup bzw. sub) hoch- oder tiefgestellte Zeichen u. U. die Zeilenhöhe leicht vergrößern, was dann zu unschönen Ergebnissen mit unregelmäßigen Zeilenabständen führt:

Screenshot

Screenshot vom erwähnten Artikel beim Fontblog

Vermeiden lässt sich das, indem man sup und sub in der CSS-Datei einfach eine Zeilenhöhe von 0px zuweist:

sup, sub {
	line-height:0px;
}

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

Heino Hansen Montag, 17. März 2008, 09:42 Uhr

Danke :-)

SuMu Montag, 17. März 2008, 10:13 Uhr

vielen dank!

Zippo Montag, 17. März 2008, 13:03 Uhr

Herzlichen Dank für diesen wirklich nützlichen Tipp!

Viele Grüße von Zippo

Henning Montag, 17. März 2008, 19:59 Uhr

Super! So einfach kann’s sein. Hatte mich schon gewundert, was da los ist, aber nicht weiter drüber nachgedacht, dass man das ja selbst ändern könnte ;-)

Vielen Dank also!

Ivo Montag, 17. März 2008, 23:29 Uhr

Ah, vielen Dank. Werde ich gleich heute Abend [hier ist grad nachmittag] ändern.

Jörg Donnerstag, 20. März 2008, 13:25 Uhr

Man lernt nie aus …

Ich habe dies gleich mal ausgetestet und muss feststellten, dass im Internet Explorer 7 weiterhin unregelmäßigen Zeilenabstände erscheinen.

???

Michael Preidel Donnerstag, 20. März 2008, 14:43 Uhr

Tja, der IE – wer sonst ;-) Das Problem ist übrigens bekannt, lässt sich für sup/sub aber leider nicht lösen. Es sei denn, man verzichtet darauf und arbeitet mit einem span und einer definierten Klasse:

.hochgestellt {
position:relative;
top:-3px;
font-size:0.8ex;
}

Daniel Lübbers Montag, 9. November 2009, 23:50 Uhr

Ich habe ganz gute Erfahrungen damit gemacht, die line-height auf 0 zu setzen und zusätzlich einfach ein wenig mit der font-size für das sup zu spielen… Da lässt sich eigentlich immer (auch für die IEs dieser Welt) eine akzeptable Lösung finden… eben keine komischen Zeilenabstände…

Jochen Donnerstag, 4. November 2010, 11:57 Uhr

Für IE 6 und 7 geht es noch schöner als eine extra Klasse zu definieren.

Wenn man die diese beiden Browser so wie so schon extra css-Dateien hat um Darstellungsfehler zu korrigieren, ändert man hier einfach die Eigenschaften von sub direkt:

sub {
vertical-align: baseline;
position: relative;
top: -0.5em;
font-size: 0.8ex;
}

internetmacher Mittwoch, 18. Januar 2017, 14:25 Uhr

Danke für den Tipp, das hat mir soeben viel Zeit mit „try & error“ erspart ;-)

Roland Hirsch Montag, 1. Juli 2024, 23:02 Uhr

Oh mein Gott – YOU made my day!
Was haben mich diese nervigen Abstände geärgert. Besonders blöd, wenn’s eine Website rund um CO2 ist und das somit zig mal im Content vorkommt.
Jetzt sieht der Text wieder gut aus und lässt sich flüssiger lesen.
VIELEN DANK!