Transformation de texte en CSS

À Noël, j'ai reçu une carte-cadeau pour magasiner à la librairie Renaud-Bray. Merci à mes beaux-parents. Avant de me rendre en magasin, j'ai exploré les différentes sections du site pour avoir un avant-goût de ce que je pourrais me procurer. Et c'est en copiant les titres qui m'intéressaient que j'ai eu l'idée du sujet d'aujourd'hui.

En effectuant quelques opérations copier/coller, je me suis aperçu que, contrairement à ce que je voyais à l'écran, le nom des auteurs semblaient tous stockés en minuscules dans la base de données. J'ai pu le confirmer en jetant un aperçu au code source.

Or, chaque mot apparaît pourtant avec une première lettre capitale. Côté serveur, par exemple en PHP, cette transformation aurait pu être effectuée à l'aide d'une fonction comme ucwords() ou ucfirst(). Mais côté client, cette transformation de texte est rendue possible grâce au CSS.

Par exemple, avec le HTML suivant :

<span class="author">louis gauthier</span>
<span class="title">les aventures de sivis pacem et de para bellum</span>

Et les classes CSS ci-dessous :

<style type="text/css">
.author, .title{
    text-transform: capitalize;
}
</style>

Il suffit d'appliquer la propriété text-transform avec la valeur capitalize pour que le texte se change à l'écran pour passer de :

louis gauthier
les aventures de sivis pacem et de para bellum

À :

Louis Gauthier
Les Aventures De Sivis Pacem Et De Para Bellum

Côté pratique, notez qu'il existe aussi lowercase et uppercase. Reste que je privilégie quand même la méthode server-side à celle-ci mais ça peut être un bon réflexe de se rappeler de son existance lorsqu'on doit souvent mâcher les données (offre plus de flexibilité).