Schrift auf gleiche Länge bringen

[Markus]

Hallo,

Habe folgendes Problem: Ich hätte gerne für meine Website eine Überschrift und eine etwas längere Unter-Überschrift.
Also ungefähr so:
Ü  B  E  R  S  C  H  R  I  F  T
dies ist eine Unter-Überschrift

Jetzt hätte ich aber gerne, dass die Schriftgröße der Unterüberschrift automatisch so angepasst wird, dass sie in der Breite den gleichen Platz einnimmt wie die Überschrift.
Für Antworten wäre ich sehr dankbar

Markus

[Klawischnigg]

Hi there,

Jetzt hätte ich aber gerne, dass die Schriftgröße der Unterüberschrift automatisch so angepasst wird, dass sie in der Breite den gleichen Platz einnimmt wie die Überschrift.
Für Antworten wäre ich sehr dankbar

Dein Problem ist prinzipiell nicht lösbar. Denn Du hast keine Kontrolle darüber, wie groß die Schrift auf dem Monitor des Besuchers ist. Du kannst da bestenfalls mit Näherungswerten arbeiten, das wird aber meist nicht das von Dir gewünschte Ergebnis bringen...

[Gunnar Bittersmann]

Hello out there!

Ü  B  E  R  S  C  H  R  I  F  T
dies ist eine Unter-Überschrift

Jetzt hätte ich aber gerne, dass die Schriftgröße der Unterüberschrift automatisch so angepasst wird, dass sie in der Breite den gleichen Platz einnimmt wie die Überschrift.

Mit CSS ist das nicht machbar. Da musste mit JavaScript ran:

Die Breite eines Elements erhältst du mit 'offsetWidth'. Damit sich die überschrift-Boxen so breit machen wie sie können, sondern nur so breit wie es deren Inhalt verlangt, z.B.

h1, h2 {  
  float: left;  
  clear: both;  
}

Differenz der beiden Breiten willst du als Zwischenräume zwischen die Zeichen der Hauptüberschrift verteilen. Dazu zerlegst du deren Text mit split() in seine einzelnen Zeichen, erhältst damit ein Array und mit diesem auch deren Anzahl. Nun weißt du also, wie groß jeder Zwischenraum zu sein hat.

Den Text der Hauptüberschrift löschst du und fügst die einzelnen Zeichen als Textinhalte von 'span'-Element-Knoten ein, deren 'style.marginRight' du den Wert des berechneten Zwischenraums gibst. Fertig.

See ya up the road,
Gunnar

PS: IE 5 wendet 'margin-right' nicht auf Inline-Elemente an. Tun das neuere Versionen dieses Brow^WWas-auch-immers?

[Detlef G.]

Hallo Gunnar

... Nun weißt du also, wie groß jeder Zwischenraum zu sein hat.

Den Text der Hauptüberschrift löschst du ...

Oder letter-spacing wird entsprechend gesetzt.

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

Hello out there!

Oder letter-spacing wird entsprechend gesetzt.

Ach nee, das wäre ja zu einfach! ;-)

Ich hatte tatsächlich auch kurz den Gedanken, dass es eine solche CSS-Eigenschaft gäbe, war dann aber davon abgekommen, weil eine Stimme mir sagte, dass diese von Browsern kaum unterstützt wird. Hm, Firefox kann’s. Und damit ist es natürlich viel performanter und eleganter.

See ya up the road,
Gunnar