linker rand bei unterschiedlichen schriftgrößen

[eduard dillmann]

Hallo zusammen,

habe das Problem, dass beide Zeilen linksbündig angezeigt werden sollen, jedoch mit steigender Schriftgröße auch der linke Rand größer wird.

#logi { font-family:Arial,sans-serif; font-weight:bold; font-size:10em; color:#000099; text-align:left;}
#logi2 { font-family:Arial,sans-serif; font-weight:bold; font-size:2em; color:#000099; text-align:left;}

<p id="logi">Der erste</p>
<p id="logi2">Der zweite</p>

[Ashura]

Hallo eduard.

habe das Problem, dass beide Zeilen linksbündig angezeigt werden sollen, jedoch mit steigender Schriftgröße auch der linke Rand größer wird.

Und wo liegt hier das Problem? Wenn dir die Voreinstellung http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=der http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=Ränder in den Browsern nicht gefällt, dann überschreibe sie mit deinen Angaben.

<p id="logi">Der erste</p>

<p id="logi2">Der zweite</p>

  
Nur ein Verdacht: obiges sind nicht zufällig verkappte Überschriften?  
  
  
Einen schönen Mittwoch noch.  
  
Gruß, Ashura  

-- 
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
[<mathbr:del.icio.us/>](http://del.icio.us/mathbr) [<mathbr:w00t/>](http://w00t.noctus.net)

[Eduard Dillmann]

Hallo eduard.

habe das Problem, dass beide Zeilen linksbündig angezeigt werden sollen, jedoch mit steigender Schriftgröße auch der linke Rand größer wird.

Und wo liegt hier das Problem? Wenn dir die Voreinstellung http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=der http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=Ränder in den Browsern nicht gefällt, dann überschreibe sie mit deinen Angaben.

<p id="logi">Der erste</p>

<p id="logi2">Der zweite</p>

>   
> Nur ein Verdacht: obiges sind nicht zufällig verkappte Überschriften?  
>   
>   
> Einen schönen Mittwoch noch.  
>   
> Gruß, Ashura  
>   

Danke für die schnelle Antwort  
margin-left: 0px; padding-left: 0px; border:0 px; helfen bei mir auch nicht.  
  
wenn  
Der erste  
Der zweite  
untereinander stehen ist der abstand zum linken rand des browsers bei "Der erste" höher als bei "Der zweite".  
wenn man im Browser Schriftgrad erhöht ist das noch gravierender.  
  
Ich hoffe mein Problem ist nun verständlicher

[Ashura]

Hallo Eduard.

wenn
Der erste
Der zweite
untereinander stehen ist der abstand zum linken rand des browsers bei "Der erste" höher als bei "Der zweite".
wenn man im Browser Schriftgrad erhöht ist das noch gravierender.

Nun verstehe ich; du meinst keinen Abstand, der mit dem Boxmodell zusammenhängt, sondern den Abstand, den die Buchstaben lassen.

Dies hängt meine Einschätzung nach direkt mit der gewählten Schriftart zusammen. Die Glyphen einer Schriftart nutzen ja normalerweise nicht die gesamte der ihnen zur Verfügung stehenden Breite.

Die Schriftarten „hooge 05_55 Cyr2“, „kroeger 05_55“, „supercar cyr“ und „mini“ zum Beispiel dagegen nutzen beispielsweise (zumindest auf den Abstand links bezogen) die gesamte Breite:

(Die schwarze Linie oben und links stellen den Rand meines Viewports dar.)

Du siehst also, dass der von dir erwähnte Abstand mit der jeweiligen Schriftart zusammenhängt. Du kannst dagegen also nichts unternehmen. (Du könntest zwar mit negativen margins arbeiten, aber wirklich flexibel ist dies nicht.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Eduard Dillmann]

Hallo Eduard.

wenn
Der erste
Der zweite
untereinander stehen ist der abstand zum linken rand des browsers bei "Der erste" höher als bei "Der zweite".
wenn man im Browser Schriftgrad erhöht ist das noch gravierender.

Nun verstehe ich; du meinst keinen Abstand, der mit dem Boxmodell zusammenhängt, sondern den Abstand, den die Buchstaben lassen.

Dies hängt meine Einschätzung nach direkt mit der gewählten Schriftart zusammen. Die Glyphen einer Schriftart nutzen ja normalerweise nicht die gesamte der ihnen zur Verfügung stehenden Breite.

Die Schriftarten „hooge 05_55 Cyr2“, „kroeger 05_55“, „supercar cyr“ und „mini“ zum Beispiel dagegen nutzen beispielsweise (zumindest auf den Abstand links bezogen) die gesamte Breite:

(Die schwarze Linie oben und links stellen den Rand meines Viewports dar.)

Du siehst also, dass der von dir erwähnte Abstand mit der jeweiligen Schriftart zusammenhängt. Du kannst dagegen also nichts unternehmen. (Du könntest zwar mit negativen margins arbeiten, aber wirklich flexibel ist dies nicht.

Einen schönen Mittwoch noch.

Gruß, Ashura

Vielen Dank erstmal,

schade dass einem doch immer irgendwas im weg ist.
Hintergrund der ganzen Sache ist den Text in verschiedenen
Schriftgrößen der Browser variabel (Strg+-) bzw. Ansicht Schriftgrad, anzeigen zu können. Bei Bildern lässt sich die Pixelauflösung bei angenommener 16px Schriftgröße ja auch gut in em werte umrechnen, nun klemmts am Text.

Dir auf jeden Fall auch noch nen schönen Mittwoch

Gruß, Eduard

[Eduard Dillmann]

Also mit Schriftarten, die eine feste Breite haben funktioniert es

#logi { font-family:Courier New,monospace; font-weight:bold; font-size:10em; color:#000099; text-align:left;}
#logi2 { font-family:Courier New,monospace; font-weight:bold; font-size:2em; color:#000099; text-align:left;}

<p id="logi">Der erste</p>
<p id="logi2">Der zweite</p>

kennt jemand einen Weg dies bei serifen zu realisieren?

Grüße Eduard Dillmann

[Ashura]

Hallo Eduard.

Also mit Schriftarten, die eine feste Breite haben funktioniert es

Aber auch nicht in jeder.

#logi { font-family:Courier New,monospace; font-weight:bold; font-size:10em; color:#000099; text-align:left;}

Hier steckt ein Fehler: enthält der Name einer Schriftart ein Leerzeichen, so musst du diesen in einfache oder doppelte Quotes packen. (Also z. B. font-family:'Courier New', monospace;)

kennt jemand einen Weg dies bei serifen zu realisieren?

Ich bezweifle aufgrund der unregelmäßigen Form von Glyphen in Serifenschriftarten, dass dies möglich ist.

Einen schönen Mittwoch noch.

Gruß, Ashura

[MudGuard]

Hi,

Hier steckt ein Fehler: enthält der Name einer Schriftart ein Leerzeichen, so musst du diesen in einfache oder doppelte Quotes packen.

Nö. Ein einzelnes Leerzeichen im Namen ist noch kein ausreichender Grund für Anführungszeichen.

Siehe http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

cu,
Andreas

[Ashura]

Hallo MudGuard.

Ein einzelnes Leerzeichen im [Font-]Namen ist noch kein ausreichender Grund für Anführungszeichen.

Siehe http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

Ja, konnte ich soeben auch schon durch wahsaga erfahren. Entweder habe ich diesen Teil beim Studieren der CSS-Spec überlesen oder aber mittlerweile wieder vergessen.
Schaden können die Quotes natürlich dennoch nicht.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Ingo Turski]

Hi,

kennt jemand einen Weg dies bei serifen zu realisieren?

Du kannst dem p mit der Schrift, die näher am Rand ist, ein minimales padding-left im em zuweisen; das paßt dann natürlich nur ungefähr und auch nur für bestimmte Schriftarten.

freundliche Grüße
Ingo

[wahsaga]

hi,

habe das Problem, dass beide Zeilen linksbündig angezeigt werden sollen, jedoch mit steigender Schriftgröße auch der linke Rand größer wird.

Wen welchem "Rand" redest du?

Ich würde darunter margin, ggf. auch padding oder border verstehen - sehe aber davon bei dir nichts.

gruß,
wahsaga

[Eduard Dillmann]

hi,

habe das Problem, dass beide Zeilen linksbündig angezeigt werden sollen, jedoch mit steigender Schriftgröße auch der linke Rand größer wird.

Wen welchem "Rand" redest du?

Ich würde darunter margin, ggf. auch padding oder border verstehen - sehe aber davon bei dir nichts.

gruß,
wahsaga

Danke für die schnelle Antwort
margin-left: 0px; padding-left: 0px; border:0 px; helfen bei mir auch nicht.

wenn
Der erste
Der zweite
untereinander stehen ist der abstand zum linken rand des browsers bei "Der erste" höher als bei "Der zweite".
wenn man im Browser Schriftgrad erhöht ist das noch gravierender.

Ich hoffe mein Problem ist nun verständlicher.