Schrift auf gleiche Länge 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?