Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP CSS text-transform support

CSS text-transform support

16 réponses
Avatar
Pierre Goiffon
Bonjour,

Je viens de faire quelques essais avec text-transform
(http://www.w3.org/TR/CSS21/text.html#propdef-text-transform)

Sur une page en mode quirks, "capitalize" n'est reconnu ni sur mon Fx3
(Windows) ni sur IE7, ce qui me surprend... "lowercase" est ok par contre...

Quid du support de ce capitalize ?
Merci de vos retours d'expérience !
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM
Pierre Goiffon a écrit :
Bonjour,

Je viens de faire quelques essais avec text-transform
(http://www.w3.org/TR/CSS21/text.html#propdef-text-transform)

Sur une page en mode quirks, "capitalize" n'est reconnu ni sur mon Fx3
(Windows) ni sur IE7, ce qui me surprend... "lowercase" est ok par
contre...



Comment fais-tu passer Firefox en mode quirks ?

avec :

<html>
<div style="text-transform:capitalize">
voici un petit texte à capitaliser
</div>
</html>

chez moi sur mon Mac, à l'exception du Ã, c'est OK pour :
- Fx.3
- Safari 3
- IE 6 Standalone
(http://www.tatanka.com.br/ies4linux/page/Fr/Page_D%27Accueil)
- IE 6 Windows XP (émulateur)
- et d'autres

Quid du support de ce capitalize ?



Quid de ta façon de le tester ?

Merci de vos retours d'expérience !



Pas de changement si doctype HTML4 strict

(ce 'à' passé en 'Ã' m'intrigue un peu ... visible aussi dans IE.6,
ce doit être Mac OS X qui se goure ?)

--
sm
Avatar
Pierre Goiffon
SAM wrote:
Je viens de faire quelques essais avec text-transform
(http://www.w3.org/TR/CSS21/text.html#propdef-text-transform)

Sur une page en mode quirks, "capitalize" n'est reconnu ni sur mon Fx3
(Windows) ni sur IE7, ce qui me surprend... "lowercase" est ok par
contre...



Comment fais-tu passer Firefox en mode quirks ?



Sans doctype...

<html>
<div style="text-transform:capitalize">
voici un petit texte à capitaliser
</div>
</html>

chez moi sur mon Mac, à l'exception du Ã, c'est OK pour :
- Fx.3
- Safari 3
- IE 6 Standalone
(http://www.tatanka.com.br/ies4linux/page/Fr/Page_D%27Accueil)
- IE 6 Windows XP (émulateur)
- et d'autres



Bizarre en effet la transformation de ce "à" !

Quid de ta façon de le tester ?



Oui mes excuses, j'ai posté beaucoup trop vite !

En fait j'avais un texte tout en majuscules à transformer, c'est surtout
ça qui pose prb.
Voir un test (avec doctype HTML 4.01 strict et donc mode de rendu
standards normalement) :
http://pgoiffon.free.fr/_temp/text-transform.html

Merci milles fois Stéphane de ton retour !
Avatar
SAM
Pierre Goiffon a écrit :
SAM wrote:
Je viens de faire quelques essais avec text-transform
(http://www.w3.org/TR/CSS21/text.html#propdef-text-transform)





Quid de ta façon de le tester ?



Oui mes excuses, j'ai posté beaucoup trop vite !

En fait j'avais un texte tout en majuscules à transformer, c'est surtout
ça qui pose prb.
Voir un test (avec doctype HTML 4.01 strict et donc mode de rendu
standards normalement) :
http://pgoiffon.free.fr/_temp/text-transform.html



et même avec font-variant je n'arrive à rien si le texte a été tapé
n'importe comment :
<http://cjoint.com/?jioqpzCDF8>

C'est un peu nul la dernière ligne de :
<http://www.yoyodesign.org/doc/w3c/css2/fonts.html#propdef-font-variant>

--
sm
Avatar
Olivier Miakinen
Le 08/09/2008 14:17, SAM a écrit :

Voir un test (avec doctype HTML 4.01 strict et donc mode de rendu
standards normalement) :
http://pgoiffon.free.fr/_temp/text-transform.html



et même avec font-variant je n'arrive à rien si le texte a été tapé
n'importe comment :
<http://cjoint.com/?jioqpzCDF8>



Excellent ! Merci pour ces tests (surtout les derniers).

C'est un peu nul la dernière ligne de :
<http://www.yoyodesign.org/doc/w3c/css2/fonts.html#propdef-font-variant>



Celle qui dit qu'en ce qui concerne la transformation en majuscules ce
qui est dit à propos de text-transform s'applique, à savoir qu'on n'a
pas besoin de transformer des lettres qui n'ont pas de distinction de
casse ? En quoi est-ce nul ? Ou bien qu'est-ce que je n'ai pas compris ?
Avatar
SAM
Olivier Miakinen a écrit :
Le 08/09/2008 14:17, SAM a écrit :

C'est un peu nul la dernière ligne de :
<http://www.yoyodesign.org/doc/w3c/css2/fonts.html#propdef-font-variant>



Celle qui dit qu'en ce qui concerne la transformation en majuscules ce
qui est dit à propos de text-transform s'applique, à savoir qu'on n'a
pas besoin de transformer des lettres qui n'ont pas de distinction de
casse ? En quoi est-ce nul ? Ou bien qu'est-ce que je n'ai pas compris ?



Normalement celui des 2 qui y comprend c'est toi ...

(cite de font-variant: small-caps)
Comme cette propriété provoque la transformation du texte en majuscule,
les *mêmes considérations que pour la propriété 'text-transform'*
s'appliquent.
(/cite)

J'espérais que "text-transform" et "font-variant" ne soient pas traités
pareils, au même niveau (comme ils semblent l'entendre à cette fameuse
ligne), et que ce ne soit pas le dernier des 2 qui l'emporte avec
traitement du brut initial.

Cette fois,
et sauf à ce que ma CSS soit nulle, ou que moi-même m'égare :
<http://cjoint.com/?jipEg8lkyl>
où le dernier test tente à succéder les modifications par tripple
imbrication d'éléments stylés alternativement text-trasform et
font-variante ( -> minuscules -> capitales -> capitalisation).
Finalement ça passe tout en :
- majuscules
- dont grandes pour :
- 1ères lettres (comme attendu)
- lettres déjà en majuscule à l'origine
(ça a oublié le lowercase du début)

Pas de modif si en strict <http://cjoint.com/?jip2sn0Oc3>

Yapa de RegExpr en CSS ?

--
sm
Avatar
Pierre Goiffon
SAM wrote:
Je viens de faire quelques essais avec text-transform
(http://www.w3.org/TR/CSS21/text.html#propdef-text-transform)





http://pgoiffon.free.fr/_temp/text-transform.html



<http://cjoint.com/?jioqpzCDF8>



Waoo, merci de ces tests !

J'ai été surpris par l'application d'un text-transform différent via 2
classes :

div div.minus,
.minus dd { text-transform: lowercase }
div div.capital,
div p.capital,
.capital dd { text-transform: capitalize }

class = minus capital

Me disant que l'un allait écraser l'autre... Si je reprend la
recommandation ce n'est pas très clair :
http://www.w3.org/TR/CSS21/cascade.html#cascading-order
On arrive au point 4, c'est donc le "order specified" qui va permettre
de décider laquelle des 2 classes conserver. Oui mais... L'ordre dans la
CSS ou dans l'attribut class ?

Rien trouvé à ce sujet dans la recommandation HTML
(http://www.w3.org/TR/html4/struct/global.html#adef-class)
Avatar
Olivier Miakinen
Le 08/09/2008 15:59, SAM a écrit :

C'est un peu nul la dernière ligne de :
<http://www.yoyodesign.org/doc/w3c/css2/fonts.html#propdef-font-variant>



Celle qui dit qu'en ce qui concerne la transformation en majuscules ce
qui est dit à propos de text-transform s'applique, à savoir qu'on n'a
pas besoin de transformer des lettres qui n'ont pas de distinction de
casse ? En quoi est-ce nul ? Ou bien qu'est-ce que je n'ai pas compris ?



Normalement celui des 2 qui y comprend c'est toi ...



Je vais partir de cette hypothèse (que c'est moi qui comprends)... :-D

(cite de font-variant: small-caps)
Comme cette propriété provoque la transformation du texte en majuscule,
les *mêmes considérations que pour la propriété 'text-transform'*
s'appliquent.
(/cite)



Il y a un abus de langage dans le début de cette phrase, qui n'est pas
une erreur de traduction car il existe aussi dans la version originale
en anglais.

En réalité, la propriété small-caps ne transforme pas le texte en
majuscules mais elle affiche les minuscules d'une façon qui les fait
ressembler aux majuscules (quoique en plus petit).

J'espérais que "text-transform" et "font-variant" ne soient pas traités
pareils, au même niveau (comme ils semblent l'entendre à cette fameuse
ligne), et que ce ne soit pas le dernier des 2 qui l'emporte avec
traitement du brut initial.



Sauf erreur de ma part, ils ne sont *pas* traités pareil, et la fameuse
ligne ne laisse *pas* entendre qu'ils le soient.

1) « ils ne sont pas traités pareil »

text-transform indique si des caractères doivent être changés en
d'autres.
lowercase : toutes les majuscules deviennent minuscules
uppercase : toutes les minuscules deviennent majuscules
capitalize : les minuscules de début de mot deviennent majuscules

font-variant indique comment afficher les différents caractères.
normal : affichage habituel
small-caps : les minuscules s'affichent différemment lorsque
c'est possible

Noter que l'affichage « small-caps » concerne toutes les minuscules,
même celles qui résultent d'un « text-transform: lowercase ».

2) « la fameuse ligne ne laisse pas entendre qu'ils le soient »

Pour moi, elle laisse juste entendre que les caractères hébreux,
arabes, japonais, chinois, etc., ne sont pas plus concernés par
font-variant que par text-transform. Rien de plus.

Cette fois,
et sauf à ce que ma CSS soit nulle, ou que moi-même m'égare :
<http://cjoint.com/?jipEg8lkyl>
où le dernier test tente à succéder les modifications par tripple
imbrication d'éléments stylés alternativement text-trasform et
font-variante ( -> minuscules -> capitales -> capitalisation).



Attention, il faut se rappeler qu'il n'y a pas de transformation
successive quand tu as deux règles CSS sur la même propriété : les
règles de cascade s'appliquent, et il reste donc une seule valeur
possible pour la propriété en question.

Finalement ça passe tout en :
- majuscules
- dont grandes pour :
- 1ères lettres (comme attendu)
- lettres déjà en majuscule à l'origine
(ça a oublié le lowercase du début)



Eh oui. Comme toujours en CSS,
{
text-transform: lowercase;
text-transform: capitalize;
}
est équivalent à
{
text-transform: capitalize;
}

Bien entendu, le font-variant n'est pas affecté par les différentes
valeurs de text-transform.

Yapa de RegExpr en CSS ?



:-D
Avatar
Olivier Miakinen
Le 08/09/2008 16:24, Pierre Goiffon a écrit :

<http://cjoint.com/?jioqpzCDF8>



Waoo, merci de ces tests !

J'ai été surpris par l'application d'un text-transform différent via 2
classes :

div div.minus,
.minus dd { text-transform: lowercase }
div div.capital,
div p.capital,
.capital dd { text-transform: capitalize }

class = minus capital

Me disant que l'un allait écraser l'autre...



C'est bien ce qui se passe : les deux règles ayant la même spécificité,
c'est la dernière définie qui l'emporte (donc le capitalize l'emporte
sur le lowercase).

Si je reprend la
recommandation ce n'est pas très clair :
http://www.w3.org/TR/CSS21/cascade.html#cascading-order
On arrive au point 4, c'est donc le "order specified" qui va permettre
de décider laquelle des 2 classes conserver. Oui mais... L'ordre dans la
CSS ou dans l'attribut class ?



L'ordre dans la CSS. Pour moi c'est très clair.

Rien trouvé à ce sujet dans la recommandation HTML
(http://www.w3.org/TR/html4/struct/global.html#adef-class)



Normal, puisque c'est dans
http://www.w3.org/TR/CSS21/cascade.html#cascading-order
Avatar
SAM
Pierre Goiffon a écrit :
SAM wrote:

la recommandation ce n'est pas très clair :
http://www.w3.org/TR/CSS21/cascade.html#cascading-order
On arrive au point 4, c'est donc le "order specified" qui va permettre
de décider laquelle des 2 classes conserver. Oui mais... L'ordre dans la
CSS ou dans l'attribut class ?



indépendamment de ces cas spécifiques précédents,
normalement c'est l'ordre dans la css qui joue dans le cas de class
multiples appliquées à un élément

class="premier deuxieme"
devrait être pareil que :
class="deuxieme premier"
c'est 'deuxieme' qui l'emporte
(déclaré après 'premier' dans la css et pour une même règle)

et, en dehors des ngs, j'ai dû lire ça qque part ...
Mézou ?


Rien trouvé à ce sujet dans la recommandation HTML
(http://www.w3.org/TR/html4/struct/global.html#adef-class)



Houlala !

On trouve des fois qque chose là d'dans ? ;-)

Rien n'vaut les tests :

<html>
<style type="text/css">
.rge { color: red }
.bleu { color: blue }
.red { color: red }
.gras { font-weight: bold }
tt { color: green; font-size: 110%; font-weight: normal }
</style>
<pre>
.rge { color: red }
.bleu { color: blue }
.red { color: red }
.gras { font-weight: bold }
</pre>
<p class="bleu red"><tt>bleu red</tt> rouge
<p class="red bleu gras"><tt>red bleu gras</tt> rouge gras
<p class="rge bleu gras"><tt>rge bleu gras</tt> bleu gras
<p class="bleu rge gras"><tt>bleu rge gras</tt> bleu gras
</html>

--
sm
Avatar
Olivier Miakinen
Le 08/09/2008 17:18, SAM a écrit :

Rien n'vaut les tests :

<html>
<style type="text/css">
.rge { color: red }
.bleu { color: blue }
.red { color: red }
.gras { font-weight: bold }
tt { color: green; font-size: 110%; font-weight: normal }
</style>
<pre>
.rge { color: red }
.bleu { color: blue }
.red { color: red }
.gras { font-weight: bold }
</pre>
<p class="bleu red"><tt>bleu red</tt> rouge
<p class="red bleu gras"><tt>red bleu gras</tt> rouge gras
<p class="rge bleu gras"><tt>rge bleu gras</tt> bleu gras
<p class="bleu rge gras"><tt>bleu rge gras</tt> bleu gras
</html>



Tu peux donc facilement vérifier que toutes les définitions suivantes
sont équivalentes :
<p class="minus capital">MAJUSCULES minuscules</p>
<p class="capital minus">MAJUSCULES minuscules</p>
<p class="majus capital">MAJUSCULES minuscules</p>
<p class="capital majus">MAJUSCULES minuscules</p>
<p class="minus majus capital">MAJUSCULES minuscules</p>
<p class="majus minus capital">MAJUSCULES minuscules</p>
<p class="capital minus majus ">MAJUSCULES minuscules</p>
<p class="capital majus minus">MAJUSCULES minuscules</p>
<p class="minus capital majus ">MAJUSCULES minuscules</p>
<p class="majus capital minus">MAJUSCULES minuscules</p>
<p class="capital">MAJUSCULES minuscules</p>
avec les styles :
.minus { text-transform: lowercase }
.majus { text-transform: uppercase }
.capital { text-transform: capitalize }

Résultat attendu : MAJUSCULES Minuscules
1 2