modifier espaces entre mots et lettres

obtenir ces boutons

Modifier les espaces entre les mots et les lettres

Remarques :
- tous les chiffres (nombre de pixels) cités ci-dessous dans les exemples doivent être adaptés aux besoins de chacun ;
- les codes qui peuvent s'appliquer à tout le blog peuvent aussi n'être ajoutés que pour un ou plusieurs éléments du blog, par exemple les messages.

Modifier les espaces entre les mots dans un message ou un gadget :

<font style="word-spacing:10px;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</font>
<font style="word-spacing:15px;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</font>


donne :

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE

Modifier les espaces entre tous les mots du blog :


dans le code du template,
juste après :
body {
ajouter:
word-spacing:15px;

Modifier les espaces entre les lettres dans un message ou un gadget :

<font style="letter-spacing:1px;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</font>
<font style="letter-spacing:3px;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</font>


donne :

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE

Modifier les espaces entre toutes les lettres dans un blog :

dans le code du template,
juste après :
body {
ajouter:
letter-spacing:1px;

Ajouter plusieurs espaces ou un espace fixe entre deux mots :

Il n'est normalement pas possible d'ajouter plusieurs espaces successifs entre deux mots, dans un message ou un texte figurant dans un gadget. Si on encode plusieurs espaces, le résultat à l'écran sera toujours transformé en un seul espace.

L'astuce suivante permet de contourner cet obstacle. Il suffit, en mode "Modifier le code HTML" du message, de remplacer un espace par le code suivant qui ajoutera 40 pixels (par exemple) entre deux mots :
<span style="padding-left:40px;"></span>
* * * * *
La même technique permet d'insérer un espace standard (par exemple après un tiret), au lieu d'un espace variable identique aux autres espaces de la même ligne. Il suffit, à la place d'un espace, d'insérer le code suivant dans la version HTML du message :
<span style="padding-right:5px;"></span>
* * * * *
Une autre technique consiste à ajouter, dans la version HTML du message, une suite de &nbsp; (blanc insécable).

Aucun commentaire: