Formation CSS3

Mise en forme du texte

Les polices de caractères

Les attributs des polices sont :
- font-family : Arial, Times, Verdana, serif, ... Il est possible de positionner plusieurs polices.
- font-style : normal, italic, oblique,
- font-weight : lighter, normal, bold, bolder ou encore valeur numérique de dimension,
- font-size : small, medium, large, x-large ou encore valeur numérique de dimension,
- font-variant : small-caps, normal,
- font : permet d'agréger l'ensemble des attributs en une seule déclaration. par exemple :
```
p {font: Verdana, Arial, bold italic 8px;}
```

Les paramètres de base du texte

Ils concernent :
- l'espace entre lignes line-height Valeurs : normal ou une dimension,
- l'espace entre mots word-spacing Valeurs : une dimension,
- l'espace entre lettres letter-spacing Valeurs : une dimension,
- la casse text-transform Valeurs : capitalize, uppercase, lowercase, none
- mettre en souligné, barré, ... text-decoration Valeurs : none, underline, overline, line-through
- les modes d'alignement text-align Valeurs : left, right, center, justify

Les enchaînements de lignes

Le comportement naturel de HTML est de traiter tous les espaces et fin de lignes comme un seul espace.
Comme en témoigne la balise pre ce comportement est modifiable par les propriétés :
- wrap-option qui contrôle la césure automatique,
- linefeed-treatment qui contrôle les caractères de fin de ligne,
- white-space-treatment qui contrôle les caractères d'espacement,
- all-space-treatment qui contrôle les caractères d'espacement successifs,
- white-space n'existe plus vraiment en CSS3.

L'attribut white-space est conservé pour la compatibilité CSS2, mais il est simulé par des actions sur l'ensemble des propriétés wrap-option, linefeed-treatment, white-space-treatment, all-space-treatment conformément au tableau suivant.

white-space	wrap-option	linefeed-treatment	white-space-treatment	all-space-treatment
normal	wrap	auto	ignore-if-surrounding-linefeed	collapse
pre	hard-wrap	preserve	preserve	preserve
nowrap	hard-wrap	auto	ignore-if-surrounding-linefeed	collapse
pre-wrap	wrap	preserve	preserve	preserve
pre-lines	wrap	preserve	ignore-if-surrounding-linefeed	collapse

Les enchaînements de lignes

L'attribut wrap-option contrôle la césure automatique :
- wrap est le comportement par défaut, les espaces sont transformés en saut de lignes si nécessaire,
- hard-wrap seul les caractères de fin de ligne provoqueront des sauts de lignes,
- soft-wrap les retours à la ligne sont réalisés à la largeur allouée au texte,
- emergency semblable à wrap mais tolérant des chevauchements en cas de mots trop longs.

Les enchaînements de lignes

L'attribut linefeed-treatment contrôle le comportement des fins de lignes :
- auto est le comportement par défaut, les fins de lignes sont vus comme des espaces,
- ignore les fins de lignes sont ignorés,
- preserve les fins de lignes sont préservés,
- treat-as-space les fins de lignes sont vus comme des espaces.
- treat-as-zero-width-space les fins de lignes sont vus comme des espaces de largeur nulle.
- ignore-if-after-linefeed fusionne les sauts de lignes consécutifs.

Les enchaînements de lignes

L'attribut white-space-treatment contrôle le comportement des espaces :
- ignore les espaces sont ignorés,
- preserve les espaces sont préservés,
- ignore-if-before-linefeed les espaces précédent un saut de ligne seront supprimés.
- ignore-if-after-linefeed les espaces suivant un saut de ligne seront supprimés.
- ignore-if-surrounding-linefeed les espaces au voisinage d'un saut de ligne seront supprimés.
L'attribut all-space-treatment contrôle la fusion des espaces :
- preserve les espaces successifs sont préservés,
- collapse les espaces successifs sont fusionnés,

Les débordements

En cas de débordement de texte d'une boîte plusieurs comportements peuvent être choisis.
C'est l'attribut text-overflow (css3) qui permet ce contrôle :
- clip tronque le texte en dehors de la zone de visibilité (valeur par défaut),
- ellipsis affiche ... en fin de zone visible pour indiquer que le texte est tronqué,
- ellipsis-word identique à ellipsis mais sur fin de mot seulement.
Cet attribut est souvent utilisé conjointement à overflow (CSS2) qui, appliqué à une boîte permet :
- de tronquer le contenu hors de la boîte hidden,
- de placer des ascenseurs scroll,
- de placer des ascenseurs si nécessaire auto,
- de montrer le contenu hors de la boîte visible.

L'attribut text-overflow n'aura d'utilité que pour les boîtes don l'attribut overflow est égal à hidden car dans les autres cas le texte sera toujours accessible.

ellipsis-word n'est pas encore opérationnel sur les navigateurs.

Les polices de caractères en CSS3

Une grosse amélioration est la possibilité d'utiliser des polices disponibles sur le serveur :

