los text-transform La propiedad CSS especifica cómo poner en mayúsculas el texto de un elemento. Se puede usar para hacer que el texto aparezca en mayúsculas o minúsculas, o con cada palabra en mayúscula. También puede ayudar a mejorar la legibilidad del rubí.

los text-transform La propiedad tiene en cuenta las reglas de mapeo de casos específicas del idioma, como las siguientes:

  • En lenguas turcas, como el turco (tr), Azerbaiyano (az), Tártaro de Crimea (crh), Volga Tatar (tt) y Bashkir (ba), hay dos tipos de i, con y sin el punto, y dos combinaciones de casos: i/İ y ı/I.

  • En alemán (de), los ß se convierte en SS en mayúsculas.

  • En holandés (nl), los ij dígrafo se convierte en IJ, incluso con text-transform: capitalize, que solo pone la primera letra de una palabra en mayúsculas.

  • En griego (el), las vocales pierden su acento cuando toda la palabra está en mayúsculas (ά/Α), excepto por el disyuntivo eta (ή/Ή). Además, los diptongos con acento en la primera vocal pierden el acento y ganan diéresis en la segunda vocal (άι/ΑΪ).

  • En griego (el), el carácter sigma en minúscula tiene dos formas: σ y ς. ς se usa solo cuando sigma termina una palabra. Al aplicar text-transform: lowercase a una sigma mayúsculaΣ), el navegador debe elegir la forma correcta en minúsculas según el contexto.

  • en irlandésga), ciertas letras con prefijo permanecen en minúsculas cuando la inicial de la base está en mayúscula, por ejemplo text-transform: uppercase cambiará ar aon tslí para AR AON tSLÍ y no, como era de esperar, AR AON TSLÍ (Solo Firefox). En algunos casos, también se elimina un guión al poner mayúsculas: an t-uisce se transforma en AN tUISCE (y el guion es reinsertado correctamente por text-transform: lowercase).

El idioma está definido por el lang Atributo HTML o el xml:lang Atributo XML.

Nota: La compatibilidad con casos específicos de idiomas varía entre los navegadores, así que consulte la tabla de compatibilidad de navegadores.

Sintaxis

/* Keyword values */text-transform: none;text-transform: capitalize;text-transform: uppercase;text-transform: lowercase;text-transform: full-width;text-transform: full-size-kana;/* Global values */text-transform: inherit;text-transform: initial;text-transform: unset;
capitalize

Es una palabra clave que convierte la primera carta de cada palabra a mayúsculas. Otros caracteres permanecen sin cambios (conservan su caso original tal como está escrito en el texto del elemento). Una letra se define como un carácter que forma parte de las categorías generales de letras o números de Unicode. Esta es una API experimental que no debe usarse en código de producción. ; por lo tanto, se ignoran los signos de puntuación o los símbolos al principio de una palabra.

Los autores no deben esperar capitalize para seguir las convenciones de mayúsculas y minúsculas de un idioma específico (como omitir artículos en inglés). capitalize la palabra clave estaba subespecificada en CSS 1 y CSS 2.1. Esto resultó en diferencias entre los navegadores en la forma en que se calculó la primera letra (Firefox consideró - y _ como letras, pero otros navegadores no lo hicieron. Tanto Webkit como Gecko consideraron incorrectamente símbolos basados ​​en letras como ⓐ ser letras reales. Internet Explorer 9 fue el más cercano a la definición de CSS 2, pero con algunos casos extraños). Al definir con precisión el comportamiento correcto, CSS Text Level 3 limpia este desorden. los capitalize La línea en la tabla de compatibilidad del navegador contiene la versión que los diferentes motores comenzaron a admitir este comportamiento ahora definido con precisión.

uppercase
Es una palabra clave que convierte todos los caracteres a mayúsculas.
lowercase
Es una palabra clave que convierte todos los caracteres a minúsculas.
none
Es una palabra clave que evita que se modifiquen las mayúsculas y minúsculas de todos los caracteres.
full-width
Es una palabra clave que fuerza la escritura de un carácter, principalmente ideogramas y escrituras latinas, dentro de un cuadrado, lo que les permite alinearse en las escrituras habituales del este asiático (como chino o japonés).
full-size-kana
Usado generalmente para texto de anotación, la palabra clave convierte todos los caracteres Kana pequeños al Kana equivalente de tamaño completo, para compensar los problemas de legibilidad en los tamaños de fuente pequeños que se utilizan normalmente en ruby.

Preocupaciones de accesibilidad

Grandes secciones de texto con un text-transform valor de uppercase puede ser difícil de leer para las personas con problemas cognitivos como la dislexia.

Definicion formal

Valor inicial none
Se aplica a todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredado sí
Valor calculado Como se especificó
Tipo de animación discreto

Sintaxis formal

none | capitalize | uppercase | lowercase | full-width | full-size-kana

Ejemplos de

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>
spantext-transform: none;strongfloat: right;

Esto demuestra que no hay transformación de texto.

capitalizar (general)

<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>
spantext-transform: capitalize;strongfloat: right;

Esto demuestra el uso de mayúsculas en el texto.

capitalizar (puntuación)

<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>
spantext-transform: capitalize;strongfloat: right;

Esto demuestra cómo se ignoran las puntuaciones iniciales de una palabra. La palabra clave tiene como destino la primera letra, que es la primera parte de carácter Unicode de la categoría general Letra o Número.

capitalizar (símbolos)

<p>Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙklstrong>p><p>text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙklspan>strong>p>
spantext-transform: capitalize;strongfloat: right;

