Cégep de Sainte-Foy | Techniques d'intégration multimédia

582-104-SF Intégration 1

Leçon 5

CSS et le texte

Le texte sur le Web

Le web présente un défi sur le plan de la typographie.

Pour commencer, il faut accepter de ne pas avoir le plein contrôle de la typographie sur le Web.

Par ailleurs, la typographie donne le ton en ce qui concerne la qualité visuelle d'un site.

Voici les principales propriétés CSS associées au texte :

Proprétés CSS associées aux polices de caractères et au texte

color
Couleur du texte
Essayez-le sur W3School !
Noms des couleurs
Color Picker
direction
Sens d'écriture
font
Ensemble des propriétés concernant les caractères
font-family
Police de caractères
font-size
Taille des caractères
font-size-adjust
Hauteur des lignes de texte
font-stretch
Étirement ou compression des caractères
font-style
Mise en italique
font-variant
Mise en petites capitales
font-weight
Mise en gras ou extra-gras
letter-spacing
Espacement des lettres
line-height
Hauteur de ligne
text-align
Détermine l'alignement horizontal du texte à l'intérieur d'un élément
text-decoration
Soulignement ou rayure du texte
text-indent
Indentation du texte
text-justify
Justification du texte
text-overflow
Détermine s'il faut afficher le contenu débordant d'un cadre plein sous forme de points de suspension (...) à la fin de la ligne
text-shadow
Définit les effets d'ombre à appliquer au texte de l'élément
text-transform
Contrôle la capitalisation (majuscules/minuscules) du texte d'un élément
vertical-align
Définit l'alignement vertical de l'élément par rapport à la ligne (et non la page)
word-spacing
Définit l'espacement entre les mots
white-space
Gère les espaces multiples et les bris de ligne
Essayez-le sur W3School

Voici un lien qui peut être utile pour obtenir la définition des propriétés et des mots-clés utiles en CSS: Référence CSS - Mozilla Developer Network

Les polices de caractères sur le web

À la base, ce sont les polices de caractères installées sur l'appareil de l'utilisateur qui déterminent les possibilités des navigateurs quant à l'affichage du texte dans les pages web.

Même si une police de caractères est spécifiée par le concepteur web par l'intermédiaire des règles de style, celle-ci sera affichée en autant qu'elle soit installée sur l'appareil de l'utilisateur. Si elle n'y figure pas, c'est la police par défaut du navigateur qui sera affichée.

Un autre facteur qui rend difficile le choix d'une police de caractères est l'inconsistance de leurs noms d'une plate-forme à l'autre: Times New Roman peut aussi se nommer TimesNR ou Times Roman, par exemple.

Le problème de la taille des caractères

En matière de typographie, la taille présente un autre défi, car la résolution des écrans varie et la taille par défaut des polices changent d'un navigateur à l'autre et d'une plate-forme à l'autre.

Les collections de polices

Valeurs: serif, sans-serif, monospace, fantasy, cursive.

Pour spécifier une fonte générique, à partir d'une collection de polices, vous pouvez écrire ceci:

body { font-family: sans-serif; }

Le navigateur affiche la fonte par défaut de cette collection (Helvetica ou Arial, dans la plupart des cas).

Le Pen suivant présente les différentes valeurs de collections de polices, telles qu'elles sont affichées par défaut dans Firefox :

See the Pen c06-font01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Les familles de polices

Les familles de polices ne font pas partie du navigateur, mais résident plutôt dans le système d'exploitation de l'ordinateur de l'utilisateur. Voici les familles les plus courantes telles qu'elles s'affichent dans les navigateurs courants  :

See the Pen c06-font02 by Sylvain Lamoureux (@slamoureux) on CodePen.

Ces familles de polices permettent d'être plus spécifique que l'exemple ci-haut où le choix de la police s'arrêtait à la collection.

Par exemple:

body { font-family:"trebuchet ms", helvetica, arial, sans-serif; }

Cette déclaration indique au navigateur :

  • d'afficher en priorité la police Trebuchet MS;
  • d'afficher en deuxième lieu la police Helvetica ou en troisième lieu la police Arial dans le cas où Trebuchet MS n'est pas installé sur l'appareil de l'utilisateur;
  • d'utiliser la fonte sans-serif par défaut du système dans l'éventualité où aucune des polices proposées n'est installée sur l'appareil de l'utilisateur.

À noter: puisque Trebuchet MS est composé de plus d'un mot, il faut obligatoirement inscrire cette valeur entre apostrophes dans la règle de style.

Autre exemple utilisant cette fois une police serif:

body { font-family:"hoefler text", times, serif; }

Cette déclaration indique au navigateur que :

  • Hoefler text étant mentionné en premier, c'est cette police qui doit être affichée en priorité ;
  • Windows ne disposant pas de Hoefler text, c'est Times qui sera affiché dans ce contexte ;
  • si aucune de ces polices n'est disponible, c'est la fonte serif par défaut du système d'exploitation de l'utilisateur qui sera affichée.

Les unités de taille des polices de caractère

La taille des polices sur le web peut-être déterminée de trois manières:

  1. absolue
  2. relative
  3. par des mots-clés

1_ Unités de taille absolues

Une taille absolue a une signification prédéfinie ou un équivalent dans le monde réel.

