Chapitre 3

Au plaisir des yeux

Color, font, text, word

Vous me lisez, je vous écris. Vous m’observez, je vous intrigue. Vous m’applaudissez, je…
Le texte est là, et ici même. Stylé déjà.
Coloré, espacé, étiré, rapproché, chargé, changé.
Le style commence ici.

Color

Un air de déjà vu.

p{ color: aliceBlue;}

Un bleu pâle. Grâce à un nom. Illisible, certes. Un rouge orangé pour y remédier.

p{ color: tomato;}

Très bien. Mais mon coeur penche pour le bleu marine. Je me jette :

p{ color: bleuMarine;}

Argh. Inexistant. Comment faire ? Trouver le nom correct ? Parmi la centaine qui existe ? Laborieux et imprécis.

Il y a plus simple.

RGB

A l’écran, les couleurs se promènent par trio.
Du rouge, du vert, du bleu. Plus ou moins chacune. Une coalition pour mieux nous servir.
D’une échelle de 0 à 255 inclus, il faut choisir successivement la quantité de rouge, de vert puis de bleu.
Revenons à mon bleu marine. Du rouge, du vert, mais surtout du bleu.

p{ color: rgb(47, 58, 97);}

Comment le trouver ? Photoshop. Fireworks. Illustrator. Ou sur Color Picker par exemple. Choisissez une couleur et trouvez les valeurs R, G et B à droite.

Rajoutez un “a” (pour alpha) et jouez sur l’opacité.

p{ color: rgba(47, 58, 97, 0.7);}

Mon bleu marine à 70% d’opacité.

Hexadécimal

La syntaxe rgb est un peu longue, un peu lente. Pourquoi ne pas se restreindre à 7 caractères ?

