Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Propriétés CSS de formatage et de mise en page du texte

Propriétés CSS de formatage et de mise en page du texte

Ce chapitre constitue une suite de tutos qui portent sur le formatage de texte. Dans le présent document on va apprendre à manipuler les propriétés CSS : word-spacing, letter-spacing, white-space, text-indent et direction.

css-1 word-spacing (espacements entre les mots)

Grâce à la propriété CSS word-spacing, vous pouvez spécifier la longueur d'espacement entre les mots. Un mot est une chaîne de caractères (lettres, chiffres, ponctuation, symboles etc.) délimitée par au moins un espace des deux côtés. Les valeurs possibles sont :

La propriété CSS word-spacing peut être interprétée incorrectement, si une contrainte apparaît comme la spécification de la propriété text-align ou l'attribut obsolète align avec la valeur justify (voir le chapitre la propriété CSS text-align).

Pour que les mots d'un paragraphe aient un espacement de 7 pixels on va mettre :

p {
word-spacing : 4px; 
}

Vous devez ajouter 4 pixels à l'espacement normal qui correspond à 3 pixels. Ceci dit que le word-spacing sollicité par la règle CSS équivaut à la valeur 4 pixels spécifiée par la propriété CSS word-spacing, majorée par 3 pixels correspondant à la longueur par défaut de l'espacement entre mots. La valeur qui sera appliquée en définitive équivaut à 7 pixels.

Pour annuler les espacements entre mots, inutile de taper word-spacing: 0px; mais plutôt word-spacing: -3px; comme ça on aura la somme de 3 et de -3, et puisque les enseignants des maths nous ont appris que la somme de deux nombres de signes différents donne un zéro c'est cette valeur que vont prendre vos espaces entre les mots.

css-1 letter-spacing (espacements entre les caractères des mots)

La propriété CSS letter-spacing permet de préciser l'espacement entre les caractères (lettres, chiffres, ponctuation, symboles etc.) d'un mot et non uniquement des lettres contrairement à ce que ça révèle le nom de la propriété (letter-spacing). Là aussi les valeurs spécifiées s'ajoutent aux valeurs par défaut. Si vous voulez réduire la longueur de l'interlettrage tapez par exemple :

p {
letter-spacing: -0.5px; /* attention aux valeurs importantes
qui risquent de déformer l'écriture */
}

Au même titre que la propriété CSS word-spacing, la propriété de style letter-spacing peut aussi être influencée par la justification réalisée par l'attribut déprécié align ou la propriété CSS text-align.

css-1 white-space (Césure)

La propriété CSS white-space est très utile avec les paragraphes et tout les éléments XHTML qui englobent du texte (titres, citations etc.). Elle permet de personnaliser l'espace blanc (white-space) tapé dans le code source du document XHTML c'est-à-dire les espaces supplémentaires et retours-chariot. La propriété CSS white-space peut supporter jusqu'à 3 notations :

Dans le cas où le contenu d'un élément dépasse les confins de son conteneur. Vous devez spécifier une propriété CSS overflow pour se décider du sort de la partie excédentaire (l'a faire afficher ou masquer).

L'élément XHTML pre et la propriété CSS white-space avec constante pre ont des points communs en termes de traitement de l'espace blanc et retours-chariot spécifiés dans le code source. Néanmoins, le contenu de la balise pre est affiché avec une police non-proportionnelle (monospace). Tandis qu'un élément qui a reçu la propriété CSS white-space avec la valeur pre, garde sa police par défaut.

Exemple

<p style="white-space: normal;">La propriété CSS white-space
est très utile avec les paragraphes et tous les éléments XHTML
qui englobent du texte (titres, citation etc.).<br />Elle  permet
de personnaliser l'espace blanc (white-space) tapé dans 
le code source du document XHTML c'est-à-dire 
les espaces supplémentaires et retours-chariot</p>

<p style="white-space: pre;">La propriété CSS white-space est très utile avec les paragraphes et tous les éléments XHTML qui englobent du texte (titres, citation etc.). Elle permet de personnaliser l'espace blanc (white-space) tapé dans le code source du document XHTML c'est-à-dire les espaces supplémentaires et retours-chariot</p>

