text-transform

Resumen

La propiedad CSS text-transform especifica el cambio entre mayúsculas y minúsculas del texto de un elemento. Puede ser usada para que un texto aparezca completamente en mayúsculas, en minúsculas, o con la primera letra de cada palabra en mayúscula.

La propiedad text-transform toma en cuenta las reglas específicas del idioma, como:

  • en lenguas turcas, como turco (tr), azerí (az), tártaro de Crimea (crh), tártaro de Volga (tt), y baskir (ba), hay dos tipos de i, con y sin punto, y dos pares de mayúscula/minúscula: i/İ e ı/I.

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

  • En holandés (nl), el dígrafo ij se vuelve IJ, aún con text-transform: capitalize, que solamente convierte la primera letra de una palabra en mayúsculas.

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

  • En griego (el), el caracter sigma en minúscula tiene dos formas: σ y ς. ς es usada solamente cuando la sigma termina la palabra. Cuando se aplica text-transform: lowercase a una sigma mayúscula (Σ), el navegador necesita elegir la minúscula correcta de acuerdo con el contexto.

Por otro lado, algunas reglas de mapeo específicas no son tomada en cuenta por ningun navegador, como:

  • en gaélico (ga), una letra prefijo se mantiene en minúsculas cuando la inicial base es convertida a mayúscula, así, en este ejemplo, el símbolo h- no debería cambiar a mayúscula: text-transform: uppercase cambiará Meud na h-aplacaid a MEUD NA H-APLACAID, lo cual viola las reglas ortográficas, cuando debería ser MEUD NA h-APLACAID.

El idioma es definido por el atributo HTML lang o el atributo xml:lang.

El soporte para estos casos específicos varía de un navegador a otro, véase la tabla de compatibilidad de navegadores.

Valor inicialnone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableyes
Mediavisual
Valor calculadocomo se especifica
Animatableno
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintáxis

/* Valores clave */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/* Valores globales */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

Valores

capitalize

Es una palabra clave que forza a que la primera letra de cada palabra sea convertida a mayúscula. EL resto de caracteres no es modificado; eso significa que mantienen su tamaño original, como haya sido escrito en el texto del elemento. Una letra es cualquier caracter Unicode que sea parte de la categoría general de Letras o Números  : esto excluye cualquier signo de puntuación o símbolos al principio de la palabra.

Los autores no deben esperar que capitalize siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos).
uppercase
Es una palabra clave que forza a todos los caracteres a ser convertidos a mayúsculas.
lowercase
Es una palabra clave que forza a todos los caracteres a ser convertidos a minúsculas.
none
Es una palabra clave que previene que sea cambiado el tamaño de los cracteres.
full-width
Es una palabra clave que forza que la escritura de un caracter, principalmente ideogramas y del alfabeto latín, abarque el espacio dentro de un cuadro, permitiendo que queden alineados al alfabeto asiático del este (como el chino o japonés).

Sintaxis formal

none | capitalize | uppercase | lowercase | full-width

Ejemplos

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

Esto muestra ninguna transformación de texto.

capitalize (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>
span {
  text-transform: capitalize;
}
strong { float: right; }

Esto muestra un texto con la primera letra de cada palabra en mayúsculas.

capitalize (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>
span {
  text-transform: capitalize;
}
strong { float: right; }

Esto muestra cómo la puntuación inicial de una palabra es ignorada. La palabra clave busca la primera letra, que es el primer caracter Unicode que forma parte de la categoría general de Letras o Números.

capitalize (Símbolos)

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

Esto muestra cómo los símbolos iniciales son ignorados. La palabra clave busca la primera letra, que es primera caracter Unicode que forma parte de la categoría general de Letras o Números.

capitalize (Dígrafo ij holandés)

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

Esto muestra cómo el dígrafo holandés ij debe ser manejado como una sola letra.

uppercase (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>
span {
  text-transform: uppercase;
}
strong { float: right; }

Esto muestra la transformación de texto a mayúsculas.

uppercase (Vocales griegas)

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

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

lowercase (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>
span {
  text-transform: lowercase;
}
strong { float: right; }

Esto muestra la transformación de texto a minúsculas.

lowercase (Σ griega)

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

Esto muestra cómo el caracter griego sigma (Σ) es trsnformado a sigma minúscula regular (σ) o a la variante de final de palabra (ς), conforme al contexto.

full-width (General)

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

Algunos caracteres existen en dos formas, de anchura normal y de anchura completa, con diferentes puntos de código en Unicode. La versión de anchura completa es usada para facilitar la mezcla con caracteres ideográficos asiáticos.

Especificaciones

Especificación Estado Comentarios
CSS Text Level 4
The definition of 'text-transform' in that specification.
Working Draft De CSS Text Level 3
The definition of 'text-transform' in that specification.
, se añade la palabra clave full-size-kana y permite que la palabra clave full-width sea usada junto con otro valor.
CSS Text Level 3
The definition of 'text-transform' in that specification.
Working Draft De CSS Level 2 (Revision 1)
The definition of 'text-transform' in that specification.
, se extienden las letras a cualquier caracter unicode en la categoría general de Números o Letras. Modifica el comportamiento de capitalize para aplicarse a la primera letra de la palabra, ignorando símbolos iniciales. Añade la palabra clave full-width para facilitar la mezcla entre caracteres ideográficos y caracteres alfabéticos.
CSS Level 2 (Revision 1)
The definition of 'text-transform' in that specification.
Recommendation De CSS Level 1
The definition of 'text-transform' in that specification.
, extiende las letras a alfabetos no latinos bicamerales
CSS Level 1
The definition of 'text-transform' in that specification.
Recommendation Definición inicial

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
capitalize (versión de CSS3) ?[1] 14 (14)[1] ?[1] ?[1] ?[1]
full-size-kana No support No support No support No support No support
full-width No support 19 (19) No support No support No support
ßSS ? 1.0 (1.7 or earlier) ? ? ?
iİ e ıI No support 14 (14) ? ? No support
Dígrafo holandés IJ No support 14 (14) No support No support No support
Letras griegas acentuadas 30 15 (15) No support No support No support
Σσ o término de palabra ς 30 14 (14) No support No support 6.0
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 1.0 1.0 (1) 6.0 6.0 1.0
capitalize (versión de CSS3) ?[1] 14.0 (14)[1] ?[1] ?[1] ?[1]
full-size-kana No support No support No support No support No support
full-width No support 19.0 (19) No support No support No support
ßSS ? 1.0 (1) ? ? ?
iİ e ıI No support 14.0 (14) ? ? No support
Dígrafo holandés IJ No support 14.0 (14) No support No support No support
Letras griegas acentuadas No support No support No support No support No support
Σσ o término de palabra ς No support 14.0 (14) No support No support No support

[1] La palabra clave capitalize fue pobremente especificada en CSS 1 y CSS 2.1. Había diferencias entre navegadores en la forma en que se calculaba la primera letra (Firefox consideraba - y _ como letras, pero los otros navegadores no. Tango Webkit como Gecko consideraban incorrectamente símbolos basados en letra, por ejemplo ⓐ, como letras reales. Internet Explorer 9 fue el que se apegó más a la definición de CSS 2, pero con algunos casos extraños). Definiendo detalladamente el comportamiento correcto, el Nivel 3 de Textos CSS clarifica estas confusiones. La línea capitalize en la tabla de compatibilidad de navegadores contiene la versión de los distintos motores en la que comenzaron a soportar este comportamiento mejor definido.

Véase también

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,