text-transform

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die text-transform CSS Eigenschaft legt fest, wie der Text eines Elements zu kapitalisieren ist. Sie kann verwendet werden, um Text in Großbuchstaben oder Kleinbuchstaben erscheinen zu lassen oder jedes Wort zu kapitalisieren. Auch kann sie die Lesbarkeit von Ruby-Text verbessern.

Probieren Sie es aus

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;
text-transform: full-size-kana;
text-transform: math-auto;
<section id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      LONDON. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall.
    </p>
    <p lang="el">
      Σ is a Greek letter and appears in ΟΔΥΣΣΕΥΣ. Θα πάμε στο "Θεϊκό φαΐ" ή στη
      "Νεράιδα"
    </p>
    <p lang="ja">ァィゥェ ォヵㇰヶ</p>
  </div>
</section>
#example-element {
  font-size: 1.2em;
}

Die text-transform Eigenschaft berücksichtigt sprachspezifische Groß- und Kleinschreibungsregeln, wie etwa die folgenden:

  • In türkischen Sprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Wolga-Tatarisch (tt) und Baschkirisch (ba), gibt es zwei Arten von i, mit und ohne Punkt, und zwei Großschreibungs-Paare: i/İ und ı/I.
  • Im Deutschen (de) wird ß in Großbuchstaben zu SS.
  • Im Niederländischen (nl) wird das ij Digraph zu IJ, selbst mit text-transform: capitalize, welches nur den ersten Buchstaben eines Wortes in Großbuchstaben umwandelt.
  • Im Griechischen (el) verlieren Vokale ihren Akzent, wenn das ganze Wort in Großbuchstaben ist (ά/Α), mit Ausnahme des disjunktiven Eta (ή/Ή). Auch verlieren Diphthonge mit einem Akzent auf dem ersten Vokal den Akzent und gewinnen ein Trema auf dem zweiten Vokal (άι/ΑΪ).
  • Im Griechischen (el) hat das kleine Sigma-Zeichen zwei Formen: σ und ς. ς wird nur verwendet, wenn Sigma ein Wort beendet. Beim Anwenden von text-transform: lowercase auf ein großes Sigma (Σ) muss der Browser die richtige Kleinbuchstabenform basierend auf dem Kontext wählen.
  • Im Irischen (ga) bleiben bestimmte vorangestellte Buchstaben klein, wenn der Basis-Anfangszeichen großgeschrieben wird, zum Beispiel text-transform: uppercase ändert ar aon tslí zu AR AON tSLÍ und nicht, wie man erwarten könnte, AR AON TSLÍ (nur Firefox). In einigen Fällen wird beim Großschreiben auch ein Bindestrich entfernt: an t-uisce wird zu AN tUISCE umgewandelt (und der Bindestrich wird durch text-transform: lowercase korrekt wieder eingesetzt).

Die Sprache wird durch das lang HTML-Attribut oder das xml:lang XML-Attribut definiert.

Hinweis: Die Unterstützung für sprachspezifische Fälle variiert zwischen Browsern, daher überprüfen Sie die Tabelle zur Browser-Kompatibilität.

Syntax

css
/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;
text-transform: math-auto;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;
capitalize

Ist ein Schlüsselwort, das den ersten Buchstaben jedes Wortes in Großbuchstaben umwandelt. Andere Zeichen bleiben unverändert (sie behalten ihre ursprüngliche Schreibweise, wie sie im Text des Elements geschrieben sind). Ein Buchstabe wird definiert als ein Zeichen, das Teil der allgemeinen Unicode-Kategorien Buchstaben oder Zahlen ist; daher werden Satzzeichen oder Symbole am Anfang eines Wortes ignoriert.

Hinweis: Autoren sollten nicht erwarten, dass capitalize sprachspezifische Titelgebungs-Konventionen befolgt (wie das Überspringen von Artikeln im Englischen).

Hinweis: Das capitalize Schlüsselwort war in CSS 1 und CSS 2.1 unzureichend spezifiziert, was zu Unterschieden zwischen Browsern in der Berechnung des ersten Buchstabens führte (Firefox betrachtete - und _ als Buchstaben, andere Browser taten dies nicht. Sowohl WebKit als auch Gecko betrachteten fälschlicherweise symbolbasierte Buchstaben wie als echte Buchstaben.) Durch die genaue Definition des korrekten Verhaltens räumt CSS Text Level 3 dieses Durcheinander auf. Die capitalize Zeile in der Tabelle zur Browser-Kompatibilität enthält die Version, ab der die verschiedenen Engines dieses nun präzise definierte Verhalten unterstützen.

uppercase

Ist ein Schlüsselwort, das alle Zeichen in Großbuchstaben umwandelt.

lowercase

Ist ein Schlüsselwort, das alle Zeichen in Kleinbuchstaben umwandelt.

none

Ist ein Schlüsselwort, das verhindert, dass sich die Schreibweise aller Zeichen ändert.

full-width

Ist ein Schlüsselwort, das das Schreiben eines Zeichens - hauptsächlich Ideogramme und lateinische Skripte - innerhalb eines Quadrats erzwingt, damit sie in den üblichen ostasiatischen Schriftzeichen (wie Chinesisch oder Japanisch) ausgerichtet werden können.

full-size-kana

Wird allgemein für <ruby> Anmerkungstext verwendet. Das Schlüsselwort wandelt alle kleinen Kana-Zeichen in die entsprechenden Kana in voller Größe um, um Lesbarkeitsprobleme bei den typischerweise in Ruby verwendeten kleinen Schriftgrößen auszugleichen.

math-auto

