nicht angemeldet
Text-Unterlängen übertreten Elementgrenzen
MudGuard
AugeHallo miteinander!
Ich bin auf ein Problem gestoßen, an welchem ich mir gerade die Zähne ausbeiße.
Folgend der extrem simple Code meiner Testseite:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Testseite</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1>
Unterlaenge
</h1>
</div>
</body>
</html>
CSS
* {
/* verfälschende Abstände des Browser-Stylesheets eliminieren */
padding: 0;
margin: 0;
}
body {
font-family: geneva; /* geneva = ausgeprägter Effekt */
}
div {
border: 2px solid #FF0000;
}
h1 {
font-size: 30px;
line-height: 1;
background-color: #FFFF00;
border: 2px solid #0000FF;
}
DAS PROBLEM
Mit obigem Code wollte ich durch eine Zeilenhöhe von 1 die vertikalen Abstände zwischen Textkörper und Elementgrenzen loswerden, um mehr Kontrolle über die Abstände vom Textkern zu benachbarten Elementen zu erhalten.
Wenn ich jedoch den obigen Code in den unten aufgeführten Browsern öffne, liegt die Unterlängenlinie des Elements h1 unterhalb der Objektgrenzen von h1 und sogar div. Sobald ich die Schriftgröße verkleinere, verkleinert sich auch der Überhang, und das allem Anschein nach direkt proportional. Sinngemäß Selbiges passiert bei einer Vergrößerung der Schriftgröße.
Was mir interessant erscheint, ist der Abstand vom Textkörper zur oberen Elementgrenze, welcher gemeinsam mit dem direkt proportional zur Schriftgröße zusammenhängenden Überhang, für mich wie eine einfache Verschiebung der Unterlängenlinie aussieht.
Ergänzend zu erwähnen ist, dass der Effekt je nach verwendeter Schriftart unterschiedlich ausfällt; ist die Unterlängenlinie bei Helvetica in jedem Test im Inneren des Elements h1, so sinkt sie bei Futura in ungeahnte Tiefen.
Auch macht es keinen unterschied, welche Einheit ich benutze; px, em, rem, % - es ist bei allen dasselbe Ergebnis.
DIE FRAGEN
Wieso ist dem so? Kann ich nicht davon ausgehen, dass eine Zeilenhöhe von 1 nur den Textkörper ohne Abstände ergibt?
TESTUMGEBUNG
Mozilla Firefox v3.6.28 / Mac OS X 10.5.8 32-Bit PPC
Mozilla Firefox 28 / Windows 7 32-Bit
Apple Safari v5.0.6 / Mac OS X 10.5.8 32-Bit PPC
Im Anhang finden sich zur Veranschaulichung des Problems ein paar Beispielbilder, welche zur Erleichterung der Ansicht nachträglich alle auf etwa die gleiche Größe skaliert wurden.
Ich danke für jede Antwort!
Mit freundlichen Grüßen,
Floh
-
Hi,
h1 {
font-size: 30px;
line-height: 1;
background-color: #FFFF00;
border: 2px solid #0000FF;
}Du setzt die Zeilenhöhe auf die Höhe fest, die von der Basislinie bis zur Oberkante der Großbuchstaben reicht. In der Zeile ist also kein Platz für Ober- oder Unterlängen. Padding/Margin hast Du auch auf 0 gesetzt. Und dann wunderst Du Dich, daß etwas, was unter die Basislinie der Zeile reicht, nicht in die Zeile paßt? cu, Andreas -- [Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/) [O o ostern ...](http://ostereier.andreas-waechter.de/) Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.-
Interessant. Wie eingangs erwähnt bin ich davon ausgegangen, die CSS-Eigenschaft "line-height" definiere den Textkörper mit Ober- und Unterlänge.
Muss also zur sauberen Darstellung für jede Schrift eine eigene Zeilenhöhe definiert werden?
-
Hallo
Interessant. Wie eingangs erwähnt bin ich davon ausgegangen, die CSS-Eigenschaft "line-height" definiere den Textkörper mit Ober- und Unterlänge.
Muss also zur sauberen Darstellung für jede Schrift eine eigene Zeilenhöhe definiert werden?
Da du, außer du lieferst die Schriften mit [1], eh nicht weißt, welche Schrift zur Anwendung kommt, kannst du das nicht genau bestimmen. Für die Zeilenhöhe ist oft 150% als empfohlener Richtwert zu finden.
[1] Selbst das ist nicht 100%-ig sicher. Der Anwender könnte das herunterladen von Schriften unterbinden.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3
-
-
-
Hallo!
Schriftrendering ist nicht pixelgenau – damit kann man sich nur abfinden. Wenn du drei Browser (z.B. Chrome, IE, Firefox) auf vier Systemen (Windows XP, Windows 7, Ubuntu, Mac OS) mit demselben Font testest, bekommst du nach Adam Riese und Eva Zwerg ungefähr 23 verschiedene Resultate, von denen die Hälfte unschön oder gar unlesbar ist.
Du musst damit rechnen, dass verschiedene Systeme andere Fonts verwenden und/oder sie unterschiedlich groß rendern. Es gibt zwar Techniken wie font-size-adjust, aber die haben sich nicht breit durchgesetzt.
Selbst wenn man Abstände minimieren will, dann nutzt man line-height: 1.2 oder höher. Wenn man lesbaren Text setzt, dann nimmt man mindestens 1.4 oder 1.6 und hat dadurch genug Spielraum. Es kommt selten vor, dass Glyphen pixelgenau an eine Kante grenzen sollen. In einem solchen Fall wäre eine Script-Lösung denkbar, die die optimale Größe sucht, z.B. mit SVG oder Canvas.
Als Hintergrundlektüre empfehle ich das Webtypobuch und diese Artikelreihe im Typekit-Blog.
Mathias
-
Alles sehr gut zu wissen.
Dann ist mein Problem hiermit gelöst.
Allen vielen Dank für die prompte Unterstützung!Einen schönen Tag noch,
floh