Subpixel bei Schrift kompensieren

[Lars Stiedler]

Hi,

hab nochmal eine Frage. Diesmal bezüglich der Subpixel, die bei unterschiedlichen Schriften und Anzahl an Buchstaben hervorkommen.

Ich hab in einem DIV Container einen beliebigen Text stehen. Dieser DIV Container soll in der Breite immer den kompletten Text einschließen können und ein Padding von 2px besitzen. Des Weiteren soll dieser DIV Container eine Pixelweite phne Subpixel aufweisen - also keine Nachkommastellen. Das würde lediglich gehen, wenn ich diese auch per Javascript auslesen könnte? Aber die Attribute width, offsetwidth etc. besitzen nur ganze Werte.

Meine Idee war bzw. ist einen weiteren Div Container rechts neben den Text zu platzieren(mit einer Weite von 1px), so dass dieser die Subpixel aufrundet.

Also wenn der Textcontainer z.B. eine Weite von 100.26px besitzt, dann soll der Textcontainer mit dem zusätzlichen Container 101px besitzen.

  
  
#container  
{  
  padding:2px;  
}  
#roundingcontainer  
{  
  float:right;  
  width:1px;  
}  
  

  
<div id="container">  
<div id="roundingcontainer"></div>  
<div id="textcontainer">Mein Text</div>  
</div>  

Welche weiteren CSS Attribute müssen die unterschiedlichen Container aufweisen, damit mein Vorhaben funktioniert?

Gruß
Lars

[Matthias Apsel]

Om nah hoo pez nyeetz, Lars Stiedler!

Dir ist bewusst, dass
 a) deine CSS-Festlegungen bestenfalls empfehlenden Charakter haben?
 b) ein HTML-Dokument kein hochwertiges Druckerzeugnis ist?

Matthias

[Lars Stiedler]

Om nah hoo pez nyeetz, Lars Stiedler!

Dir ist bewusst, dass
a) deine CSS-Festlegungen bestenfalls empfehlenden Charakter haben?
b) ein HTML-Dokument kein hochwertiges Druckerzeugnis ist?

Matthias

D.h. es gibt keine Möglichkeit hier in irgendeiner Form effektiv Einfluss nehmen zu können, so dass der div id "container" immer eine ganze Pixelanzahl in der Weite einnimmt?

[Der Martin]

Hallo,

hab nochmal eine Frage. Diesmal bezüglich der Subpixel, die bei unterschiedlichen Schriften und Anzahl an Buchstaben hervorkommen.

ich habe mich erst gefragt, ob du vielleicht zwei Dinge durcheinanderbringst, aber inzwischen bin ich überzeugt, dass du nur den Begriff "Subpixel" falsch verwendest. Subpixel sind die RGB-Farbkomponenten, die ein Pixel auf einem LCD-Bildschirm ausmachen; der Begriff taucht vor allem im Zusammenhang mit Schriftglättung auf (Subpixel-Rendering).

Ich hab in einem DIV Container einen beliebigen Text stehen. Dieser DIV Container soll in der Breite immer den kompletten Text einschließen können und ein Padding von 2px besitzen. Des Weiteren soll dieser DIV Container eine Pixelweite phne Subpixel aufweisen - also keine Nachkommastellen. Das würde lediglich gehen, wenn ich diese auch per Javascript auslesen könnte? Aber die Attribute width, offsetwidth etc. besitzen nur ganze Werte.

Ich sehe das Problem nicht. Du willst also die Breite der Schrift an sich pixelgenau festlegen? - Das ist nicht zu schaffen, denn du kannst als Autor nicht einmal mit Sicherheit sagen, ob der Client überhaupt die von dir gewünschte Schriftart benutzt, ob er sie überhaupt hat.

Meine Idee war bzw. ist einen weiteren Div Container rechts neben den Text zu platzieren(mit einer Weite von 1px), so dass dieser die Subpixel aufrundet.

Auch da kann ich nicht ganz folgen. Die Breite (wieso "Weite"?) des Texts ergibt immer "ganze" Pixel. Je nach Schriftart und Rendering-Algorithmus mal ein, zwei Pixel mehr oder weniger. Das ist eben so.

Also wenn der Textcontainer z.B. eine Weite von 100.26px besitzt, ...

Das tut er nicht. Wenn sich rechnerisch eine Breite von 100.26px ergibt, ist das automatisch ein Platzbedarf von 101px. Mir scheint, du versuchst ein Problem zu lösen, das gar nicht existiert.

So long,
 Martin

[Lars Stiedler]

Hallo,

Ich hab in einem DIV Container einen beliebigen Text stehen. Dieser DIV Container soll in der Breite immer den kompletten Text einschließen können und ein Padding von 2px besitzen. Des Weiteren soll dieser DIV Container eine Pixelweite phne Subpixel aufweisen - also keine Nachkommastellen. Das würde lediglich gehen, wenn ich diese auch per Javascript auslesen könnte? Aber die Attribute width, offsetwidth etc. besitzen nur ganze Werte.

Ich sehe das Problem nicht. Du willst also die Breite der Schrift an sich pixelgenau festlegen? - Das ist nicht zu schaffen, denn du kannst als Autor nicht einmal mit Sicherheit sagen, ob der Client überhaupt die von dir gewünschte Schriftart benutzt, ob er sie überhaupt hat.

Jein, ich möchte das der div Container "textcontainer", in dem sich der Text befindet, immer eine Weite aufweist, so dass der Text in einer Zeile komplett in diesem div Container Platz findet. Das würde mir reichen.

  
<div id="container">  
<div id="roundingcontainer"></div>  
<div id="textcontainer">Mein Text</div>  
</div>  

Ich weiß aber nicht ob ich per Javascript die vom jeweiligen Browser benötigte Breite richtig auslesen kann. Also unter Berücksichtigung der vom jeweiligen Browser verwendeten Schriftart und Schriftgröße, falls die definierten Schriften nicht existieren.

[Steel]

Hi!

Jein, ich möchte das der div Container "textcontainer", in dem sich der Text befindet, immer eine Weite aufweist, so dass der Text in einer Zeile komplett in diesem div Container Platz findet. Das würde mir reichen.

Warum sollte der Text nicht in den Container passen? Normalerweise passen sich Container immer auf irgendeine Art dem Text an. Ich verstehe also etwas an Deinen Ausfuehrungen nicht oder du machst etwas das Du bisher nicht erwaehnt hast.

Ich weiß aber nicht ob ich per Javascript die vom jeweiligen Browser benötigte Breite richtig auslesen kann. Also unter Berücksichtigung der vom jeweiligen Browser verwendeten Schriftart und Schriftgröße, falls die definierten Schriften nicht existieren.

Also soll Dein Text immer genau eine Zeile einnehmen? Der Container immer genau so lang sein wie eine Zeile Text? Oder warum willst Du was mit JS auslesen?

Bisher kann ich jedenfalls kein Problem ausmachen.