text-transform CSS property

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 Regeln zur Groß-/Kleinschreibung, wie die folgenden:

• In Turksprachen 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 Paarungen: i/İ und ı/I.
• Im Deutschen (de) wird das ß zu SS im Großbuchstaben.
• Im Niederländischen (nl) wird das ij als Digraph IJ, auch mit text-transform: capitalize, welches 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 (ά/Α), mit Ausnahme des disjunkten Eta (ή/Ή). Auch Diphthonge mit einem Akzent auf dem ersten Vokal verlieren den Akzent und erhalten einen Diäresis auf dem zweiten Vokal (άι/ΑΪ).
• 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ßbuchstaben-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ßgeschrieben wird, sodass text-transform: uppercase zum Beispiel ar aon tslí in AR AON tSLÍ ändert und nicht, wie man erwarten könnte, AR AON TSLÍ (nur in Firefox). In einigen Fällen wird beim Großschreiben auch ein Bindestrich entfernt: an t-uisce wird in AN tUISCE umgewandelt (und der Bindestrich wird korrekt durch text-transform: lowercase wieder eingesetzt).

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

Syntax

/* 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 Schreibeweise wie im Text des Elements geschrieben). Ein Buchstabe ist definiert als ein Zeichen, das Teil von Unicode-Kategorien Buchstabe oder Zahl ist; daher werden Satzzeichen oder Symbole zu Beginn eines Wortes ignoriert.

Warnung: In vielen Sprachen gilt es als falsch, jeden einzelnen Wortanfang eines Satzes groß zu schreiben, auch nicht in Titeln und Namen. Wenn Sie die Sprache des Textes, auf den der Stil angewendet wird, nicht kennen, sollten Sie capitalize vermeiden. Zudem erzeugt capitalize keine Titelmuster, da es keine sprachspezifischen Regeln wie das Überspringen von Artikeln im Englischen anwendet.

Hinweis: Das Schlüsselwort capitalize war in CSS 1 und CSS 2.1 ungenau spezifiziert. Dies führte zu Unterschieden zwischen den Browsern in der Berechnung des ersten Buchstaben (Firefox betrachtete - und _ als Buchstaben, aber andere Browser nicht. Sowohl WebKit als auch Gecko betrachteten fehlerhaft buchstabenbasierte Symbole wie ⓐ als echte Buchstaben.) Durch die präzise Festlegung des korrekten Verhaltens räumt CSS Text Level 3 dieses Durcheinander auf. Die capitalize-Zeile in der Browser-Kompatibilitätstabelle enthält die Version, in der die verschiedenen Engines dieses jetzt 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 die Groß-/Kleinschreibung aller Zeichen geändert wird.

full-width

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

full-size-kana

Wird allgemein für <ruby>-Annotationstext verwendet, das Schlüsselwort konvertiert alle kleinen Kana-Zeichen in gleichwertige volle Kana, um Lesbarkeitsprobleme bei den typischerweise in Ruby verwendeten kleinen Schriftgrößen auszugleichen.

math-auto

Wird verwendet, um Text automatisch in mathematischen Kursivschrift anzuzeigen, wo es angemessen ist. Es transformiert lateinische und griechische Buchstaben sowie einige andere mathematikbezogene Symbole in kursiv mathematische Symbole, jedoch nur, wenn es auf einen Textknoten mit einem einzigen Zeichen angewendet wird. 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. Im Allgemeinen sollten Sie MathML-Markup verwenden, das automatisch das richtige Styling anwendet.

Barrierefreiheit

Große Textabschnitte mit einem text-transform-Wert von uppercase können für Menschen mit kognitiven Bedenken, z. B. Dyslexie, schwer lesbar sein.

• MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen
• W3C Verständnis von WCAG 2.2

Formale Definition

Formale Syntax

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

Beispiele

Beispiel mit "none"

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

span {
  text-transform: none;
}
strong {
  float: right;
}

Dies demonstriert keine Textumwandlung.

Beispiel mit "capitalize" (allgemein)

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

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Dies demonstriert die Großschreibung von Text.

Beispiel mit "capitalize" (Zeichensetzung)

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

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Dies demonstriert, wie vorangestellte Satzzeichen eines Wortes ignoriert werden. Das Schlüsselwort zielt auf den ersten Buchstaben ab, das ist das erste Unicode-Zeichen Teil der Kategorie Buchstabe oder Zahl.

Beispiel mit "capitalize" (Symbole)

<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Dies demonstriert, wie vorrangige Symbole ignoriert werden. Das Schlüsselwort zielt auf den ersten Buchstaben ab, das ist das erste Unicode-Zeichen Teil der Kategorie Buchstabe oder Zahl.

Beispiel mit "capitalize" (Niederländischer ij-Digraph)

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

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

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

Beispiel mit "uppercase" (allgemein)

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

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Dies demonstriert die Umwandlung des Textes in Großbuchstaben.

Beispiel mit "uppercase" (Griechische Vokale)

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

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Dies demonstriert, wie griechische Vokale außer disjutktivem eta keinen Akzent haben sollten, und der Akzent auf dem ersten Vokal eines Vokalpaars zu einem Diäresis auf dem zweiten Vokal wird.

Beispiel mit "lowercase" (allgemein)

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

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Dies demonstriert die Umwandlung des Textes in Kleinbuchstaben.

Beispiel mit "lowercase" (Griechisches Σ)

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

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, je nach Kontext.

Beispiel mit "lowercase" (Litauisch)

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

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

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

Beispiel mit "full-width" (allgemein)

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

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Einige Zeichen existieren in zwei Formaten: Normalbreite und volle Breite, mit unterschiedlichen Unicode-Kodierungspunkten. Die vollbreite Version wird verwendet, um sie nahtlos mit asiatischen Ideogrammen zu mischen.

Beispiel mit "full-width" (Japanische Halbweite Katakana)

<p>
  Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Die japanischen Halbweite-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 Kodierungspunkte dargestellt, der Buchstabenkörper und das Dakuten. full-width kombiniert diese in einen einzigen Kodierungspunkt, wenn diese Zeichen in volle Breite konvertiert werden.

Beispiel mit "full-size-kana"

<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>

p:nth-of-type(2) {
  text-transform: full-size-kana;
}

Beispiel mit "math-auto"

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

<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, dass nur die x-Zeichen kursiv werden, während sin und cos unverändert bleiben.

.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 in MathML:

<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

Browser-Kompatibilität

Siehe auch

• font-variant