Pour les périphériques ayant un faible nombre de points par pouce, l’unité px représente le pixel de référence physique et les autres unités sont définies de façon relative à lui. Ainsi, 1in est définit comme 96px, ce qui équivaut à 72pt. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (in), centimètres (cm) et millimètres (mm) ne correspondent pas forcément à la longueur de l’unité physique du même nom.

Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (in), centimètres (cm) et millimètres (mm) sont définis comme leur équivalent physique. Par conséquent, l’unité px est définie comme étant relative à eux (1/96 de pouce).

px
Pixel. Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspondant à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.
mm
Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
cm
Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
in
Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
pt
Un point pica (soit 1/72e de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
pc
Un pica (soit 12 points, soit 1/6e de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
mozmm
Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais cela peut être utile, en particulier pour les terminaux mobiles.

La taille réelle des pixels varie bien sûr en fonction de la résolution de l'écran. En ce sens, cette unité est en partie relative. Mais il faut retenir que la taille des caractères en pixels ne peut être changée lorsque l'option «Zoom texte seulement» est activée. En conséquence, l'utilisation de px comme unité de taille des caractères rend vos pages web un peu moins accessibles que l'utilisation d'une unité relative comme em ou %.

2_ Unités de taille relatives


Unités de taille reliées à la police

%
Pourcentage. Il ne s'agit pas d'une unité à proprement parler, mais on peut l'employer pour plusieurs propriétés CSS. «100%» est la valeur par défaut des polices dans les navigateurs (cela correspond à 1em ou 16px dans la plupart des navigateurs). Le pourcentage utilisé est en relation avec la taille spécifiée pour le conteneur parent ou le premier conteneur ancêtre, le cas échéant.
em
Traditionnellement, em correspond à la dimension de la lettre M dans la police utilisée; dans les CSS, cette unité de mesure correspond en pratique à la hauteur d'une ligne, sans l'espace interligne; par défaut, les navigateurs donnent la taille de 1em aux caractères, soit une hauteur équivalente à 16 pixels. La taille de em utilisée est en relation avec la taille spécifiée pour le conteneur parent ou le premier conteneur ancêtre, le cas échéant.
rem
Le rem, ou "root em", est la même chose que le em, mais cependant toujours en relation avec la taille de caractère spécifiée à la racine du document HTML (l'élément <html>) et non au premier ancêtre dont la taille est spécifiée.
ex
ex représente la hauteur de la lettre x dans la police utilisée (ou plus généralement la hauteur des lettres de bas de casse de la police). 1ex = 0.5em dans de nombreuses polices.
ch
ch représente la largeur du caractère « 0 » dans la police utilisée.

Unités de taille reliées au « viewport »

vh
1vh = 1/100e de la hauteur du viewport.
vw
1vw = 1/100e de la largeur du viewport.
vmin
1vmin = 1/100e de la valeur minimale entre la hauteur et la largeur du viewport.
vmax
1vmax = 1/100e de la valeur maximale entre la hauteur et la largeur du viewport.

Les mots-clés suivants sont aussi des unités de mesure relatives

smaller
Indique une diminution d'un intervalle par rapport à la valeur spécifiée pour un conteneur parent ou ancêtre dans les feuilles de style de l'auteur ou du navigateur.
larger
Indique une augmentation d'un intervalle par rapport à la valeur spécifiée pour un conteneur parent ou ancêtre dans les feuilles de style de l'auteur ou du navigateur.

3_ La taille par mots-clés

La taille peut aussi être exprimée avec des mots clés:

  • xx-small
  • x-small
  • small
  • medium (taille par défaut dans les navigateurs; correspond à 1em ou 16px)
  • large
  • x-large
  • xx-large

Ces mots ne représentent pas une dimension particulière, mais ils ont un rapport constant les uns aux autres. La taille par défaut est medium dans les navigateurs conformes aux standards.

Unités relatives vs absolues

Les unités relatives confèrent aux page web un plus grand degré d'accessibilité, puisqu'elles donnent à l'utilisateur plus de contrôle sur la taille du texte affichée.

Le W3C, l'organisme qui régit les normes du web, recommande d'utiliser des unités relatives pour régler la taille du texte dans une page Web. L'unité em est la plus utilisée par les intégrateurs soucieux de l'accessibilité web.

Précision des unités

Les unités em et % permettent de préciser plus finement la taille du texte que les sept mots-clés. On peut utiliser par exemple « 0.93em » ou « 93% ».

Par ailleurs, l'unité em accepte jusqu'à trois décimales (par exemple: 0.931em).

em vs %

L'utilisation des em et des des % est comparable: la valeur par défaut est de 1 dans le premier cas et de 100 dans le second.

Pour augmenter la taille de 20% par rapport à la valeur par défaut on écrit donc 1.2em ou 120%, selon l'unité utilisée.

Lorsque vous utilisez des tailles de police relatives comme le em ou le %, il faut penser à la cascade, car la propriété font-size est héritée par les conteneurs enfants ou descendants. Dans l'exemple suivant, voyez comment la taille des caractères change lorsque la valeur de 1.2em est utilisée de manière successive dans des conteneurs imbriqués :

Les unités relatives.

Si on utilisait 120% plutôt que 1.2em dans l'exemple ci-contre, le résultat serait exactement le même.

Expérimentez dans CodePen avec cet exemple

See the Pen c06-unite01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Les propriétés des fontes et du texte

Les propriétés des fontes


font-style

Fonction : permet de passer de la fonte normale à l'italique.

Valeurs : normal, italic, oblique.

Exemple :

See the Pen c06-font14 by Sylvain Lamoureux (@slamoureux) on CodePen.

Qu'elle est la différence entre l'usage de l'élément <em> dans le HTML et l'usage de la propriété font-style dans le CSS?

font-variant

Fonction : permet de passer aux petites capitales.

Valeurs : small-caps (petites capitales), normal.

Exemple :

See the Pen c06-font06 by Sylvain Lamoureux (@slamoureux) on CodePen.

font-weight

Fonction : ajuste l'épaisseur du trait de la fonte.

Valeurs : 100, 200, 300... 900, lighter, normal, bold, bolder.

Ces valeurs sont interprétées de manière variable selon les navigateurs et ne sont pas toujours reconnues.

Exemple :

See the Pen c06-font01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Qu'elle est la différence entre l'usage de l'élément strong dans le HTML et l'usage de la propriété font-weight dans la CSS?

font-size

Fonction : ajuste la taille de la fonte.

Valeurs : nombres et unités de taille variées; mots-clés.
(Voir plus bas pour une discussion plus détaillée sur les unités et les mots-clés.)

Cette propriété permet d'ajuster la taille du texte.

Exemple :

See the Pen c06-font02 by Sylvain Lamoureux (@slamoureux) on CodePen.

line-height

Fonction : ajuste la hauteur de la ligne.

Valeurs: normal (par défaut); toute valeur numérique avec ou sans unité (lorsque sans unité, il s'agit d'une valeur proportionnelle à la taille de la police).

Exemple :

See the Pen c06-font03 by Sylvain Lamoureux (@slamoureux) on CodePen.

font-family

Fonction : spécifie la police de caractère à afficher.

Valeurs: noms des polices de caractères.
(Voir plus bas pour une discussion plus complète à ce propos.)

Exemple :

See the Pen c06-font04 by Sylvain Lamoureux (@slamoureux) on CodePen.

font: une « super-propriété »

Le terme font est un raccourci pour regrouper les propriétés qui précèdent. C'est ce qu'on appelle une « super-propriété ».

Exemple :

See the Pen c06-font05 by Sylvain Lamoureux (@slamoureux) on CodePen.

Pour regrouper les propriétés de fonte, deux règles doivent être appliquées :

Règle 1. Les valeurs pour font-size et font-family doivent toujours être déclarées pour qu'une déclaration avec la super-propriété font soit valide. Les autres propriétés sont optionnelles.

Par exemple, cette déclaration comporte le minimum de valeurs pour être valide:

body { font: 0.8em Verdana; }

Règle 2. La séquence des valeurs de la super-propriété font doit se décliner ainsi:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size (obligatoire)
  5. line-height
  6. font-family (obligatoire)

À retenir: lorsque vous utilisez la super propriété font, les valeurs des propriétés non évoquées explicitement dans cette déclaration reprennent leur valeur par défaut. Ainsi, dans l'exemple suivant, la propriété font-weight prend au final la valeur normal et non bold :

h3 { font-weight: bold; font: 1.6em Verdana, sans-serif; }

Cette remarque vaut pour toutes les super-propriétés.

Les propriétés du texte


text-indent

Fonction : ajuste l'alinéa (le retrait de la première ligne d'un paragraphe).

Valeurs : unités de taille diverses, positives ou négatives.

Exemple :

See the Pen c06-font07 by Sylvain Lamoureux (@slamoureux) on CodePen.

letter-spacing

Fonction : ajuste la distance entre les lettres.

Valeurs : unités de taille diverses, positives ou négatives.

Exemple :

See the Pen c06-font09 by Sylvain Lamoureux (@slamoureux) on CodePen.

Cette propriété peut être utilisée pour équilibrer un titre (éléments h1-h6), par exemple, ou encore pour ajuster une courte chaîne de caractères transformée en majuscules ou en petites capitales. Ce sont communément les majuscules ou les polices compactes qui vont bénéficier de ce traitement.

word-spacing

Fonction : ajuste la distance entre les mots.

Valeurs : unités de taille diverses, positives ou négatives.

Exemple :

See the Pen c06-font10 by Sylvain Lamoureux (@slamoureux) on CodePen.

Cette propriété peut être utilisée pour équilibrer un titre (éléments h1-h6), par exemple.

text-decoration

Fonction : ajuste l'ornementation du texte.

Valeurs: underline, overline, line-through, none.

Exemple :

See the Pen c06-font11 by Sylvain Lamoureux (@slamoureux) on CodePen.

text-align

Fonction : ajuste l'alignement du texte par rapport à son conteneur parent.

Valeurs : left, right, center, justify.

Les valeurs left, right, center et justify sont illustrées dans l'ordre dans l'exemple suivant :

See the Pen c06-font08 by Sylvain Lamoureux (@slamoureux) on CodePen.

text-transform

Fonction : ajuste la casse du texte.

Valeurs : uppercase (majuscules), lowercase (minuscules), capitalize (la première lettre chaque mot sera écrite en majuscule), none.

Exemple :

See the Pen c06-font12 by Sylvain Lamoureux (@slamoureux) on CodePen.

vertical-align

Fonction : ajuste l'alignement vertical d'un élément de type inline ou inline-block par rapport à la hauteur de la ligne.

Valeurs : toutes valeurs numériques (positives et négatives), pourcentage (%) et aussi les mots baseline (défaut), sub, super, top, text-top, middle, bottom, text-bottom.

Exemple :

See the Pen c06-font13 by Sylvain Lamoureux (@slamoureux) on CodePen.

La propriété vertical-align agit en relation avec la propriété line-height. Elle n'a d'effets que sur des éléments de type inline ou inline-block. Inutile, donc, de tenter de centrer verticalement un paragraphe ou un titre avec cette propriété...

D'autres astuces sont possibles pour aligner verticalement des éléments de type bloc.

Cette propriété est essentiellement utilisée pour aligner du texte en exposant ou en indice ou pour aligner des éléments <img> ou <video> sur une ligne.

Quelle police pour le Web?

Nous avons vu que le choix des polices de caractères pour le web est relativement limité.

En effet, nous devons utiliser celles qui se retrouvent dans le répertoire des polices de caractères des utilisateurs, sinon le navigateur affichera la police par défaut.

Imprimé vs écran

Notons que toutes les polices de caractères n'ont pas nécessairement été créées pour l'affichage à l'écran.

La plupart des fontes classiques ont d'abord été créées pour l'imprimé. Certaines d'entre elles ont subi par la suite une adaptation pour le Web.

Avec ou sans empattements?

On entend souvent la recommandation suivante: il est préférable d'utiliser des polices sans empattements (sans-serif) pour le Web, parce que les empattements (serif) rendent les caractères plus confus, moins nets, lors de l'affichage écran et, par conséquent, rendent la lecture plus laborieuse.

Il faut apporter des nuances à cette affirmation, comme le montre l'exemple qui sera discuté plus bas.

Cette réputation des polices à empattements provient du fait qu'un grand nombre d'entre elles sont employées pour l'imprimé et ont créées expressément pour ce médium avant tout.

Mais il y a de notables exceptions.

Dans le monde de l'imprimé, les polices à empattements emportent largement la faveur des typographes, en particulier pour les textes longs. La très grande majorité des livres contiennent ce type de caractères, tout simplement parce qu'ils ont la réputation d'en faciliter la lecture! En effet, les empattements créent un lien naturel, plus organique, entre les lettres.

Étude de cas: Georgia

La police de caractères Georgia, comme le montre ce paragraphe, comporte des empattements. Mais contrairement à la plupart des polices à empattements, Georgia à d'abord été dessinée pour l'affichage à l'écran. Ce n'est qu'en second lieu qu'elle fut adaptée pour l'impression.

Ce n'est pas le cas de Times New Roman, qui a d'abord été créée pour l'imprimé, puis adaptée pour l'écran. Son affichage à l'écran est moins efficace, comme vous pouvez le constater en lisant ce paragraphe. Les empattements sont trop fins pour être rendu à l'écran de manière nette.

En tant que concepteur Web, vous devez connaître ces subtilités.

Voyons un exemple pour démontrer l'utilité des propriétés des polices de caractères et du texte. Il s'agit d'une page concernant le maître du macabre du 19e siècle, l'auteur Edgar Allan Poe.

Le sujet se prête bien à l'usage d'une police de style classique :

Maquette Georgia

Lisibilité de la section principale

Concentrons-nous d'abord sur la section principale, située au centre. Elle est un élément important de la hiérarchie de la page. Elle doit comporter le « poids » nécessaire pour qu'elle deviennent le point focal de la page et qu'elle ait un maximum de lisibilité.

Déterminer la longueur de la ligne

Selon certains typographes, la longueur de ligne qui permet une lisibilité optimale d'une colonne de texte se situe quelque part entre 45 et 75 caractères (incluant les espaces).

Cet ordre de grandeur permet de briser les lignes en des segments ni trop longs ni trop courts de manière à faciliter la lecture.

Plusieurs typographes cite le chiffre de 66 caractères comme étant une longueur de ligne idéale. Nous utiliserons donc ce critère pour bâtir la section principale de la page web d'Edgar Allan Poe.

Des lignes fixes ou variables?

Voyons le choix qui se présente quant au type de mise en page:

  • Le contenu liquide sans contrainte («mise en page liquide»): les lignes changent de longueur selon largeur de la fenêtre du navigateur.
  • Le contenu fixe : la longueur des lignes est définie par la largeur des colonnes en pixels; lorsque la largeur de la fenêtre est insuffisante, il y a nécessité de défilement horizontal.
  • Le contenu élastique (mise en page «élastique») combinent le meilleur des deux mondes: la mise en page prend de l'expansion ou se contracte lorsque le texte ou la fenêtre du navigateur est redimensionné, mais ne prendra pas de l'expansion au-delà d'une largeur spécifique. De plus, le défilement horizontal est évité lorsque la fenêtre du navigateur est étroite ou que la résolution est modeste.

Références

www.smashingmagazine.com: fixe vs liquide vs élastique

See the Pen c06-fixe_fluide01 by Sylvain Lamoureux (@slamoureux) on CodePen.

La mise en page élastique

Voyons de plus près la mise en page élastique.

Le secret de la mise en page élastique est l'utilisation d'une unité de longueur relative, comme l'unité em.

Puisque cette unité est basée sur la taille des caractères, si l'on spécifie la taille des éléments de la mise en page en em, ces éléments vont s'étendre ou se contracter en maintenant la proportion entre la taille des caractères et la longueur des lignes de texte.

Voilà qui permet de conserver intacte, le plus possible, la norme des 66 caractères par ligne.

Calculer la taille des caractères et la longueur des lignes

Une mise en page élastique est adaptable à la plupart des résolutions.

Résolution visée

Si toutefois nous souhaitons que les proportions de la page conviennent confortablement à une résolution horizontale de 1024 pixels, une largeur de page de 960 pixels est suffisante. C'est ce que nous visons ici.

Espace occupé par la section principale

Nous avons trois colonnes de contenu, dont une principale qui devrait couvrir au moins la moitié de la largeur de la page, c'est à dire 50%.

Mise en page

Taille des caractères et ligne de 66 caractères

Pour déterminer la taille de caractères et la longueur d'une ligne de 66 caractères en em, il faut :

  1. écrire quelques lignes avec la police choisie (Georgia dans notre cas) dans un conteneur dont la largeur est déterminée en em, par exemple 40em;
  2. compter les caractères (incluant les espaces) pour quelques lignes, par exemple 88 caractères par ligne en moyenne;
  3. diviser la moyenne des caractères par ligne (88) par la largeur du conteneur (40), donc 88 / 40 = 2,2 caractères par em.
  4. par une simple règle de trois, une ligne de 66 caractères comporte une largeur de 30em, puisque: 66 / 2.2 = 30em.

Taille de l'enveloppe du contenu en em

Puisque nous désirons que le contenu principal occupe environ la moitié de l'espace, la largeur de la page enveloppant le contenu, incluant les trois colonnes, devrait donc être de 2 x 30 = 60 em.

Taille de caractère en pixels

Étant donné que nous voulons un contenu ne dépassant pas les 960 pixels de largeur, il suffit de diviser 960 par 60 pour obtenir une taille de caractères de 16 pixels.

Par contre, il est préférable d'utiliser l'unité em pour la taille des caractères, plutôt que px, afin de maximiser l'accessibilité, c'est-à-dire permettre à l'utilisateur de redimensionner le texte au besoin dans tous les navigateurs par l'option « zoomer seulement le texte ».

Nous savons que la taille 1em correspond à 16 pixels chez les navigateurs actuels. Nous utiliserons cette taille pour la section centrale de la page.

html { font-size: 1em; line-height: 1.5; /* Sans unité, la valeur est relative à la taille du texte */ margin-left: 10px; /* Utile lorsque la fenêtre du navigateur est étroite */ margin-right: 10px; /* Utile lorsque la fenêtre du navigateur est étroite */ }


.enveloppe { max-width: 60em; margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; }


Largeur des colonnes et marges en %

Pour faciliter les calculs tout en conservant une fluidité parfaite, la largeur des colonnes incluant les marges sont spécifiées en pourcentage.

En attribuant 2% de marge à chacune des colonnes, les proportions suivantes sont obtenues :

nav { width: 21%; margin-right: 2%; }


main { width: 54%;/* La valeur de width inclut les valeurs de padding */ padding-left: 2%; padding-right: 2%; }


aside { width: 21%; margin-left: 2%; }

Notez que le contenu des colonnes de gauche et de droite ne couvrent pas tout-à-fait 25% de la largeur chacune, en raison de l'espace occupée par les marges, et parce que nous souhaitons que le contenu de la colonne du centre (sans compter les marges) occupe 50% de largeur totale de la page.

Poe

Paragraphes: alinéa et espace

L'espace alloué par défaut par les navigateurs entre les paragraphes est quelque part entre 1 et 2em.

Lorsqu'un texte est relativement court et compte un nombre restreint de paragraphes, une solution élégante consiste à réduire la distance entre les paragraphes et à utiliser un alinéa (retrait), comme on le fait parfois dans l'imprimé.

On évite d'utiliser à la fois un alinéa et un espace blanc entre les paragraphes: les deux éléments servent la même cause; cela crée donc de la redondance.

  • Nous allons nous débarrasser des espaces blancs.
  • Nous allons insérer un alinéa à la première ligne de chacun des paragraphes, sauf le premier.

Dans une première étape, éliminons les espaces entre le paragraphes et les autres éléments blocs en utilisant le sélecteur universel * qui permettra de réinitialiser les espaces de tous les éléments du même coup :

* { margin: 0; padding: 0; }

Ensuite, ajoutons un alinéa de 2.1em à tous les paragraphes :

p { text-indent: 2.1em; }

Remarquez les alinéa (retraits) au début de chaque paragraphe et la disparition des espaces entre les paragraphes:

Poe

Par contre, cela crée aussi un alinéa dans le premier paragraphe, ce qui est inutile et redondant.

Pour enlever l'alinéa du premier paragraphe, il suffit de créer, dans le HTML, une classe pour ce paragraphe (et qui servira à tous les « premiers » paragraphes):

<p class="premier">Contenu du paragraphe</p>

Et voici la règle de style correspondante :

.premier { text-indent: 0; }

L'alinéa du premier paragraphe est éliminé:

Poe

Une lettrine avec ça?

Créons une lettrine pour donner un peu de classissisme à cette page (et pour vous faire travailler vos CSS !).

Nous verrons ici deux techniques pour créer une lettrine.

Voyons d'abord la technique classique. Ajoutons un span à la lettre "O", soit la première lettre du texte :

<p class="premier"><span class="lettrine">O</span>ctobre, 1849...</p>

Puis une règle de style:

.lettrine { float: left; font-size: 6em; margin-right: 2px; }

Lettrine

Et voilà.

Mais comment faire maintenant pour insérer l'image d'une lettrine classique ornementée à la place du « O » comme le montre la maquette?

Remplacement d'image

Il existe plusieurs techniques de remplacement d'image.

L'une de celle-ci consiste à retirer la lettre originale en lui attribuant un alinéa négatif, puis en utilisant une image de remplacement comme image d'arrière-plan.

.lettrine { text-indent: -9999px; /* Cache la lettre "O" sans la retirer du HTML */ background-image: url(../images_css/o.gif); /* Image de la lettrine */ display: block; /* Donne une dimension à l'élément span lettrine */ width: 83px; /* Donne une largeur qui permet de voir la lettrine */ height: 83px; /* Donne une hauteur qui permet de voir la lettrine */ float: left; /* Pour imbriquer la lettrine dans le texte */ margin-right: 2px; /* Ajoute une marge à la droite de la lettrine */ }

Dans la règle ci-haut, la déclaration display:block permet de donner une dimension par l'intermédiaire des propriétés width et height, ce qui est essentiel pour afficher l'image de la lettrine en entier comme le montre l'image suivante.

La déclaration text-indent:-9999px est une astuce qui permet de cacher la lettre « O »dans la mise en forme (pour la remplacer par une image) tout en la conservant dans le HTML pour que le texte demeure complet et conserve ainsi sa signification.

Lettrine par image de remplacement

Pour éviter que la lettrine soit accolée directement au texte en minuscules, nous ajoutons une chaîne de caractères en majuscules, tout juste à la suite de celle-ci, pour donner du style à notre texte. Il suffit d'ajouter un élément span avec une classe date autour du texte « Octobre, 1849 ».

<p class="premier"><span class="date"><span class="lettrine">O</span>ctobre, 1849</span>Lorem ipsum...</p>

Avec la règle suivante:

.date { text-transform: uppercase; letter-spacing: .13em; }

Lettrine Georgia

Vous remarquerez que la police Georgia contient ce qu'on appelle des « figures de texte »: plusieurs chiffres se comportent en effet comme des minuscules en affichant un «descendeur» (des pattes sous la base de la ligne).

Notez la position des chiffres 4 et 9: ils sont plus bas que les chiffres 1 et 8.

Afin de paufiner l'allure classique de notre texte, nous pouvons changer la police pour cette portion de texte, en ajoutant une déclaration à la règle précédente :

.date { font-family: "Times New Roman", Times, Georgia, serif; text-transform: uppercase; letter-spacing: .13em; }

Notez bien que, maintenant, les caractères « 4 » et « 9 » ne descendent plus sous la ligne :

Majuscules suivant la lettrine

Pour compléter le travail, nous ajoutons une première ligne en petite capitales dans la colonne de droite (aside), tout en ajustant légèrement l'espace entre les lettres:

aside p.premier:first-line { font-variant: small-caps; letter-spacing: 0.1em; }

L'ajout de :first-line permet de ne sélectionner que la première ligne du paragraphe :

Petites capitales

Pour obtenir enfin le résultat final:

Résultat final
Maquette Georgia

Activités d'évaluation

Contrôle de lecture 2

Le contrôle de lecture 2 aura lieu au cours 8.

Il concerne le contenu des pages Web des leçons 4, 6 et 7.

TP5

Le TP5 a pour objectif de vous familiariser avec les propriétés CSS liées aux polices de caractère et au texte.

Sources

Téléchargez le dossier de travail source_tp5.zip.

Documents à remettre

Un dossier rigoureusement nommé comme suit:

  • groupe du lundi 8h : gr2_nominitialeprenom_tpx
  • groupes du lundi 12h : gr1_nominitialeprenom_tpx

contenant un fichier index.html, un dossier images_html, un dossier images_css et un dossier css contenant lui-même un fichier styles.css.

Structure de fichiers :

Échéancier

Remettez le dossier complet, zippé, sur LÉA, dans l'espace prévu à cette fin, au plus tard :

  • le vendredi suivant le cours, 9h le matin

Grille d'évaluation (pondération: 3% de la session)

  • La première règle de style doit être *{margin:0 padding:0;box-sizing:border-box}: /1
  • Le sélecteur html doit indiquer la police à utiliser: /1
  • Le sélecteur html doit indiquer une taille de police: /1
  • Le sélecteur html doit indiquer une hauteur de ligne convenable pour cette taille de police: /1
  • Le conteneur "enveloppe" doit être centré: /1
  • Ajustez l'alinéa des paragraphes avec l'unité em: /1
  • Assurez-vous que le premier paragraphe de la section principale ainsi que le paragraphe de l'image ne comportent pas d'alinéa: /1
  • Remplacez la règle concernant la lettrine en utilisant la technique de l'image de remplacement vue durant le cours: /1
  • Mettez «Octobre, 1849» en majuscules à l'aide d'une règle de style: /1
  • Choisissez la police "Times New Roman" pour l'extrait de texte que vous venez de mettre en majuscules et ajustez l'espace entre les lettres avec l'unité em: /1
  • Changez les caractères de la première ligne de la section aside en petites capitales, tout en ajustant l'espace entre les lettres avec l'unité em: /1
  • Ajustez l'espace entre les lettres de la première ligne de aside avec l'unité em: /1
  • Réduisez un peu la taille des caractères de la section aside en utilisant la propriété pertinente et l'unité em: /1
  • Mettez en forme les liens hypertextes du menu principal: /1
  • Mettez en forme les liens hypertextes du contenu principal: /1
  • Placez les trois colonnes côte à côte en utilisant la propriété float correctement: /1
  • Ajustez le pied de page correctement avec clear:both: /1
  • Ajustez le texte du pied de page correctement (sans alinéa et centré): /1
  • Ajoutez les règles de style nécessaires à l'affichage sur petit écran: /1
  • Utilisez la police "Pirata One" pour les titre h1 et h2: /1

Total: /20

Travail à faire

  • Créez ou modifier les règles de style décrites plus bas à partir des fichiers fournis et en reproduisant la maquette proposée.
  • Vous ne devez pas modifier le balisage HTML: utilisez les balises et les classes qui s'y trouvent déjà pour créer vos règles lorsque cela est nécessaire.
  • Inscrivez ces règles dans la feuille de style externe qui se trouve dans le dossier « css ».
  • Pour chaque règle, vous devez spécifier la valeur d'une ou de plusieurs propriétés. Aidez-vous de Brackets pour trouver la propriété lorsqu'elle n'est pas explicitement nommée et pour ajuster la valeur. Ou encore, consultez les sections précédentes pour obtenir le nom des propriétés.
  • Utilisez Chrome comme navigateur pour valider le résultat.

Règles à créer

    Remise à zéro des marges internes et externes de tous les éléments

  1. Ajustez margin et padding à zéro pour tous les éléments avec cette règle (notez bien le sélecteur universel en forme d'étoile):

    /* Réinitialisation des marges de tous les éléments */ * { margin: 0; padding: 0; box-sizing: border-box; }

  2. Ajustez les éléments de structure :

  3. Ajoutez ensuite la règle suivante afin de forcer l'affichage « bloc » des éléments de structure :

    /* HTML5 éléments de structure */ article, aside, details, footer, header, main, nav, section { display: block; }

  4. Charte typographique: complétez la règle de style sous le sélecteur html en ajoutant les déclarations suggérées dans ce qui suit :

  5. Le sélecteur html doit indiquer la police à utiliser. Choisissez la police Georgia, tout en proposant au moins une autre famille de polices à la suite, et une collection de polices pour terminer.
  6. Le sélecteur html doit indiquer également la taille de police générique de 1em (telle que calculée précédemment).
  7. Le sélecteur html doit indiquer une hauteur de ligne convenable. Une hauteur de 1.5 devrait convenir. (À noter que l'absence d'unité signifie que la valeur est relative à la taille des caractères dans ce cas-ci).
  8. Le sélecteur html doit indiquer la couleur de police de base à utiliser. Il s'agit ici du noir (trouvez le code du noir).
  9. Ajustez l'alinéa et les autres propriétés des paragraphes :

  10. À partir des renseignements diffusés durant le cours, ajustez l'alinéa des paragraphes (p) avec l'unité em.
  11. Puisque l'alinéa et l'espace blanc entre les paragraphes sont redondants, et puisqu'ils poursuivent le même objectif, il n'est pas nécessaire d'avoir un espace blanc entre les paragraphes. Cet espace a d'ailleurs été retiré au tout début de la feuille de style grâce au sélecteur universel (*).
  12. Assurez-vous que le premier paragraphe de la section principale ne comporte pas d'alinéa. Créez une règle de style pour ce faire. Remarquez la présence d'une classe reliée au premier paragraphe de la section main; elle vous permettra de sélectionner ce paragraphe en particulier pour lui retirer l'alinéa.
  13. Assurez-vous que le premier paragraphe de la section aside ne comporte pas non plus d'alinéa.
  14. Créez une lettrine avec une image de remplacement

  15. Dans la feuille de style fournie, vous remarquerez qu'il y a une règle concernant la lettrine. Remplacez cette règle par une autre utilisant la technique de l'image de remplacement telle que vue durant le cours dans la section précédente.
  16. Compléter la mise en forme de l'élément main

  17. Dans le premier paragraphe de l'élément main mettez « Octobre, 1849 » en majuscules à l'aide d'une règle de style (voir les notes de cours pour connaître la propriété que vous devez modifier).
  18. Choisissez la police Times New Roman pour l'extrait de texte que vous venez de mettre en majuscules et ajustez un peu l'espace entre les lettres avec la propriété pertinente et utilisez l'unité em pour spécifier la valeur de cet espace.
  19. Le paragraphe de l'image comporte une classe qui permet de viser ce paragraphe en particulier.
  20. Vous remarquerez que vous devez éliminer l'alinéa du paragraphe de l'image afin que celle-ci soit correctement centrée.
  21. Complétez la mise en forme de la section aside

  22. Ajoutez une règle qui change les caractères de la première ligne de la section aside en petites capitales (small-caps), tout en ajustant l'espace entre les lettres de cette ligne avec l'unité em.
  23. Réduisez un peu la taille des caractères de la section aside en ajoutant une déclaration qui ne s'applique qu'à cette section.
  24. Mise en forme des hyperliens

  25. Ajoutez les déclarations aux règles des liens (a) afin que ceux-ci ressemblent aux liens de la maquette (utilisez les propriétés: text-transform, letter-spacing, text-decoration...)

    LIENS DU CONTENU. Écrivez des règles de style pour les quatre états des hyperliens présents au bas de main et de aside en créant des sélecteurs appropriés en vous inspirant de la maquette.

    MENU PRINCIPAL. Écrivez des règles de style pour les quatre états des hyperliens du menu principal en vous inspirant de la maquette. Ajoutez les propriétés nécessaires pour que le texte des hyperliens de la navigation principale (police de caractère, casse, espacement entre les lettres...) soient comparables à la maquette.

    Remarquez que les liens du contenu sont dans un paragraphe identifié par la classe « plus ».

    Le code de couleur pour les états link et visited est de #600, et pour les états hover et active, de #666.

    Notez que les liens du menu n'ont pas de soulignement et que le trait sous les liens des sections main et aside N'EST PAS un soulignement mais plutôt une bordure. Trouvez le code qui permet de retirer le soulignement sous tous les liens.
  26. Mise en forme du pied de page

  27. Mettez en forme le texte du pied de page pour qu'il corresponde à la maquette:

    1. casse (uppercase),
    2. espacement entre les lettres (0.15em),
    3. alignement (center),
    4. couleur du texte (#666).
  28. Placez les trois colonnes côte à côte :

  29. Maintenant, faites en sorte que les trois colonnes se placent côte à côte en ajoutant la déclaration CSS float:left; dans les règles de style touchant les sélecteurs des trois colonnes (voir la maquette), soit nav, main et aside.
  30. Ajoutez une déclaration CSS au pied de page (footer) de manière à ce que celui-ci se place correctement sous les trois colonnes. Il s'agit d'éliminer l'effet de la propriété float. La déclaration (propriété + valeur) qui permet cela est clear:left;
  31. Importez la police "Pirata One"

  32. Importez la police de caractère Pirata One en plaçant une ligne de code au début de la feuille de style (@import...), juste APRÈS @charset, sous le commentaires « Importation de polices par Google Fonts ». Voir la note qui suit.

    Importer une police à partir de Google Fonts

    1. Allez sur Google Fonts ;
    2. Tapez « Pirata One » dans l'engin de recherche ;
    3. Une fois la fonte affichée, cliquez le le signe "+" afin de sélectionner cette famille de fontes ;
    4. Cliquez sur l'onglet Families selected qui apparaît au bas de la page et, dans la fenêtre qui s'affiche, cliquez sur l'onglet @IMPORT, puis copiez la ligne de code débutant par « @import... » mais SANS les balises <style>;
    5. Collez cette ligne de code dans styles.css, juste après l'encodage de caractères, sous le commentaire approprié qui est déjà en place ;
    6. Vous pouvez dès lors utiliser la valeur "Pirata One"* avec la propriété font-family dans une règle de style comme le montre cet exemple :

      h1 { font-family: "Pirata One", cursive; }

  33. Afin que la police Pirata One puisse être affectée à h1, atteignez ce sélecteur dans la feuille de style, puis ajoutez "Pirata One" comme première valeur de la propriété font-family (tout en laissant les autres valeurs en place, comme deuxième et troisième choix).

    N'oubliez pas: les apostrophes sont obligatoires pour les noms de police comportant plus d'un mot.

  34. Ajoutez une déclaration à h1 afin de rendre ce titre en petites capitales.
  35. Vous devrez également ajuster l'espacement entre les lettres du h1 afin de le rendre plus visible en ajoutant une autre déclaration appropriée.
  36. Règles de style conditionnelles pour les petits écrans

    Pour compléter le travail, vous devez insérer, à la toute fin de votre feuille de style, une requête média qui permet de détecter une largeur d'écran de 700px et moins. Nous discuterons en détails de ce sujet lors du cours 7.

    Copiez la série de règles suivante à la toute fin de votre feuille de style:

    /* Adaptation pour petits écrans */ @media only screen and (max-width: 700px) { nav, main, aside { float: none; /* Dispose le contenu sur une seule colonne */ width: 100%; /* Assure la pleine largeur pour tout le contenu */ border: none; /* Retire les bordure de main */ } h2 { display: block; /* Ajoute un titre pour le contenu de aside */ } /* Ajuste l'entête pour les petits écrans */ header { height: 110px; background-position: center top, left 80px, right 80px; margin-bottom: 24px; } .logo { padding-top: 0; } footer { font-size: .9em; /* Réduit la taille de la police du footer */ } }


    Voici ce que devrait donner votre travail à ce stade (en haut: la version à trois colonnes; en bas: la version à une colonne pour petits écrans):

    Maquette trois colonnes

    Maquette 1 colonne

    Notez l'apparition du h2 («Notice biographique») dans la version petit écran. Il reste donc à modifier le titre h2 afin de lui attribuer la bonne police de caractère:

  37. Appliquez la police "Pirata One" au h2, ajustez l'empattement (espacement entre les caractères du titre) et centrez ce titre.
  38. Pour terminer, faites le ménage dans votre feuille de style:
    • Regroupez les règles de style par affinité si ce n'est pas fait;
    • Mettez correctement en forme les règles de style en disposant une seule déclaration par ligne;
    • Ajoutez des commentaires au besoin.

Voilà, c'est tout.