capitalize - not - Minúsculas todas y luego mayúsculas-CSS puro

text-transform capitalize not working

Question

Esta pregunta ya tiene una respuesta aquí:

• Primero en minúscula el texto y luego en mayúscula. ¿Es posible con CSS? 2 respuestas

He visto este tema aquí: primero en minúscula el texto y luego en mayúscula. ¿Es posible con CSS?

Pero no era puro CSS. Tengo un div que contiene este texto:

<div>
RaWr rAwR
</div>

Quiero usar css para que se vea como "Rawr Rawr". Cortar si solo para la conversión de texto en mayúscula se convierte en "RaWr RAwR", las letras ya mayúsculas permanecen en mayúsculas. Por lo tanto, primero necesito escribir minúsculas y luego capitalizar, ¿es la solución envolverlo en un div?

Intenté envolverlo en otro div pero no funcionó:

<style>
    #test3 { text-transform: lowercase; }
    #test3 div { text-transform: capitalize; }
</style>

<div id="test3"><div>RaWr rAwR</div></div>

Answer 1

Desafortunadamente, hasta CSS-3 no hay forma de hacer esto de forma totalmente CSS, ya que en this documento solo hay 5 valores posibles para text-transform y ninguno de ellos resolverá este requisito.

Pero en el futuro podría haber una regla personalizada para la transformación de texto similar a Counter Sytle

Answer 2

Estás usando div anidado,

Entonces #test3 { text-transform: lowercase; } #test3 { text-transform: lowercase; } se aplica a la división de padres, por lo que se aplica a las divisiones de padres e hijos

cuando reemplaza el #test3 div { text-transform: capitalize; } #test3 div { text-transform: capitalize; } a la División infantil la primera text-transform: lowercase; estilo text-transform: lowercase; es ignorado

Answer 3

Esto debería hacerlo cuando tienes las palabras individuales en diferentes div

#test3 { text-transform: lowercase; }

#test3:first-letter { text-transform: uppercase; }


<div id="test3">haLLo</div>

Answer 4

Lamentablemente, no puedes hacer esto con CSS puro. Por ahora, su mejor esperanza es reescribir el texto para evitar mayúsculas medias o finales o usar JavaScript. (Sí, mis ojos también están rodando).

El enfoque sugerido no funciona porque solo un valor de propiedad de text-transform aplica a un elemento a la vez. Cuando se especifica algo como ...

#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }

... el valor de text-transform en el elemento hijo ahora está en capitalize , y nada más. Esta es la única transformación aplicada a ese elemento.

Hay un borrador de propuesta para permitir a los autores definir tablas de mapeo personalizadas con una regla de @text-transform , pero tal como está, dudo que funcione para este escenario. El problema es que el descriptor de scope (donde en una palabra se aplica la transformación) solo toma un valor; puede definir una transformación en toda la palabra o una combinación de las partes inicial, final o central de una palabra, pero no es obvio si Podrías tener diferentes transformaciones para cada parte.

Esto parece ser reconocido en el número 8 de la propuesta de borrador de wiki, y se analizaron varias transformaciones hace un par de años en www-style . En ese hilo, se sugiere que solo se permita un único valor de text-transform en un elemento, y que la combinación se debe hacer en la regla @text-transform ; sin embargo, el borrador de notas de especificaciones:

Si las transformaciones de texto a las que se hace referencia tienen un alcance diferente al alcance especificado en la transformación de texto que se refiere a ellas, se aplican en la intersección de los dos ámbitos.

Así que una regla como esta no funcionaría:

@text-transform lowercase-then-capitalize {
    transformation: lowercase, "a-z" to "A-Z" single;
    scope: initial;
}

Puedo ver tres soluciones obvias:

1. permitir que se especifiquen múltiples valores de scope en la regla @text-transform ;
2. agregue un descriptor para heredar una transformación anterior sin anular su valor de alcance; o
3. permite múltiples valores de text-transform para un selector.

La lista de correo estilo www puede ser un buen lugar para tomar esto si alguna vez desea ver una solución de CSS pura para esta pregunta.