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 gibt an, wie der Text eines Elements großgeschrieben werden soll. Sie kann verwendet werden, um den Text vollständig in Großbuchstaben, vollständig in Kleinbuchstaben oder mit jedem Wort in Großbuchstaben erscheinen zu lassen. Sie kann auch zur Verbesserung der Lesbarkeit von Ruby-Texten beitragen.

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 Kleinschreibung, wie zum Beispiel:

  • In türkischen Sprachen wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Wolgatatarisch (tt) und Baschkirisch (ba) gibt es zwei Arten von i, mit und ohne Punkt, und zwei Groß-Klein-Buchstabenpaare: i/İ und ı/I.
  • Im Deutschen (de) wird das ß in Großbuchstaben zu SS.
  • Im Niederländischen (nl) wird das Digraph ij zu IJ, selbst bei text-transform: capitalize, das nur den ersten Buchstaben eines Wortes in Großbuchstaben setzt.
  • Im Griechischen (el) verlieren Vokale ihren Akzent, wenn das ganze Wort in Großbuchstaben geschrieben wird (ά/Α), außer dem disjunktiven Eta (ή/Ή). Auch Diphthonge mit einem Akzent auf dem ersten Vokal verlieren den Akzent und erhalten auf dem zweiten Vokal einen Trema (άι/ΑΪ).
  • Im Griechischen (el) hat der Kleinbuchstabe Sigma zwei Formen: σ und ς. ς wird nur verwendet, wenn Sigma ein Wort beendet. Bei Anwendung von text-transform: lowercase auf ein großgeschriebenes Sigma (Σ) muss der Browser die richtige Kleinbuchstabenform basierend auf dem Kontext auswählen.
  • Im Irischen (ga) bleiben bestimmte vorangestellte Buchstaben in Kleinbuchstaben, wenn der Basisanfang Großbuchstaben erhält, sodass text-transform: uppercase ar aon tslí zu AR AON tSLÍ ändert und nicht, wie man erwarten könnte, zu AR AON TSLÍ (nur in Firefox). In einigen Fällen wird beim Großschreiben auch ein Bindestrich entfernt: an t-uisce wird zu AN tUISCE transformiert (und der Bindestrich wird von text-transform: lowercase korrekt wieder eingefügt).

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 den Browsern. Überprüfen Sie daher die Browser-Kompatibilitätstabelle.

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 die ursprüngliche Schreibweise, wie sie im Text des Elements geschrieben ist). Ein Buchstabe ist definiert als ein Zeichen, das Teil von Unicode's Letter oder Number allgemeinen Kategorien ist; daher werden Satzzeichen oder Symbole am Anfang eines Wortes ignoriert.

Hinweis: Autoren sollten nicht erwarten, dass capitalize sprachspezifische Schreibregeln für Titel befolgt (z.B. das Überspringen von Artikeln im Englischen).

Hinweis: Das Schlüsselwort capitalize war in CSS 1 und CSS 2.1 unzureichend spezifiziert. Dies führte zu Unterschieden zwischen den Browsern in der Art und Weise, wie der erste Buchstabe berechnet wurde (Firefox betrachtete - und _ als Buchstaben, während andere Browser dies nicht taten. Sowohl WebKit als auch Gecko betrachteten buchstabenbasierte Symbole wie fälschlicherweise als echte Buchstaben). Durch die genaue Definition des korrekten Verhaltens bereinigt CSS Text Level 3 dieses Durcheinander. Die capitalize Zeile in der Browserkompatibilitätstabelle enthält die Version, in der die verschiedenen Engines dieses nun präzise definierte Verhalten unterstützten.

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 die Schreibweise aller Zeichen geändert wird.

full-width

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

full-size-kana

Wird im Allgemeinen für <ruby> Anmerkungstext verwendet, das Schlüsselwort wandelt alle kleinen Kana-Zeichen in entsprechende große Kana um, um Lesbarkeitsprobleme bei den normalerweise bei Ruby verwendeten kleinen Schriftgrößen auszugleichen.

math-auto

Wird verwendet, um Text automatisch in mathematisch-italic darzustellen, wo es angebracht ist. Es wandelt lateinische und griechische Buchstaben sowie einige andere mathebezogene Symbole in kursiv mathematische Symbole um, jedoch nur, wenn es auf einen Textknoten mit einem einzigen Zeichen angewendet wird. Zum Beispiel wird "x" zu "𝑥" (U+1D465), während "exp" als "exp" bleibt. Es wird hauptsächlich verwendet, um das Verhalten von <mi> Elementen in MathML zu spezifizieren. Sie sollten generell MathML-Markup verwenden, das die richtige Formatierung automatisch anwendet.

Barrierefreiheit

Große Textabschnitte mit einem text-transform Wert von uppercase können für Personen mit kognitiven Einschränkungen wie Legasthenie schwer lesbar 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 Texttransformation.

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 Großschreibung 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 Anfangszeichen eines Wortes ignoriert werden. Das Schlüsselwort zielt auf den ersten Buchstaben ab, das heißt, das erste Unicode-Zeichen, das Teil der Letter- oder Number-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 Anfangssymbole ignoriert werden. Das Schlüsselwort zielt auf den ersten Buchstaben ab, das heißt, das erste Unicode-Zeichen, das Teil der Letter- oder Number-Kategorie ist.

Beispiel mit "capitalize" (Niederländisches ij Digraph)

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 der niederländische ij Digraph wie ein einzelner Buchstabe behandelt 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 das Umwandeln 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 dem disjunktiven Eta keinen Akzent haben sollten, und der Akzent auf dem ersten Vokal eines Vokalpaars zu einem 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 das Umwandeln 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 (Σ) in das reguläre Kleinbuchstaben-Sigma (σ) oder die wortabschließende Variante (ς) umgewandelt wird, abhängig vom Kontext.

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 verschiedenen Unicode-Codepunkten. Die volle Breite Version wird verwendet, um sie reibungslos mit asiatischen ideografischen Zeichen zu mischen.

Beispiel mit "full-width" (Japanisches halbbreites 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;
}

Das japanische halbbreite Katakana wurde verwendet, um Katakana in 8-Bit-Zeichen-Codes darzustellen. Im Gegensatz zu regulären (vollbreiten) Katakana-Zeichen wird ein Buchstabe mit Dakuten (stimmhaftes Lautzeichen) als zwei Codepunkte dargestellt, der Körper des Buchstabens und das Dakuten. Das full-width kombiniert diese in einen einzigen Codepunkt, wenn diese Zeichen in volle Breite 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 sin und cos unverändert bleiben.

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

Trotzdem wird 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