ruben: Schriftbreite

Hallo!

Ich arbeite an einem Akkordeonmenü mit Mootools:
http://vok.dyden.de/mootools/moo.html
Eine Anzahl fälliger Vokabeln soll in einem kleinen Quadrat (28*28px) angezeigt werden. Diese Anzahl Ziffern variiert von 1-3 stellig.
Das Quadrat ist kein Blockelement, danach kommt Text (der angezeigt wird, wenn sich dieser Akkordeonteil öffnet.
Ich möchte, dass die Zahl den vorhandenen Platz immer optimal ausnutzt. Wichtig ist vor allem, dass sie breit genug ist, damit nicht der Text danach angezeigt wird (bei geschlossenem Menü).
Ich wollte das ursprünglich über eine font-size, die mit der Ziffernzahl korrespondiert realisieren.

  
if(zahl<10) anzahlfaellig.setStyle('font-size','25pt'); //mootools syntax, ist aber verständlich hoffe ich  
else if (zahl>99) anzahlfaellig.setStyle('font-size','13.5pt');  
else anzahlfaellig.setStyle('font-size','20pt');  
}  

Nun sind einstellige Zahlen aber sehr schmal, so dass eine Breite von 28px kaum erreicht werden kann.
Außerdem hat eine Veränderung der Schriftgröße auch immer eine Auswirkung auf die vertikale Lage des nachfolgenden Texts.

Kann ich das irgendwie realisieren, ohne immer kleine Zahlen zu benutzen und ohne eine PHP-erstelle Grafik einzubinden? Es ist zwar nur eine kleine Spielerei, aber ich will nicht so schnell aufgeben.

Eine Hilfe wäre auch schon, wenn ich die vertikale Lage des Resttextes irgendwie unabhängig von dem Anzahl-Span machen könnte.

Wie ist das mit fixed-width fonts wie Courier? Macht das einen Unterschied? Ich hatte den Eindruck, dass sich bei Arial an der Breite (bei Zahlen!) nichts tut.

Vielen Dank für jede Hilfe,
Ruben

  1. Hi,

    Eine Anzahl fälliger Vokabeln soll in einem kleinen Quadrat (28*28px) angezeigt werden. Diese Anzahl Ziffern variiert von 1-3 stellig.
    Das Quadrat ist kein Blockelement, danach kommt Text (der angezeigt wird, wenn sich dieser Akkordeonteil öffnet.
    Ich möchte, dass die Zahl den vorhandenen Platz immer optimal ausnutzt. Wichtig ist vor allem, dass sie breit genug ist, damit nicht der Text danach angezeigt wird (bei geschlossenem Menü).

    Warum zentrierst du sie dann nicht einfach in einem Bereich, der auf jeden Fall breit genug fuer drei Ziffern ist? (Oder links-/rechtsbuendig, je nachdem, was genau du erreichen willst.)

    Davon, die Schriftgroesse zu aendern, wuerde ich jedenfalls Abstand nehmen.
    Das wuerde bei kleineren Zahlen optisch eine hoehere Bedeutung suggerieren, als bei groesseren - was aber kaum der Effekt sein duerfte, den du haben willst(?).

    MfG ChrisB

    1. Hallo!

      Warum zentrierst du sie dann nicht einfach in einem Bereich, der auf jeden Fall breit genug fuer drei Ziffern ist? (Oder links-/rechtsbuendig, je nachdem, was genau du erreichen willst.)

      Weil es kein Blockelement ist, und danach noch Text kommt. Wie könnt ich das denn realisieren?

      Das wuerde bei kleineren Zahlen optisch eine hoehere Bedeutung suggerieren, als bei groesseren - was aber kaum der Effekt sein duerfte, den du haben willst(?).

      Ich will einfach, dass die Box ausgefüllt ist. Von der Bedeutung sind alle Zahlen gleich, es ist nicht wichtiger, wenn es mehr sind. Da bleib ich also bei.

      Vielen Dank,
      Ruben

      1. Hi,

        Warum zentrierst du sie dann nicht einfach in einem Bereich, der auf jeden Fall breit genug fuer drei Ziffern ist? (Oder links-/rechtsbuendig, je nachdem, was genau du erreichen willst.)
        Weil es kein Blockelement ist, und danach noch Text kommt. Wie könnt ich das denn realisieren?

        float?
        display:inline-block? (Browserunterstuetzung zugegebenermassen derzeit noch mangelhaft)
        Oder halt eine dicktengleiche Schriftart/monospace verwenden, und "Leerstellen" durch &nbsp; auffuellen.

        MfG ChrisB

        1. float?

          float war ne gute Idee, in dem Fall geht es natürlich.
          Jetzt hab ich zwar immer noch ein Problem mit vertical-align, aber das wird schon.

          Danke,
          Ruben