Capitalize en css

Bonjour,
j'ai dans ma base des titres tous enregistrés en majuscule par défaut.
Je voudrai lors de l’affichage transformer les titres afin de n'avoir que la première lettre de chaque mot en majuscule. J’ai donc appliqué un capitalize sur mon titre mais il reste en majuscule.

<li style="text-transform: capitalize;"> <?PHP echo $resulttit['type']; ?></li>

une idée ?
Modifié par fabrice88 (27 Feb 2016 - 14:37)

Bonjour,

capitalize tranforme l'ensemble en majuscule.

Fais plutôt la transformation avec la fonction php ucfirst() :

<li style="text-transform: capitalize;"> <?php echo ucfirst($resulttit['type']); ?></li>

Amicalement,

parsimonhi a écrit :
capitalize tranforme l'ensemble en majuscule.

Il s'agit bien de "capitalize", tu confonds avec "uppercase".
Du coup je pense que soit le titre est affiché déjà en majuscule, soit il y a une autre propriété qui le modifie.

Bonjour,

fabrice88 a écrit :
J’ai donc appliqué un capitalize sur mon titre mais il reste en majuscule.

Je viens de tester, il n'y a pas moyen de faire ceci :

.maChaineDeTitre {
    text-transform: lowercase; // On réinitialise toute la chaine en minuscule
    text-transform: capitalize; // ... et on la passe ensuite les premières lettres de chaque mot en capitales
}

Il semble en effet que capitalize ne marche qu'avec les minuscules...

Il vous faudra donc dans un premier temps passer la totalité de la chaine du titre en lowercase :

.maChaineDeTitre {
    text-transform: lowercase;
}

... et ensuite passer par un script - php ou javascript - vous permettant de repérer les premières lettres d'un mot via une regex, leur appliquer un <span> lié à une classe pour les repérer, puis - enfin - styler ce span en lui donnant la valeur en capitale.

.monSpanRepere {
text-transform: uppercase;
}

Bon travail.

Bonjour,

Zelalsan a écrit :

Il s'agit bien de "capitalize", tu confonds avec "uppercase".
Du coup je pense que soit le titre est affiché déjà en majuscule, soit il y a une autre propriété qui le modifie.

Tu as raison, je vais au coin direct ! Merci d'avoir corrigé.

Amicalement,

Bonjour,

Olivier C a écrit :
Bonjour,

Je viens de tester, il n'y a pas moyen de faire ceci :

.maChaineDeTitre {
    text-transform: lowercase; // On réinitialise toute la chaine en minuscule
    text-transform: capitalize; // ... et on la passe ensuite les premières lettres de chaque mot en capitales
}

Il semble en effet que capitalize ne marche qu'avec les minuscules...

Il vous faudra donc dans un premier temps passer la totalité de la chaine du titre en lowercase :

.maChaineDeTitre {
    text-transform: lowercase;
}

... et ensuite passer par un script - php ou javascript - vous permettant de repérer les premières lettres d'un mot via une regex, leur appliquer un &lt;span&gt; lié à une classe pour les repérer, puis - enfin - styler ce span en lui donnant la valeur en capitale.

.monSpanRepere {
text-transform: uppercase;
}

Bon travail.

C'est quand même plus simple de le faire en php avec ucfirst() (combiné avec un strtolower()), au risque de me répéter partiellement.

Amicalement,
Modifié par parsimonhi (27 Feb 2016 - 15:19)

Bonjour,

parsimonhi a écrit :
Bonjour,C'est quand même plus simple de le faire en php avec ucfirst() (combiné avec un strtolower()), au risque de me répéter partiellement.

Amicalement,

Oui mais sur le principe, ce n'est pas le boulot de PHP de gérer l'aspect visuel
Le mieux serait bien-entendu de ne jamais écrire en majuscule directement dans le HTML ou dans une base de données.

Bonjour,

Arf, j'ai trouvé (et celle-là, vous pouvez l'encadrer) :

li {text-transform: lowercase;}
li::first-letter {text-transform:capitalize;}

Amicalement,
Modifié par parsimonhi (27 Feb 2016 - 15:33)

parsimonhi a écrit :
Bonjour,C'est quand même plus simple de le faire en php avec ucfirst() (combiné avec un strtolower()), au risque de me répéter partiellement.

Oups, effectivement je n'avais pas vu le post. Quand je l'ai écris vous aviez déjà répondu toi et Zelalsan... Ta solution est effectivement plus simple.

Par contre le pseudo-élément CSS ::first-letter sélectionne la première lettre de la première ligne d'un bloc uniquement, pas de chaque mot : MDN ::first-letter
Modifié par Olivier C (27 Feb 2016 - 17:16)

Bonjour,

Olivier C a écrit :
Par contre le pseudo-élément CSS ::first-letter sélectionne la première lettre de la première ligne d'un bloc uniquement, pas de chaque mot : MDN ::first-letter

Effectivement !

EDIT : alors voilà une solution en javascript. On suppose que les titres ont tous pour classe "titre" (si ce n'est pas le cas, il faudra adapter). On ajoute le code suivant en fin de page juste avant </body> :

(function()
{
	var list=document.getElementsByClassName("titre"),k,s,f;
	for (k=0;k<list.length;k++)
	{
		s=list[k].innerHTML.toLowerCase();
		f=function(x){return x.toUpperCase();};
		list[k].innerHTML=s.replace(/\b\w/g,f);
	}
})();

EDIT2 : une variante avec un mix css + javascript
Le css :

.titre {text-transform:capitalize;}

Le javascript :

(function()
{
	var list=document.getElementsByClassName("titre"),k;
	for (k=0;k<list.length;k++) list[k].innerHTML=list[k].innerHTML.toLowerCase();
})();

Note : quand il y a des cas limites comme des mots avec des apostrophes, les deux solutions ne donnent pas le même résultat.

EDIT3 : une variante css+php (j'ai bien lu ce que Raphael a posté, mais au cas où on voudrait privilégier la simplicité) :

<li style="text-transform: capitalize;"> <?php echo strtolower($resulttit['type']); ?></li>

Amicalement,
Modifié par parsimonhi (27 Feb 2016 - 20:08)