Schriftabstände in Textblock

[Irokem]

Hallo,

dies ist schon sein Jahren ein Mysterium für mich. Wie berechnet ein Browser dem Abstand zwischen einem Textblock und dem tatsächlichen text(oder wie sollte er es berechnen). Wer, verständlicherweise nicht genau weis wovon ich rede siehe bitte hier:
http://loomarea.com/textblock.png

woher kommen die rot angezeigten markieren Abstände? Kann es sein das Firefox auf Mac diese anders berechnet als Firefox auf PC? Könnte ja was mit dem Weichzeichner zu tun haben...

Wikipedia bezeichnet den blauen Bereich als "Fleisch" (http://de.wikipedia.org/wiki/Fleisch_(Typografie))

[suit]

woher kommen die rot angezeigten markieren Abstände?

http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=Innenabstand oder http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height@title=Zeilenhöhe+

Kann es sein das Firefox auf Mac diese anders berechnet als Firefox auf PC? Könnte ja was mit dem Weichzeichner zu tun haben...

Ja, das kann nicht nur sein, das ist auch so - je nach Software wird die Zeichenhöhe anders berechnet.

Entweder wird dazu die Versalhöhe verwandt (Abstand zwischen H- und Grundlinie) oder aber auch der Schriftgrad (maximale Ausdehnung zwischen Ober- und Unterlängen).

Siehe hier: http://www.tutorials.de/forum/typowars/337844-typografie-basiswissen.html

lt. CSS-Spezifikation sollte sich font-size auf den Schriftgrad beziehen (em square, gevierte Lettern). Im nächsten Satz wird aber gesagt, dass manche Glyphen herrausragen können - das darf/kann aber bei gevierten Lettern niemals passieren.

[Irokem]

ich hab jetzt nochmal genau nachgemessen

folgende eigenschaften:

  
h1{background-color:red; font-weight:normal; font-family:Trebuchet MS; font-size:25px;}  

sehen in den beiden betriebssystemen, im selben browser so aus:

http://loomarea.com/winvsmac.png

mich stört der grüne Bereich. weil der unterschiedlich  groß ist, sieht alles scheiße aus.

da ich hierfür keine Browserweiche machen kann muss ich eine andere Lösung finden, das das richtig sitzt. hat jemand eine Idee?

[suit]

da ich hierfür keine Browserweiche machen kann muss ich eine andere Lösung finden, das das richtig sitzt. hat jemand eine Idee?

Finde dich damit ab, dass die darstellung vom Client abhängt und äusserst benutzerspezifisch ist - wenn so eine kleinigkeit den Layout zerstört, musst du gewaltige Probleme haben.

Eine 100%ig identische Darstellung ist wunschdenken - die einzige "brauchbare" Lösung ist es, deine Webseite aus Grafiken zusammenzusetzen (oder zumindest Teile davon).

Dazu eigenen sich z.B. diverse Image-Replacement-Techniken

[Irokem]

Eine 100%ig identische Darstellung ist wunschdenken

das ist mir schon klar, nur müsste man mal eine Strategie überlegen, wie man das einem $kunden (oder $designer) erklährt.

die einzige "brauchbare" Lösung ist es, deine Webseite aus Grafiken zusammenzusetzen (oder zumindest Teile davon). Dazu eigenen sich z.B. diverse Image-Replacement-Techniken

geht nicht, Seite hat backend.

danke aber für deine Meinung

[suit]

das ist mir schon klar, nur müsste man mal eine Strategie überlegen, wie man das einem $kunden (oder $designer) erklährt.

Ich hab da bei meinen "$kunden" und meinen beiden "$designern" kein Problem, Ihnen etwas zu erklären - solange es kein "Techniker-Blah-Blah" ist, welches so klingt, als würde es doch gehen, aber man wäre nur zu faul es umzusetzen.

geht nicht, Seite hat backend.

Ich fürchte, ich kann dir nicht ganz folgen - warum sollte es ein Problem sein, wenn die Seite ein Backend hat (ich vermute, du meinst CMS).

[ChrisB]

Hi,

http://loomarea.com/textblock.png

woher kommen die rot angezeigten markieren Abstände?

http://de.wikipedia.org/wiki/Typografie#Mikrotypografie
http://de.wikipedia.org/wiki/Schriftart#H.C3.B6he

Kann es sein das Firefox auf Mac diese anders berechnet als Firefox auf PC? Könnte ja was mit dem Weichzeichner zu tun haben...

Und auch mit den Eigenschaften der jeweiligen Schriftart.
Auch wenn diese sich gleich nennt, kann es zwischen verschiedenen Systemen Unterschiede geben.

MfG ChrisB