<p style="white-space: nowrap;">La propriété CSS white-space est très utile avec les paragraphes et tous les éléments XHTML qui englobent du texte (titres, citation etc.).<br />Elle permet de personnaliser l'espace blanc (white-space) tapé dans le code source du document XHTML c'est-à-dire les espaces supplémentaires et retours-chariot</p>

Aperçu

La propriété CSS white-space est très utile avec les paragraphes et tous les éléments XHTML qui englobent du texte (titres, citation etc.).
Elle permet de personnaliser l'espace blanc (white-space) tapé dans le code source du document XHTML c'est-à-dire les espaces supplémentaires et retours-chariot

La propriété CSS white-space est très utile avec les paragraphes et tous les éléments XHTML qui englobent du texte (titres, citation etc.). Elle permet de personnaliser l'espace blanc (white-space) tapé dans le code source du document XHTML c'est-à-dire les espaces supplémentaires et retours-chariot

La propriété CSS white-space est très utile avec les paragraphes et tous les éléments XHTML qui englobent du texte (titres, citation etc.).
Elle permet de personnaliser l'espace blanc (white-space) tapé dans le code source du document XHTML c'est-à-dire les espaces supplémentaires et retours-chariot

css-1 text-indent (Retrait du texte)

La propriété CSS text-indent (indentation ou alinéa) permet de préciser l'alinéa de la première ligne d'un bloc de texte (généralement l'élément p). L'indentation ciblée par la propriété CSS text-indent est très fréquente dans les livres et les revues.

text-indent

Exemple : définir le retrait de la première ligne d'un paragraphe à 10 pixels :

p {
text-indent: 10px; /* la première ligne de chaque paragraphe 
sera poussée de 10 pixels vers la droite */
}

Si vous préciser une valeur négative par exemple : -8px, vous allez obtenir un résultat contraire à savoir un retrait extérieur : c'est-à-dire un retrait vers la gauche.

Dans ce cas vous devez vous assurer que le texte ne dépasse pas le bord gauche de son conteneur. Sinon, pas la peine d'être un génie pour savoir ce qui va se produire

Ah ! J'ai failli oublier les valeurs possibles : cm, em, in, mm, pc, px et pt. Un pourcentage peut aussi être spécifié. Dans ce cas il sera calculé en fonction de la largeur du conteneur immédiat (le premier parent).

css-1 Direction (sens de lecture)

La propriété CSS direction est d'un usage assez particulier. Elle permet d'imposer un sens de lecture pour le texte, elle peut recevoir deux valeurs :

En plus du sens d'écriture, la propriété de style direction permet de spécifier d'où seront coupés les blocs à contenu trop important. Si vous écrivez en arabe ("direction: rtl;") et que le texte dépasse la largeur maximale que vous avez spécifiée. Le texte sera masqué dans la partie gauche et si vous écrivez en français ou en anglais ("direction: ltr;"), ça serait le contraire.

En plus la propriété de style direction permet aussi de spécifier de quel sens les mentions de largeur seront calculées : en Arabe de droite à gauche et en français, espagnole et anglais de gauche à droite.

Ne confondez pas l'usage de la propriété CSS direction avec la propriété CSS text-align. En plus sachez qu'en fonction de la valeur de la propriété CSS direction, la valeur par défaut de text-align change, ainsi :

Je vous ai préparé un exemple très intéressant, qui m'a demandé beaucoup de temps même s'il est trop court.

Le code XHTML et CSS

<p style="direction: rtl;">
السلام عليكم أتمنى أن يكون هذا الموقع قد نال إعجابكم </p>

Sortie visuelle

السلام عليكم أتمنى أن يكون هذا الموقع قد نال إعجابكم

Reste à savoir ce qui est écrit en Arabe, ça je vais pas vous le dire, je vais vous laisser creuser dans les dictionnaires Arabes css

Chapitre suivant : propriétés CSS de formatage et de mise en forme du texte.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau