Le web et les espaces

Nous savons que les espaces ne sont pas toujours de même taille en fonction du contexte.
Pour rappel, une espace fine sépare la ponctuation haute du mot qui la précède et une espace normale est utilisée dans tous les autres cas, sans oublier les espaces insécables.
Pour plus d’information, voir la page consacrée aux espaces en typographie.

En HTML, il existe quelques caractères spéciaux qui permettent d’insérer certaines espaces précises dans le texte à mettre en forme :

Références des espaces en HTML

Espace (entre \| et \|)	Code HTML	Description
\| \|		espace insécable
\| \|	&ensp;	espace demi cadratin
\| \|	&emsp;	espace cadratin
\| \|		espace fine

Sachez que ces espaces sont interprétées différamment selon les navigateurs.
Pour exemple et d’après ce que je peux tester sur mon propre matériel :

Firefox (3.6.16) sur MAC :

géré	non-géré
espace insécable	espace cadratin
espace demi cadratin	espace fine

Safari (4.1.3) sur MAC :

géré	non-géré
espace insécable	espace fine
espace demi cadratin
espace cadratin

Internet Explorer (5.2.3) sur MAC :

géré	non-géré
espace insécable	espace demi cadratin
	espace cadratin
	espace fine

Face à ce constat, j’utilise une class CSS pour chaque espace, et je l’applique à une espace insécable via la balise HTML <span> </span>. Ceci me premet tous les réglages qui me conviennent pour un rendu assuré quelque soit le navigateur utilisé.
Par exemple, pour une espace fine :

CSS : .fine {font-size: 25%;}

HTML : Ma liste des courses<span class="fine"> </span>: pain, fromage, salade, vin, …

Retour au sommaire