Wird verwendet, um Text dort, wo es angebracht ist, automatisch in mathematischer Kursivschrift darzustellen. Es transformiert lateinische und griechische Buchstaben und einige andere mathematisch verwandte Symbole in mathematische Kursivsymbole, jedoch nur, wenn es auf einen Textknoten angewendet wird, der ein einzelnes Zeichen enthält. Zum Beispiel wird "x" zu "𝑥" (U+1D465), aber "exp" bleibt "exp". Es wird hauptsächlich verwendet, um das Verhalten von <mi> Elementen in MathML zu spezifizieren. Sie sollten im Allgemeinen MathML-Markup verwenden, welches automatisch das richtige Styling anwendet.

Barrierefreiheit

Große Abschnitte von Text, die mit einem text-transform Wert von uppercase gesetzt sind, können für Menschen mit kognitiven Beeinträchtigungen wie Legasthenie schwer zu lesen sein.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

text-transform = 
none |
[ capitalize | uppercase | lowercase ] || full-width || full-size-kana

Beispiele

Beispiel mit "none"

html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>
css
span {
  text-transform: none;
}
strong {
  float: right;
}

Dies demonstriert keine Textumwandlung.

Beispiel mit "capitalize" (allgemein)

html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Dies demonstriert die Kapitalisierung von Text.

Beispiel mit "capitalize" (Zeichensetzung)

html
<p>
  Initial String
  <strong
    >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
  >
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
    ></strong
  >
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Dies demonstriert, wie anfängliche Satzzeichen eines Wortes ignoriert werden. Das Schlüsselwort zielt auf den ersten Buchstaben ab, das ist das erste Unicode-Zeichen, welches Teil der Buchstaben- oder Zahlengeneral-Kategorie ist.

Beispiel mit "capitalize" (Symbole)

html
<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Dies demonstriert, wie anfängliche Symbole ignoriert werden. Das Schlüsselwort zielt auf den ersten Buchstaben ab, das ist das erste Unicode-Zeichen, welches Teil der Buchstaben- oder Zahlengeneral-Kategorie ist.

Beispiel mit "capitalize" (niederländische ij Ligatur)

html
<p>
  Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span lang="nl"
      >The Dutch word: "ijsland" starts with a digraph.</span
    ></strong
  >
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Dies demonstriert, wie das niederländische ij-Digraph als ein einzelner Buchstabe gehandhabt werden muss.

Beispiel mit "uppercase" (allgemein)

html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>
css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Dies demonstriert die Umwandlung des Textes in Großbuchstaben.

Beispiel mit "uppercase" (griechische Vokale)

html
<p>
  Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
  >
</p>
css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Dies demonstriert, wie griechische Vokale, außer das disjunktive eta, keinen Akzent haben sollten, und der Akzent auf dem ersten Vokal eines Vokalpaares ein Trema auf dem zweiten Vokal wird.

Beispiel mit "lowercase" (allgemein)

html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Dies demonstriert die Umwandlung des Textes in Kleinbuchstaben.

Beispiel mit "lowercase" (griechisches Σ)

html
<p>
  Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
    ></strong
  >
</p>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Dies demonstriert, wie das griechische Zeichen Sigma (Σ) zu dem regulären kleinen Sigma (σ) oder der wörtlichen Endform (ς) gemäß dem Kontext umgewandelt wird.

Beispiel mit "lowercase" (Litauisch)

html
<p>
  Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Dies demonstriert, wie die litauischen Buchstaben Ĩ und ihren Punkt behalten, wenn sie in Kleinbuchstaben umgewandelt werden.

Beispiel mit "full-width" (allgemein)

html
<p>
  Initial String
  <strong
    >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
  >
</p>
<p>
  text-transform: full-width
  <strong
    ><span
      >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
    ></strong
  >
</p>
css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Einige Zeichen existieren in zwei Formaten: normale Breite und volle Breite, mit unterschiedlichen Unicode-Codepunkten. Die Vollbreitenversion wird verwendet, um sie harmonisch mit asiatischen ideografischen Zeichen zu mischen.

Beispiel mit "full-width" (japanische Halbbreiten-Katakana)

html
<p>
  Initial String
  <strong>ウェブプログラミングの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ウェブプログラミングの勉強</span></strong>
</p>
css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Die japanische Halbbreiten-Katakana wurden verwendet, um Katakana in 8-Bit-Zeichencodes darzustellen. Im Gegensatz zu regulären (vollbreiten) Katakana-Zeichen wird ein Buchstabe mit Dakuten (Stimmzeichen) als zwei Codepunkte dargestellt, dem Körper des Buchstabens und dem Dakuten. Der full-width-Wert kombiniert diese zu einem einzelnen Codepunkt, wenn diese Zeichen in Vollbreite umgewandelt werden.

Beispiel mit "full-size-kana"

html
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
css
p:nth-of-type(2) {
  text-transform: full-size-kana;
}

Beispiel mit "math-auto"

In diesem Beispiel verwenden wir reines HTML-Markup, um eine mathematische Formel zu erstellen:

html
<div>
  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  = 1
</div>

Wir geben jedem .math-id Element text-transform: math-auto. Beachten Sie jedoch, wie nur die x Zeichen kursiv werden, während die sin und cos unverändert bleiben.

css
.math-id {
  text-transform: math-auto;
}

Es wird jedoch empfohlen, MathML für mathematische Formeln zu verwenden, da es eine robustere und zugänglichere Möglichkeit bietet, mathematische Inhalte darzustellen. Hier ist die gleiche Formel mit MathML:

xml
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">sin</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">cos</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
  </semantics>
</math>

Spezifikationen

Specification
CSS Text Module Level 4
# text-transform

Browser-Kompatibilität

Siehe auch