p{ color: #2F3A61;}

2F pour le rouge
3A pour le vert
61 pour le bleu

Pour chaque duo de lettres, 256 valeurs possibles aussi. On compte de 0 à 9, puis de A à F.
Par exemple pour le rouge :

Après le rouge, pareil pour le vert. Pareil pour le bleu.
Un code hexa(6)décimal.
Non, n’apprenez pas par coeur, mais comprenez et utilisez le.
Color Picker et copiez-collez.

HSL

Alternative : H(ue) S(aturation) L(ightness).

En langue de coq : Teinte Saturation Lumière. Et mon bleu marine :

p{ color:hsl(227%, 52%, 38%);}

Pour faire simple :

Pratique pour jouer sur une valeur sans changer les deux autres.

Comme pour le rgba, le hsla existe.

p{ color:hsla(227%, 52%, 38%, .7);}

Le 0 est facultatif pour les décimales.

(Ainsi) font

Font. (Police de caractère pour les sédentaires.)
Les polices, il en existe depuis des siècles.
Une police, c’est des caractères. Des lettres oui, mais aussi des chiffres, de la ponctuation, des caractères spéciaux.
Une police, ça vit. Un “a” suivi d’un “p” ne réagit pas pareil si suivi d’un “i” ou d’un “w”.
C’est tout un art.
Qu’en est-il pour nous, maigres intégrateurs ?
Choisir la police, la taille des caractères, leur espacement, leur style, leur graisse.
Sous les feux de la rampe, je demande Arial, Georgia, Verdana, Courier, Times…

font-family

La famille d’une police, c’est l’ensemble de ses caractères.

p{ font-family:Verdana;}

On annonce au navigateur d’aller chercher la police Verdana sur l’ordinateur de l’internaute et de l’appliquer à tous nos p.
Au meilleur des cas, la police est là, elle est appliquée.
Mais si elle venait à manquer ? Le navigateur prendra la police par défaut, en général Times New Roman. Damnation !

Palier au manque, c’est possible. On définit alors plusieurs polices.

p{ font-family:Verdana, Calibri, Arial, sans-serif;}

Si Verdana prend la poudre d’escampette, Calibri viendra à la rescousse.
Si Calibri suit Verdana, Arial sera là.

Pourquoi ???
"Et Comic Sans MS dans tout ça ?"

Mais quelle est cette police de dernier recours ? sans-serif ? Quel nom peu commun !
Je vous arrête : sans-serif n’est pas une police, mais un type de police, en l’occurence les polices sans empattement. Libre alors à l’ordinateur de choisir la police qu’il veut.
Pratique ces types de police ! Voici d’autres options CSS :

A utiliser en dernière option d’une liste de polices.

font-size

La famille choisie, va-t-on utiliser les petits ou les grands ?

p{ font-size:12px;}

En pixels de préférence, car la CSS se lit sur écran. Chaque caractère fera à peu près 12px de haut.

D’autres options que le pixel :

Le pixel est précis, le em est pratique. A vous de voir.

font-style

Du style dans du style.

p{ font-style: italic;}

Un peu penché le texte.

p{ font-style: oblique;}

Très penché le texte.

p{ font-style: normal;}

Valeur par défaut qui a bon dos.

Requis : la police doit avoir dans sa famille les caractères en italique et/ou oblique pour que cela prenne effet.

font-weight

La graisse, la vraie.

p{ font-weight: bold;}

Du gras.

p{ font-weight: bolder;}

Encore plus gras.

p{ font-weight: lighter;}

Top-model.

Ou par centaines : 100, 200, … 900.

p{ font-weight: 100;}

Pas génial. Du tout.

p{ font-weight: normal;}

Requis (bis) : la police doit contenir ses caractères en gras, faute de quoi…

font-variant

Une option :

p{ font-variant: small-caps;}

Joli ? Parfois.

p{ font-variant: normal;}

Retour à la normale.

line-height

Le font-size définit la taille des caractères.
Le line-height définit l’espacement entre les lignes.

Le confort de lecture est le résultat de l’association des deux.

p{ font-size: 12px; line-height: 16px;}

Un confort notable.

Le em peut s’avérer pratique ici.

p{ font-size: 12px; line-height: 1.4em;}

Changez le font-size, le line-height restera proportionnellement supérieur.

Mais le line-height définit aussi la hauteur du block.
Un <p> à 3 lignes avec un line-height de 16px fera 48px de haut.

Associez le line-height avec le height, et vous centrez verticalement le texte.

.annonce{ font-size: 12px; height:40px; line-height: 40px;}

Un block de 40px de haut. Fixe. Une seule ligne de texte. Pour la centrer verticalement, mettre un line-height égal au height. Magique.

font

Tous ces font-, ce line-height… Quel bavardage ! Gagner du temps, c’est gagner du style.

p{ font: italic bold 12px/16px Georgia, Times, serif;}

Du style, du gras, de la taille, de l’interlignage, et des polices. Compressé comme jamais.

text-align

A gauche, au centre, à droite.

p{ text-align: center;}

Appliqué à un block, il centre le texte de ce block (et non pas le block lui-même).

text-transform

La prestidigitation s’invite dans les CSS.

p{ text-transform: uppercase;} /* GE KIF LÉ MAJUSKUL */
p{ text-transform: lowercase;} /* pas moi */
p{ text-transform: capitalize;} /* Quel Mauvais Genre ! */
p{ text-transform: none;} /* Chut. */

Le code HTML peut être en majuscules, minuscules, peu importe. Le style agit là, pas dans le HTML.

text-decoration

Un trait, des clignotements.

p{ text-decoration: overline;}
p{ text-decoration: line-through;}
p{ text-decoration: underline;}
p{ text-decoration: blink;}
p{ text-decoration: none;}

text-indent

Décaler la première ligne de texte, pour diriger l’oeil et apaiser la lecture.

p{ text-indent: 20px;}
p{ text-indent: 3 em;}

Ou en négatif.

p{ text-indent: -2px;}

text-shadow

A l’ombre, rien de nouveau. Une syntaxe :

p{ text-shadow:[x] [y] [flou] [couleur];}

Un duo [x] horizontal et [y] vertical pour la position de l’ombre. En pixels positif ou négatif. Le [flou] de l’ombre, en pixels. L’étendue (facultative), de 0 à 1. Puis la couleur : hexa, rgba, rgba, hsl, hsla, texte…

Pour mieux vous lire, un appui noir transparent :

p{ text-shadow: 0 2px 2px rgba( 0, 0, 0, .7);}

Sur fond foncé, une lumière vers le haut :

p{ text-shadow: 0 -1px 0 rgba( 255, 255, 255, .3);}

white-space

Le texte est fluide au départ. Arrivé au bout d’une ligne, la suite fait un retour à la ligne. Cette attitude peut être anéantie :

p{ white-space: nowrap;}

Le texte restera sur une et une seule ligne, quitte à dépasser du paragraphe et/ou disparaître d’une l’écran, jusqu’à ce qu’il rencontre un éventuel <br>.

Le code HTML n’a habituellement aucun impact quant à la mise en forme textuelle, c’est à dire que les sauts de ligne, les tabulations et les espaces multiples dans le HTML ne s’affichent pas de le navigateur. Seul l’espace simple est conservé. Pour tenir compte de la mise en forme présente dans le code HTML, un outil existe :

p{ white-space: pre;}

La balise <pre> agit de même.

letter-spacing

L’espacement des lettres. Toute une science. La parcimonie est de rigueur.

p{ letter-spacing: 1px;} /* Espacement fixe, quelle que soit la taille de la police */
p{ letter-spacing: -.5em;} /* Espacement réduit et proportionnel, pratique */

Comme pour le font-size : px, em plutôt, et pas pt, cm, pourcentage…

word-spacing

Après les lettres, les mots.

p{ word-spacing: 2em;}
p{ word-spacing: normal;}

word-wrap

Les chaînes de caractère sans espace (tel “Supercalifragilisticexpialidocious”) restent unies et ne passent jamais à la ligne, quitte à dépasser du block dans lequel il est.
Pour forcer le retour à la ligne, en brisant le mot en deux :

p{ word-wrap: break-word;}

Cruel destin.

Jouer avec les lettres, leur pluralité, et se restreindre à la forme. Les frontières s’effacent pour laisser place au goût très prononcé pour l’expérimentation typographique, tant mocharde que délicieuse. A l’horizon, s’éprendre pour une fresque et en broder le parcours.

Construisez donc un empire avec les armes que je vous laisse !

La victoire acquise, la tâpisserie vous attend.