Schriftdarstellung - IE7, IE8

[Ingo]

Hallo Community,

ich habe das Problem, dass bei einem unserer Kunden eine tiefergestellte "2" grundsätzlich ab dem IE 7 zu sehr weichgezeichnet wird. Sie wirkt nur noch schwammig und unsauber. Durch den Filter:alpha Workaround habe ich auch keinen Erfolg verbuchen können und wollte nun bei euch anfragen.

Die einzig bisher "funktionierende" Variante ist die, die Schriftgröße zu erhöhen. Da sind aber die Screendesigner des Kunden gegen ;)

Hier ein Screenshot des Problems.
http://twitpic.com/ywwpy

[suit]

Nachdem das etwas kompliziert zu erklären ist und mit viel Spielerei verbunden ist, hier direkt eine mögliche Lösung:

sub {  
	vertical-align: middle;  
	position: relative;  
	top: 0.33em;  
	font-size: 0.75em;  
}  
  
sub { font-size /*\**/: 1em\9; }  
  
*:first-child+html { font-size: 1em; }  
  
* html sub { font-size: 1em; }  
  
sup {  
	vertical-align: middle;  
	position: relative;  
	top: -0.5em;  
}

[dedlfix]

Hi!

Nachdem das etwas kompliziert zu erklären ist und mit viel Spielerei verbunden ist, hier direkt eine mögliche Lösung:

Schreib doch mal noch ein paar Kommentare dazu, welcher dieser Anweisungen und Syntaxfehler für welche Systeme was bewirken sollen. Die Eigenschaftsnamen und -werte kann man ja nachlesen. Aber die Intention hinter diversen Konstrukten ist ohne Kommentar schwer verständlich.

Lo!

[suit]

Schreib doch mal noch ein paar Kommentare dazu, welcher dieser Anweisungen und Syntaxfehler für welche Systeme was bewirken sollen. Die Eigenschaftsnamen und -werte kann man ja nachlesen. Aber die Intention hinter diversen Konstrukten ist ohne Kommentar schwer verständlich.

done

[dedlfix]

Hi!

Schreib doch mal noch ein paar Kommentare dazu,
done

Sehr schön. Danke (hoffentlich im Namen aller Leser).

Lo!

[suit]

Auf dedlfix' Wunsch:

sub {  
	vertical-align: middle;  
	position: relative;  
	top: 0.33em;  
	font-size: 0.75em;  
}

vertical-align sorgt dafür, dass alle Browser von denselben Faktoren ausgehen. Firefox hat z.B. als default vertical-align: super; bzw sub.

Das sorgt zwar dafür, dass der Text tiefgestellt ist, alledings wird dadurch auch die Zeilenhöhe beeinträchtigt, damit wirkt das Schriftbild etwas schwammig wenn die Zeilenabstände flattern.

position: relative; sowie top: 0.33em; positionieren den Text in allen Browsern an dieselbe Ausrichtung.

font-size: 0.75em; überschreibt die Default-Schriftgröße (beim Firefox z.B. "samller" bei Opera gibts keinen Defaultwert.

Das sorgt theoretisch dafür, das jeder Browser dieselbe Schriftgröße hat.

sub { font-size /*\**/: 1em\9; }  
  
:first-child+html { font-size: 1em; }  
  
* html sub { font-size: 1em; }

Der Internet Explorer sieht das aber nicht so - scheinbar ist das verhalten von sub irgendwie hardcodiert, egal welche Schriftgröße man verwendet, sie wird immer ein Stück kleiner dargestellt als definiert.

Der erste Hack ist für den IE8 (und greift angeblich manchmal auf für den IE7), der zweite nur für den IE7, der dritte nur für den IE6.

Der einfachheit halber jeweils mit 1em, das passt ganz gut. Bei größeren Schriftgrößen (um die 20px aufwärts) muss man allerdings etwas tunen. Der IE6 ist kann dann ruhig um die 0.8 bis 0.9em haben - der verkleinert scheinbar nicht ganz so krass.

sup {  
	vertical-align: middle;  
	position: relative;  
	top: -0.5em;  
}

Das regeln wir ebenfalls mit position: relative anstatt vertical-align, ansonsten würden Konstrukte wie <p>Lorem <sup>9<sup>9<sup>9</sup></sup></sup>ipsum dolor</p> die Zeilenhöhe ungünstig beeinträchtigen.

In Summe sind die obenstehenden Regeln für eine schriftgröße von etwa 12 bis 16 Pixel gedacht. Bei einer Zeilenhöhe von 1.5em und einem Zeilenabstand von 1.5em (z.B. durch margin-bottom) erhält man somit auch bei mehrfachen Hochstellungen direkt unterhalb einer tiefstellung keine abweichende Zeilenhöhe und trotzdem überlappen die Zeichen nicht.

[Ingo]

Hallo Community,

ich habe das Problem, dass bei einem unserer Kunden eine tiefergestellte "2" grundsätzlich ab dem IE 7 zu sehr weichgezeichnet wird. Sie wirkt nur noch schwammig und unsauber. Durch den Filter:alpha Workaround habe ich auch keinen Erfolg verbuchen können und wollte nun bei euch anfragen.

Die einzig bisher "funktionierende" Variante ist die, die Schriftgröße zu erhöhen. Da sind aber die Screendesigner des Kunden gegen ;)

Hier ein Screenshot des Problems.
http://twitpic.com/ywwpy

Vielen Dank für die schnelle Antwort. Der fix funktioniert :)

Liebe Grüße,

Ingo