Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. HTML5 et CSS3
  3. Le HTML5 et les CSS3 pour le texte
Extrait - HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition)
Extraits du livre
HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition) Revenir à la page d'achat du livre

Le HTML5 et les CSS3 pour le texte

Les éléments de texte obsolètes

1. La spécification HTML5

Dans la spécification HTML5, un certain nombre d’éléments sont déclarés « obsolètes ». Un élément obsolète est un élément qui n’est pas déclaré dans la spécification HTML5. Mais comme le HTML5 doit être compatible avec les versions antérieures, les éléments HTML obsolètes seront malgré tout correctement interprétés par les navigateurs.

Une page web utilisant des éléments HTML obsolètes sera bien affichée, mais sera déclarée « non conforme » par les moteurs de validation.

Voici l’URL des éléments obsolètes sur le site du W3C : https://www.w3.org/TR/html5/obsolete.html

images/new-032.png

2. Les éléments inutilisés et confus

Pour les acronymes, l’élément acronym est rendu obsolète au profit de l’abréviation, abbr. La différence d’usage entre les deux est qu’un acronyme est une abréviation qui se prononce comme un mot (exemples : LASER, OTAN...).

3. La mise en forme du texte

Les éléments basefont, font, big, center, strike, tt et u sont obsolètes... depuis longtemps déjà, au profit de mises en forme CSS beaucoup plus...

Les éléments de texte redéfinis

1. La spécification HTML5

Pour le HTML5, certains éléments HTML, plutôt que d’être rendus obsolètes, ont vu leur rôle redéfini.

Vous pouvez trouver la liste des éléments redéfinis dans le document de travail intitulé HTML : The Markup Language (an HTML language reference), en Working Draft au 11 octobre 2012, (https://www.w3.org/TR/2012/WD-html-markup-20121011/spec.html).

images/C08-001N.png

Dans la liste des éléments HTML, les nouveaux éléments sont indiqués avec le cartouche orange NEW et les éléments redéfinis sont indiqués avec le cartouche violet CHANGED.

En voici un extrait :

images/C08-002N.png

2. L’élément <b>

L’élément b servait à afficher à l’écran un mot en gras, sans qu’il y ait une connotation sémantique. L’élément strong l’a vite remplacé, apportant une notion sémantique et une utilité pour la synthèse vocale, pour les pages conformes à l’accessibilité des sites web.

En HTML5, l’élément b indique qu’une partie d’un texte se différencie visuellement du reste du texte, mais sans qu’il y ait une importance plus grande. Si c’est le cas, il faut utiliser strong.

Voilà la définition de l’élément b dans la spécification HTML5 : « The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate...

La mise en colonne du texte avec les CSS3

Nouveauté très appréciable des CSS3, nous avons la possibilité de mettre un texte en colonnes. C’est un module spécifique des CSS3 qui propose cette fonctionnalité : CSS Multi-column Layout Module Level 1 (http://www.w3.org/TR/css-multicol-1) qui est en Working Draft au 28 mai 2018.

À l’écriture de ce livre (décembre 2018), la reconnaissance des diverses propriétés de ce module est bonne. Voici le tableau de compatibilité de Can I Use :

images/new-033.png

La première propriété que nous allons gérer est tout simplement la largeur des colonnes et leur nombre.

  • La propriété column-count permet d’indiquer combien de colonnes vous souhaitez avoir.

  • La propriété column-width permet de gérer la largeur de chaque colonne.

  • La propriété column-gap permet d’indiquer l’espace entre chaque colonne (la gouttière, en publication imprimée).

Exemple pour mettre en colonne une boîte <div>.

Voilà le style CSS :

#colonnes3 { 
    width: 470px; 
    column-count: 3; 
    column-width: 150px; 
    column-gap: 10px; 
    padding: 10px; 
    border: 1px solid #000; 
} 
#colonnes p { 
    margin: 0
}  

Voilà le code HTML de la boîte <div> :

<div id="colonnes3"> 
    <p>Integer posuere erat...</p> 
</div> 

Voilà l’affichage :

images/chap09-017.png

Vous pouvez utiliser la propriété columns qui permet d’avoir...

La mise en forme du contenu avec les CSS3

1. Le module CSS3

C’est le module CSS Text Module Level 3 qui va nous permettre de mettre en forme le contenu des conteneurs de texte. Ce module est encore en Working Draft, au 12 décembre 2018 : https://www.w3.org/TR/css-text-3/

images/new-036.png

Les propriétés sont groupées en plusieurs catégories : les transformations, la gestion des espaces blancs, les césures en fin de ligne et les alignements. Toutes ces propriétés ne sont pas parfaitement reconnues par les navigateurs actuels, en décembre 2018. Il convient d’en vérifier la reconnaissance sur le site Can I Use.

