Zum Inhalt springen

Websiteentwicklung: CSS: Texttransformation

Aus Wikibooks


Mit Hilfe der Eigenschaft text-transform kann Text so präsentiert werden, dass er unabhängig von der Notation im Quelltext groß- oder kleingeschrieben erscheint oder aber auch nur der Anfangsbuchstabe jeden Wortes großgeschrieben wird. Betroffen sind also nur Buchstaben oder Glyphen, für welche es sowohl Majuskeln als auch Minuskeln gibt, also vorrangig zum Beispiel im deutschen Sprachraum die Buchstaben A-Z, a-z, Umlaute und die ß-Ligatur, wobei letztere ein Problemfall ist, weil für den Großbuchstaben der ß-Ligatur (also: ẞ) erst 2008, also recht spät eine Kodierung im Rahmen von Unicode (U+1E9E, ẞ) eingeführt wurde, der Großbuchstabe also in vielen Schriftarten gar nicht enthalten sein mag.

Mögliche Werte sind:

  • 'inherit' geerbt
  • 'none' keine Änderung gegenüber dem Quelltext
  • 'capitalize' die erste Buchstabe eines jeden Wortes wird großgeschrieben, der Rest bleibt unverändert
  • 'uppercase' durchgehende Verwendung von Großbuchstaben.
  • 'lowercase' durchgehende Verwendung von Kleinbuchstaben.

Der Initialwert ist 'none'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente in visuellen Medien.

XHTML:

<p>dies ist ein satz mit durchgehender kleinschreibung.<br />
DIES IST EIN SATZ DURCHGEHEND GRO&#7838;GESCHRIEBEN.<br />
Umlaute und Ligaturen: Ää Öö Üü &#7838;ß</p>

CSS:

p {
  text-transform: capitalize
}

dies ist ein satz mit durchgehender kleinschreibung.
DIES IST EIN SATZ DURCHGEHEND GROẞGESCHRIEBEN.
Umlaute und Ligaturen: Ää Öö Üü ẞß

p {
  text-transform: uppercase
}

dies ist ein satz mit durchgehender kleinschreibung.
DIES IST EIN SATZ DURCHGEHEND GROẞGESCHRIEBEN.
Umlaute und Ligaturen: Ää Öö Üü ẞß

p {
  text-transform: lowercase
}

dies ist ein satz mit durchgehender kleinschreibung.
DIES IST EIN SATZ DURCHGEHEND GROẞGESCHRIEBEN.
Umlaute und Ligaturen: Ää Öö Üü ẞß