Le HTML5 et les CSS3 pour le texte

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

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...

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).

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 :

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...

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/

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....

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.

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 :

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>...

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.

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 :