La directive à utiliser est @font-face.
Elle accepte en attributs :
- font-family prenant en valeur le nom choisi pour la police,
- src prenant en valeur le chemin menant à la police sur le serveur.
Les polices de caractères peuvent être de type true type (ttf) ou vectorielles (svg).

Exemple :

@font-face {
  font-family:'ma_police';
  src:local('ma_police'),
      url('ma_police.ttf') format('truetype');
}

Dans le cas ou le nom choisi existe déjà sur le système, le client exploitera cette police locale et ne sollicitera donc pas de chargement distant.

Actuellement firefox supporte ttf, chrome supporte ttf et svg.

Ombre portée sous texte en CSS3

Il est possible de faire une ombre sous un texte par l'attribut text-shadow.
Il accepte 4 paramètres qui sont :
- un décalage horizontale du texte exprimé avec une unité valide en CSS,
- un décalage vertical du texte exprimé avec une unité valide en CSS,
- une valeur exprimant le flou gaussien de l'ombre exprimé avec une unité valide en CSS,
- une couleur appliquée à l'ombre.
Exemple de texte ombré avec une ombré grise décalée de la largeur d'un X en bas à droite et avec un flou de 3 :
```
h1 {text-shadow:1em 1em 0.4ex #888}
```

Ombre portée sous texte en CSS3

Il est possible d'appliquer plusieurs ombres sous un même texte par l'attribut text-shadow.
Pour cela il suffit de déclarer plusieurs ombres dans la même directive text-shadow.

Exemple de simulation de détourage par application de 4 ombres :

h3 {text-shadow:0.05em 0.05em 0 #888,
                -0.05em 0.05em 0 #888,
                0.05em -0.05em 0 #888,
                -0.05em -0.05em 0 #888}

Résultat :
Bonjour à tous !

Malgré la possibilité d'appliquer plusieurs ombres à un texte il n'est pas possible de réaliser un détourage aussi propre que ce qui est permis par les ombres sur les boîtes (présence d'un paramètre supplémentaire de distance avant de commencer l'atténuation du flou gaussien). Il faudra attendre la version finale de la norme pour voir si celui-ci ne sera pas finalement également intégré au niveau du texte.

Détourage du texte en CSS3

Il est possible de définir un contour sur une texte par l'attribut text-stroke.
Il s'agit de 2 attributs séparés :
- text-stroke-color définit la couleur du contour,
- text-fill-color définit la couleur de remplissage,
- text-stroke-width définit la largeur du contour.

Exemple de texte en rouge détouré avec du bleu sur 1 pixel de large :

h1 {
  text-stroke-width:1px;
  text-stroke-color:#00F;
  text-fill-color:#F00;
}

Ceci n'est qu'une proposition opérationnelle sur webkit.

Actuellement les navigateurs travaillent avec leur attributs spécifiques. Ainsi pour faire fonctionner cet attribut sur chrome, il faudra utiliser -webkit-text-stroke-color, -webkit-text-stroke-width et -webkit-text-fill-color.

Si text-fill-color n'est pas indiqué, la couleur de remplissage sera celle indiquée par color.

Modèle multicolonnes CSS3

Il est possible de réaliser une mise en page sur plusieurs colonnes par les attributs :
- column-width qui indique la largeur d'une colonne,
- column-count qui indique le nombre de colonnes.
- column-gap qui définit l'espace entre colonnes.
- column-rule qui donne la mise en forme du séparateur :
  - en largeur column-rule-width,
  - en forme column-rule-style,
  - en couleur column-rule-color.

Actuellement les navigateurs travaillent avec leur attributs spécifiques. Ainsi pour faire fonctionner cet attribut sur chrome il faudra utiliser -webkit-column-width, -webkit-column-count, -webkit-column-gap, -webkit-column-rule, ....

Si column-count et column-width sont en conflit, il ne faut pas les utiliser simultanément.

Modèle multicolonnes CSS3

Autres attributs multicolonnes :
- column-fill permet de répartir la largeur des éléments,
- column-span permet de répartir un élément sur plusieurs colonnes.
- break-before, break-inside et break-after permettent de contrôler des sauts de colonnes avant, durant, et après un élément.
Exemple texte réparti sur 3 colonnes, les titre h1 occuperont tout l'espace :
```
div {
  column-count:3;
  column-gap:1em;
}
h1 {column-span:all}
```

Ici aussi il faudra utiliser le préfixe -webkit- pour chrome..

Documentation

Les spécifications du W3C : http://www.w3.org/TR/xsl11/
Les spécifications des multicolonnes par le W3C : http://www.w3.org/TR/css3-multicol

Formation CSS3

Mise en forme du texte

Les polices de caractères

Les paramètres de base du texte

Les enchaînements de lignes

Les enchaînements de lignes

Les enchaînements de lignes

Les enchaînements de lignes

Les débordements

Les polices de caractères en CSS3

Ombre portée sous texte en CSS3

Ombre portée sous texte en CSS3

Bonjour à tous !

Détourage du texte en CSS3

Modèle multicolonnes CSS3

Modèle multicolonnes CSS3

Documentation