2. Les propriétés reconnues

La propriété text-transform permet de changer de casse, de passer en capitales, en majuscules et en minuscules. Pas de soucis d’implémentation et de reconnaissance dans tous les navigateurs.

Comme avec les CSS 2.1, nous retrouvons la propriété text-align, avec les valeurs classiques : letf, center, right et justify. Nous avons en plus la valeur : justify-all qui permet d’avoir une justification de la dernière ligne du texte. Mais cette dernière valeur prometteuse n’est reconnue par aucun navigateur.

La propriété text-indent permet d’indiquer le retrait de première ligne. L’implémentation est complète depuis les CSS 2.1.

Les propriétés word-spacing et letter-spacing permettent de gérer l’espace entre les mots et les lettres. L’implémentation est complète depuis les CSS 2.1.

Les propriétés de gestion des blancs avec la propriété white-space sont similaires aux CSS 2.1....

La décoration du texte avec les CSS3

1. Le module CSS

Le module CSS Text Decoration Module Level 3 nous permet de décorer le texte avec des soulignés, des barrés, des surlignés que nous pouvons paramétrer : styles des traits, couleur... Ce module est en Candidate Recommendation au 3 juillet 2018 : https://www.w3.org/TR/css-text-decor-3/

Son implémentation est assez faible dans les navigateurs.

images/new-039.png

Microsoft Internet Explorer et Edge ne le reconnaissent pas. Google Chrome, Firefox et Opera ne le reconnaissent que partiellement. Apple Safari le reconnaît partiellement avec utilisation de son préfixe -webkit-.

2. Les lignes de décoration

La propriété en syntaxe courte text-decoration permet d’ajouter des soulignés, des barrés et des surlignés à une sélection de texte.

Voici les propriétés individuelles :

  • text-decoration-line spécifie le type de ligne : none, underline, overline, line-through ou blink.

  • text-decoration-color indique la couleur de la ligne.

  • text-decoration-style permet d’indiquer le style de la ligne : solid, double, dotteddashed ou wavy.

Voici un exemple simple.

Le code CSS :

.souligne-double-rouge { 
    -webkit-text-decoration-line: underline; 
    -webkit-text-decoration-color: red; 
    -webkit-text-decoration-style: double; 
    text-decoration-line: underline; 
    text-decoration-color: red; 
    text-decoration-style: double; 
} 

Le code HTML :

<p>Aenean lacinia <span class="souligne-double-rouge">bibendum nulla
</span>...

Les polices de caractères avec les CSS3

1. Le module CSS

Le module CSS Fonts Module Level 3 va nous permettre de mettre en forme les polices de caractères de nos pages web. Ce module est finalisé et il est donc en Recommendation au 20 septembre 2018 octobre 2013 : https://www.w3.org/TR/css-fonts-3/

2. Les familles de caractères

La propriété font-family est inchangée, son utilisation reste la même qu’avec les CSS 2.1.

3. La graisse des caractères

Vous le savez, vous avez accès aux valeurs normal, bold, bolder et lighter pour définir la graisse des caractères. Mais depuis les CSS2 déjà, le W3C proposait une échelle relative pour harmoniser les termes utilisés qui sont très différents selon les fondeurs. C’est une échelle qui va de 100 à 900.

  • 100 = Thin

  • 200 = Extra Light (Ultra Light)

  • 300 = Light

  • 400 = Normal

  • 500 = Medium

  • 600 = Semi Bold (Demi Bold)

  • 700 = Bold

  • 800 = Extra Bold (Ultra Bold)

  • 900 = Black (Heavy)

4. La largeur des caractères

La propriété font-stretch permet de gérer la chasse, la largeur des caractères pour avoir des caractères étrécis (condensed) ou étendus (expanded). Les valeurs acceptées sont : Ultra Condensed, Extra Condensed, Condensed, Semi Condensed, Normal, Semi Expanded, Expanded, Extra Expanded, Ultra Expanded. Seul Apple Safari ne reconnaît pas cette propriété (en juin 2016).

5. Les styles des caractères

La propriété font-style est inchangée et accepte les mêmes valeurs qu’en CSS 2.1 : normal, italic et oblique.

6. La taille des caractères

Vous le savez, il existe deux « formats » pour définir les tailles des caractères :

  • les tailles fixes : cm, mm, in, pt... Utiliser ces tailles n’est pas conseillé, car elles ne sont pas conformes aux préconisations de l’accessibilité des sites web. Cela pose des problèmes pour le redimensionnement des textes dans les pages web pour les personnes ayant un handicap visuel. 

  • les tailles relatives : em et %. Ces unités relatives sont préférables car elles sont redimensionnables sans problème. Pour tous les navigateurs, les tailles sont relatives à la taille par défaut des paragraphes...