Esto demuestra cómo se ignoran los símbolos iniciales. La palabra clave tiene como destino la primera letra, que es la primera parte de carácter Unicode de la categoría general Letra o Número.

capitalizar (dígrafo ij holandés)

<p>Initial String
  <stronglang="nl">The Dutch word: "ijsland" starts with a digraph.strong>p><p>text-transform: capitalize
  <strong><spanlang="nl">The Dutch word: "ijsland" starts with a digraph.span>strong>p>
spantext-transform: capitalize;strongfloat: right;

Esto demuestra cómo los holandeses ij El dígrafo debe manejarse como una sola letra.

mayúscula (general)

<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>
spantext-transform: uppercase;strongfloat: right;

Esto demuestra la transformación del texto a mayúsculas.

mayúscula (vocales griegas)

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

Esto demuestra cómo las vocales griegas, excepto disyuntivas eta no debe tener acento, y el acento en la primera vocal de un par de vocales se convierte en diéresis en la segunda vocal.

minúscula (general)

<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>
spantext-transform: lowercase;strongfloat: right;

Esto demuestra la transformación del texto a minúsculas.

minúscula (griego Σ)

<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>
spantext-transform: lowercase;strongfloat: right;

Esto demuestra cómo el carácter griego sigma (Σ) se transforma en sigma minúscula regular (σ) o la variante de final de palabra (ς), según el contexto.

minúscula (lituano)

<p>Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́strong>p><p>text-transform: lowercase
  <strong><spanlang="lt">Ĩ is a Lithuanian LETTER as is J́span>strong>p>
spantext-transform: lowercase;strongfloat: right;

Esto demuestra cómo las letras lituanas Ĩ y J́ conservan su punto cuando se transforma a minúsculas.

ancho completo (general)

<p>Initial String
  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>[email protected]~strong>p><p>text-transform: full-width
  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>[email protected]~span>strong>p>
spantext-transform: full-width;strongwidth: 100%;float: right;

Algunos caracteres existen en dos formatos, ancho normal y ancho completo, con diferentes puntos de código Unicode. La versión de ancho completo se usa para mezclarlos suavemente con caracteres ideográficos asiáticos.

de ancho completo (katakana japonés de medio ancho)

<p>Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強strong>p><p>text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強span>strong>p>
spantext-transform: full-width;strongwidth: 100%;float: right;

El katakana japonés de ancho medio se utilizó para representar katakana en códigos de caracteres de 8 bits. A diferencia de los caracteres katakana regulares (de ancho completo), una letra con dakuten (marca de sonido expresada) se representa como dos puntos de código, el cuerpo de la letra y dakuten. los full-width combina estos en un solo punto de código al convertir estos caracteres a ancho completo.

kana de tamaño completo

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

Especificaciones

Especificación Estado Comentario
Módulo de texto CSS nivel 3
La definición de ‘text-transform’ en esa especificación.		 Recomendación candidata De CSS Nivel 2 (Revisión 1)
La definición de ‘text-transform’ en esa especificación., extiende letras a cualquier carácter Unicode en la categoría general Número o Letra. Modifica el comportamiento de capitalize para aplicar a la primera letra de la palabra, ignorando los signos de puntuación o los símbolos iniciales. Agrega el full-width y full-size-kana palabras clave.
CSS Nivel 2 (Revisión 1)
La definición de ‘text-transform’ en esa especificación.		 Recomendación De Nivel 1 de CSS
La definición de ‘text-transform’ en esa especificación., extiende letras a escrituras bicamerales no latinas
Nivel 1 de CSS
La definición de ‘text-transform’ en esa especificación.		 Recomendación Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
text-transform 1El text-transform la propiedad no funciona para ::first-line pseudoelementos (ni para la sintaxis de dos puntos). Ver Error de cromo 129669. 12 1 4 7Desde Opera 15, el text-transform la propiedad no funciona para ::first-line pseudoelementos (ni para la sintaxis de dos puntos). Ver Error de cromo 129669. 1El text-transform la propiedad no funciona para ::first-line pseudoelementos (tampoco para la antigua sintaxis de dos puntos). Ver Error de WebKit 3409. 1El text-transform la propiedad no funciona para ::first-line pseudoelementos (ni para la sintaxis de dos puntos). Ver Error de cromo 129669. 18El text-transform la propiedad no funciona para ::first-line pseudoelementos (ni para la sintaxis de dos puntos). Ver Error de cromo 129669. 4 11 1El text-transform la propiedad no funciona para ::first-line pseudoelementos (tampoco para la antigua sintaxis de dos puntos). Ver Error de WebKit 3409. 1.0El text-transform la propiedad no funciona para ::first-line pseudoelementos (ni para la sintaxis de dos puntos). Ver Error de cromo 129669.
capitalize 1 12 1Antes de Firefox 14, algunos caracteres de puntuación podían interferir con el uso correcto de mayúsculas. Ver error 731536. 4 7 1 1 18 4Antes de Firefox 14, algunos caracteres de puntuación podían interferir con el uso correcto de mayúsculas. Ver insecto 731536. 11 1 1.0
dutch_ij_digraph No No 14 No No No No No 14 No No No
full-size-kana No No 64 No No No No No 64 No No No
full-width No No 19 No No No No No 19 No No No
greek_accented_characters 34 79 15 No 21 No 4.4 34 15 21 No 2.0
lowercase_sigma 30 12 14 4 17 6 4.4 30 14 18 6 2.0
turkic_is 31 12 14 4 18 8 ≤37 31 14 18 8 2.0
uppercase_eszett 1 18 1 No 7 1 1 18 4 11 1 1.0

Ver también

  • font-variant