Dynamische Groß- und Kleinschreibung

Angenommen, man möchte zur Visualisierung Überschriften nur in Großbuchstaben darstellen, so kann man natürlich beim Eingeben nur Großbuchstaben eintippen. Sollen diese Texte herauskopiert werden, sind die Buchstaben noch alle in Großschrift. Besser sind folgende Tricks und Kniffe, die in CSS umsetzbar sind.

1. font-variant

Code:

h1 {font-variant:small-caps;} h2 {font-variant:normal;}

Überschriften der Ordnung 2 (h2) werden hier normal dargestellt, während in der ersten Ordnung (h1) alles in Großbuchstaben abgebildet wird. Hierbei allerdings mit der Besonderheit, dass kleingeschriebene Buchstaben auch verkleinert dargestellt werden.

2. text-transform

Code:

h1 {text-transform:capitalize;} h2 {text-transform:uppercase;} h3 {text-transform:lowercase;} h4 {text-transform:none;}

Überschriften in der ersten Ordnung (h1) werden nun so dargestellt, dass der erste Buchstabe eines jeden Wortes nun groß geschrieben ist. Die zweite Stufe (h2) wäre nun komplett groß geschrieben, die dritte (h3) klein geschrieben und bei der letzten (h4) ändert sich nichts.

Die Besonderheit dabei ist: Markiert man nun einen Text, der optisch mit Großbuchstaben geschrieben wurde und kopiert diesen z.B. in den Editor, so erscheinen die Buchstaben wieder in ihrem Ursprungsformat.

Geschrieben von René am 18.06.2004 (4819x gelesen)