CUY - typographie du web - feuilles de style et HTML

Le Web a sa propre typographie

Les feuilles de style

copyleft
See You Why?


Le système informatique (04)	Sommaire (00)	Le format PDF (06)

Définition, structure et fonctionnalités des feuilles de style

Définition.
Les logiciels qui manipulent du texte (traitement de texte, tableur, et logiciel de mise en page) utilisent les styles. Pour que le HTML ne fasse plus exception à la règle, le W3C lui a rajouté cette fonctionnalité sous forme d'un complément appelé "feuilles de style en cascade" (en anglais : "Cascading Style Sheets", d'où le sigle CSS).

Les styles peuvent être incorporés au sein du document HTML de manières différentes :

Style du document : déclaré dans l'en-tête, c'est-à-dire au sein des balises <HEAD> et </HEAD>
exemple :

<head>

       <title>CUY - orthotypographie majuscule capitale accent</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <meta name="keywords"
           content="orthotypographie, enseignant, régendat, régent, instituteur, primaire, préscolaire, gardienne, 
           maternelle, typographie, capitales, 
           majuscules, accent, cédille, cuy">
       <STYLE TYPE="TEXT/CSS">
       <!--
                body { font-family: sans-serif, times new roman, courier, Verdana, Helvetica, Arial, sans-serif}
                .fine { font-size: 50%; }
        -->
       </STYLE>

</head>

Style en ligne, c'est-à-dire en tant qu'attribut des balises
exemple:
<p style="color:red; margin-left:20%; background: #336633; font-size: 200%">CUY vous explique tout</p>
qui engendre le texte:

CUY vous explique tout

Style externe, déclaré dans un fichier à part dont l'extension est .css
Cette procédure se fait en deux temps
1/ créer un fichier texte, d'extension .css et contenant les instructions de syle
exemple (repris de nos pages relatives à la comptabilité) :

A:link,A:visited,A:active{ 
        color: #557799; text-decoration: underlined; 
}
a:hover{
        background:#33BB00 ;color:white
}

BODY { 
        background-color: #EEEEEE;      
        margin-left : 70px; 
        margin-right: 50px;
        line-height=100%;
        font-family: 'Comic Sans MS', Times, Arial, Helvetica, sans-serif; 
        font-size: 20px; 
        font-weight: normal;
        text-indent: +0px;
}
h1 {
        line-height:280%; 
        margin-top :20px; 
        margin-bottom:20px;
        color: #B3B3B3; 
        background-color: #222222; 
        text-align: center; 
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 20pt; 
        font-weight:   bold;
}
h2 {
        line-height:220%; 
        margin-left : 50px; 
        margin-right: 30px; 
        color: #D280D2; 
        background-color: #444400; 
        text-align: center; 
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 18pt; 
        font-weight:   bold;
}
h3 {
        line-height:160%; 
        margin-left : 80px ; 
        margin-right: 40px; 
        color: #F2A4F2; 
        background-color: #330033; 
        text-align: center; 
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 14pt; 
        font-weight: bold;
}
h4 {
        line-height:140%; 
        margin-left : 100px ; 
        margin-right: 60px; 
        color: #A9CCA9; 
        font-family: Arial, Helvetica, sans-serif; 
        background-color: #224422; 
        text-align: center; 
        font-size: 13pt; 
        font-weight: bold;
}
h5 {
        line-height:120%; 
        margin-left : 110px ; 
        margin-right: 70px; 
        color: #AADDAA; 
        font-family: Arial, Helvetica, sans-serif; 
        background-color: #112211; 
        text-align: center; 
        font-size: 12pt; 
        font-weight: normal;
}
h6 {
        color: #000000; 
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 10pt; 
        font-weight: normal;
}
.n2 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 20px;
        font-style: normal;
        text-indent: +0px;
        line-height: normal;
        font-weight: normal;
        color: #332233;
        margin-left : 50px;
        margin-right: 30px;
}
.n3 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-style: normal;
        line-height: normal;
        text-indent: +0px;
        font-weight: normal;
        color: #224422;
        margin-left : 80px;
        margin-right: 40px;
}
.n4 {
        font-family: Helvetica, Verdana, Arial, sans-serif;
        font-size: 17px;
        font-style: normal;
        line-height: normal;
        text-indent: +0px;
        font-weight: normal;
        color: #523452;
        margin-left : 100px;
        margin-right: 60px;
}
.n5 {
        font-family: Helvetica, Verdana, Arial, sans-serif;
        font-size: 16px;
        font-style: normal;
        line-height: normal;
        text-indent: +0px;
        font-weight: normal;
        color: #624462;
        margin-left : 110px;
        margin-right: 70px;
}
.fine {
        font-size: 40%;
}

2/ dans chaque page HTML de son site, faire appel à cette feuille de style
exemple:

           <head><title>CUY - comptabilité - TVA</TITLE>
               <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
               <meta name="keywords"
               content="école normale, pédagogie, pédagogique, enseignement supérieur, professeur, enseignant, régendat, 
               régent, comptabilité, tva, due, à payer, dette, à récupérer, créance, taux, TVAC, HTVA, TTC, 
               en dehors, en dedans, administration, déductible, facturation, 
               remboursement, exercices, solutions, compte, cuy">
               <link href="cpta.css" rel="stylesheet" type="text/css">
           </head>
           <body background="../../images/FondClem2.jpg">

Style importé, déclaré dans un fichier à part dont l'extension est .css, mais ce fichier peut se trouver 'ailleurs', soit sur votre site, soit sur un site extérieur,
exemple:

<head>
    <title>CUY - espace : d&eacute;finitions</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link type="http://www.cnrtl.fr/application/opensearchdescription+xml" rel="search" 
           title="Portail Lexical - CNRTL" href="http://www.cnrtl.fr/portail/opensearch.xml">
    <link rel="stylesheet" type="text/css" href="http://francois.gannaz.free.fr/Littre/style/generic.css" 
           title="standard">
    <link rel="stylesheet" type="text/css" href="http://francois.gannaz.free.fr/Littre/style/xmlittre.css" 
           title="standard">
    <link rel="alternate stylesheet" type="text/css" href="http://francois.gannaz.free.fr/Littre/style/xmlittre_sc.css" 
           title="nocit">
    <LINK REL="stylesheet" TYPE="text/css" HREF="http://fr.encarta.msn.com//xStylesheets/DictResults.css">
    <STYLE TYPE="TEXT/CSS">
         <!--
     body {  font-family: sans-serif, times new roman, courier, Verdana, Helvetica, Arial, sans-serif}
           .fine { font-size: 5%; }
    -->
    </STYLE>
</head>
<body background="../pix/FondClem2.jpg" onload="initPortail();">

Attention, lorsque plusieurs feuilles de style externes sont appelées, on peut obtenir ce que l'on appelle une cascade de styles, c'est-à-dire une combinaison de styles pour divers éléments HTML. Si plusieurs styles concernent le même élément, seul le dernier style sera conservé.

ou

<head>
    <title>CUY - espace : d&eacute;finitions</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    @import url("http://cuy.be/cours/cpta/cpta.css">
    <STYLE TYPE="TEXT/CSS">
            <!--
     body {  font-family: sans-serif, times new roman, courier, Verdana, Helvetica, Arial, sans-serif}
           .fine { font-size: 5%; }
    -->
    </STYLE>
</head>
<body background="../pix/FondClem2.jpg" onload="initPortail();">

Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec des éléments indiquant d'une part le type du document, c'est-à-dire la version des recommandations HTML et CSS utilisées dans la page, et d'autre part les styles à proprement parler.

Il y a eu deux versions successives de ces feuilles de style, respectivement intitulées CSS1 et CSS2. L'essentiel de la typographie est défini dans CSS1, la deuxième version concernant plus particulièrement l'impression multi-support.

Structure.
Une feuille de style se présente de la manière suivante (figure ci-dessous) :

		elle est constituée d'un ensemble de règles précisant la manière de présenter une page web ;
		chaque règle est constituée d'un sélecteur, suivi d'un bloc de déclarations, placé entre accolades. Le sélecteur précise la portion de texte à laquelle s'appliquent les déclarations ;
		chaque déclaration est constituée d'un identificateur, suivi d'une valeur. Chaque déclaration est séparée de la suivante par un point-virgule. L'identificateur décrit la propriété concernée (ex : la taille des caractères), ici font-size, suivi d'un deux-points, et la valeur -- comme son nom l'indique -- la grandeur attribuée à l'identificateur (ex. : 10 pt ou 10 px ou 150%) ;

Les diverses règles qui constituent la feuille de style sont incorporées dans la page HTML à l'aide de la balise STYLE :

On place des balises de remarque afin d'éviter que les navigateurs anciens, qui ne reconnaissent pas les feuilles de style, n'affichent les règles au lieu de les appliquer.

Fonctionnalités.
En matière de typographie, la norme CSS offre pratiquement les mêmes fonctionnalités qu'un bon logiciel de mise en page. C'est ainsi que l'on peut définir :

		la police utilisée, soit sous forme générique, soit sous forme spécifique (en indiquant le nom de la police, comme dans le HTML). Le téléchargement, total ou partiel d'une police, est même prévu ;
		le style : normal ou italique (déjà dans le HTML), ou oblique ;
		la casse (ex : transformation de minuscules en majuscules), et les petites majuscules ;
		les dimensions des caractères (taille, largeur, graisse), et leur couleur ;
		la décoration de texte : souligné, barré, clignotant (déjà dans le HTML) et surligné ;
		le positionnement vertical : indice, exposant (déjà dans le HTML) ;
		le crénage (distance entre caractères et la distance entre les mots ;
		l'interlignage (distance entre lignes) ;
		l'ombre du texte (CSS2).

Application.
L'implémentation des styles dans les navigateurs est loin d'être parfaite. Aucun navigateur ne met en oeuvre l'ensemble de toutes les spécifications CSS1, et les deux navigateurs ignorent assez bien CSS2. De ce fait, comme le montre une étude récente, il faut être prudent dans l'utilisation des feuilles de style, du moins actuellement. Si vous souhaitez tester la manière dont réagit votre navigateur, rendez-vous sur ce testeur de conformité CSS2.

En ce qui concerne la typographie, nos visiteurs jugeront par eux-mêmes. Pour chaque fonctionnalité examinée, nous avons noté le comportement des deux navigateurs, en particulier celui de leur dernière version. Mais attention ! la majorité des utilisateurs de Netscape sont restés à la version 4.75 (jugée meilleure que la première version 6), tandis que la majorité des utilisateurs d'Internet Explorer en est encore à la version 5.5.

La police : nature et téléchargement

Polices génériques.
Il en existe cinq : avec ou sans empattements, à chasse fixe, fantaisie, cursive. Le texte ci-dessous illustre leur aspect. Aucun problème avec IE ni NS qui affichent correctement les polices fantaisie et cursive.

Police avec empattements : serif
Police sans empattements : sans serif
Police à chasse fixe : monospace
Police fantaisie : fantasy
Police cursive : cursive

Le tableau ci-dessus est obtenu par les instructions HTML suivantes:

            <span style="font-family: serif">Police avec empattements : serif</span><br>
            <span style="font-family: sans-serif">Police sans empattements : sans serif</span><br>
            <span style="font-family: monospace">Police à chasse fixe : monospace</span><br>
            <span style="font-family: fantasy">Police fantaisie : fantasy</span><br>
            <span style="font-family: cursive">Police cursive : cursive</span>

Polices spécifiques.
Celles-ci peuvent être précisées par leur nom, comme en HTML, mais avec la syntaxe propre aux feuilles de style.

Téléchargement.
À la différence du HTML, les feuilles de style prévoient le téléchargement de polices. Ce dernier peut même être partiel -- les seuls caractères latins, par exemple, dans une police qui comprend également des caractères cyrilliques et arabes. Les navigateurs, malheureusement, n'implémentent pas cette fonctionnalité, comme le montre l'exemple suivant.

La première ligne du texte ci-dessous fait appel à la police Outwrite (qui n'est pas courante et ne se trouve probablement pas sur votre machine), la deuxième ligne fait appel à la police par défaut, et la troisième ligne à la police Arial, qui se trouve sur toutes les machines. Si les navigateurs implémentaient le téléchargement de police, le fichier correspondant (Outwrite.ttf, qui pèse 30 Ko), serait chargé avec la présente page web, et les deux premières lignes ci-dessous vous apparaîtraient différentes. Vous constaterez qu'il n'en est rien, quelle que soit la version de votre navigateur.

Téléchargement de police ?
Pas de téléchargement de police, police par défaut
Police Arial, présente sur toutes les machines

Alors voilà la syntaxe de la feuille de style:

            <span style="font-family:Outwrite; src: url("/html/typoweb/Outwrite.ttf")"> Téléchargement de police ?</span><br>
            Pas de téléchargement de police, police par défaut<br>
            <span style="font-family: Arial; font-size: 12">Police Arial, présente sur toutes les machines</span>

La casse, le style

La transformation de la casse.
Les feuilles de style permettent de modifier la casse d'un texte, quelle que soit sa valeur d'origine. Comme le montrent les exemples ci-dessous, on dispose de quatre possibilités :

Écrire en petites majuscules
TRANSFORMER les MAJUSCULES en MINUSCULES
Transformer les minuscules en majuscules
transformer les initiales de chaque mot en majuscule

Pas de triche, voyez la source :

            <span style="font-variant: small-caps">Écrire en petites majuscules</span><br>
            <span style="text-transform: lowercase">TRANSFORMER les MAJUSCULES en MINUSCULES</span><br>
            <span style="text-transform: uppercase">Transformer les minuscules en majuscules</span><br>
            <span style="text-transform: capitalize">transformer les initiales de chaque mot en majuscule</span>

Tout marche dans IE5 ou 6, et dans NS6, mais pas dans NS4 qui ignore les petites majuscules.

Le style.
Les navigateurs ne font pas la différence entre les valeurs "italique" et "oblique". De plus, NS 4 ne reconnaît pas la valeur "oblique".

Texte normal
Texte italique
Texte oblique

Alors voilà la syntaxe de la feuille de style:

            Texte normal<br>
            <span style="font-style: italic">Texte italique</span><br>
            <span style="font-style: oblique">Texte oblique</span>

Les propriétés du caractère : corps, chasse, graisse et couleur

Le corps (ou taille) des caractères.
Le texte ci-dessous montre que les feuilles de style ne sont pas limitées au sept tailles standard du HTML. On notera que les tailles inférieures à 8 points sont pratiquement illisibles à l'écran.

Caractères de 6 pts
Caractères de 8 pts
Caractères de 10 pts
Caractères de 20 pts
Caractères de 30 pts
Caractères de 40 pts
Caractères de 50 pts

Alors voilà la syntaxe de la feuille de style:

            <span style="font-size: 6pt">Caractères de 6 pts</span><br>
            <span style="font-size: 8pt">Caractères de 8 pts</span><br>
            <span style="font-size: 10pt">Caractères de 10 pts</span><br>
            <span style="font-size: 20pt">Caractères de 20 pts</span><br>
            <span style="font-size: 30pt">Caractères de 30 pts</span><br>
            <span style="font-size: 40pt">Caractères de 40 pts</span><br>
            <span style="font-size: 50pt">Caractères de 50 pts</span>

La chasse (ou largeur) des caractères.
Les feuilles de style permettent - du moins dans leurs spécifications - le réglage de la largeur des caractères. Les navigateurs n'en tiennent pas compte, comme vous pouvez le constater sur le texte ci-dessous.

Caractères condensés ?
Caractères normaux
Caractères étendus ?

Alors voilà la syntaxe de la feuille de style de format CSS2 (ne vous étonnez pas si vous ne voyez aucune différence, c'est l'une des syntaxe rarement admise par les navigateurs) :

            <span style="font-stretch: condensed">Caractères condensés ?</span><br>
            <span style="font-stretch: normal">Caractères normaux</span><br>
            <span style="font-stretch: expanded">Caractères étendus ?</span>

La graisse (ou épaisseur) des caractères.
Les feuilles de style permettent également de définir la graisse d'un caractère, c'est à dire son épaisseur. La graduation va de 100 à 900. La valeur 300 correspond au caractère normal, et la valeur 700 au caractère gras. Le texte ci-dessous montre comment les navigateurs tiennent compte des indications de graisse : sur trois niveaux (normal, gras, et très gras) pour IE, sur deux niveaux (normal ou gras) pour NS. On peut se demander pourquoi le W3C a prévu 9 degrés de graisse pour un media (l'écran du moniteur) qui ne peut pas en afficher plus de trois ; sans doute a-t-il pensé à l'impression multi-support.

graisse = 100
graisse = 200
graisse = 300
graisse = 400
graisse = 500
graisse = 600
graisse = 700
graisse = 800
graisse = 900

Alors voilà la syntaxe de la feuille de style:

            <span style="font-weight: 100">graisse = 100</span><br>
            <span style="font-weight: 200">graisse = 200</span><br>
            <span style="font-weight: 300">graisse = 300</span><br>
            <span style="font-weight: 400">graisse = 400</span><br>
            <span style="font-weight: 500">graisse = 500</span><br>
            <span style="font-weight: 600">graisse = 600</span><br>
            <span style="font-weight: 700">graisse = 700</span><br>
            <span style="font-weight: 800">graisse = 800</span><br>
            <span style="font-weight: 900">graisse = 900</span>

La couleur des caractères.
Les feuilles de style permettent de définir la couleur des caractères, mais le HTML en fait autant (avec une syntaxe différente) :

Texte de couleur rouge
Texte de couleur verte
Texte de couleur bleue

Alors voilà la syntaxe de la feuille de style:

            <span style="color: rgb(255,0,0)">Texte de couleur rouge</span><br>
            <span style="color: rgb(0,255,0)">Texte de couleur verte</span><br>
            <span style="color: rgb(0,0,255)">Texte de couleur bleue</span>

La décoration, le marquage, le masquage, l'encadrement

La décoration.
Le HTML permet de souligner, barrer et faire clignoter du texte. Les feuilles de style ajoutent le surlignement (ainsi que la possibilité de souligner et surligner simultanément). Voici ce que l'on obtient (dans IE et dans NS6, le texte ne clignote pas) :

Texte souligné, Texte surligné, Texte souligné et surligné
Texte barré, Texte clignotant

Alors voilà la syntaxe de la feuille de style:

            <span style="text-decoration: underline">Texte souligné</span>,  <span style="text-decoration: overline">Texte surligné</span>,

                               <span style="text-decoration: underline overline">Texte souligné et surligné</span><br>
            <span style="text-decoration: line-through">Texte barré</span>,  <span style="text-decoration: blink">Texte clignotant</span>

Le marquage.
Il est possible de marquer une portion de texte avec la couleur de son choix, comme on le fait sur du papier avec un "marqueur". L'exemple ci-dessous montre le résultat obtenu :

Texte marqué en jaune à titre d'exemple

Alors voilà la syntaxe de la feuille de style:

            Texte marqué en <span style="background-color: rgb(255,255,0)">jaune</span> à titre d'exemple

Le masquage.
Il est possible de masquer du texte, comme le montre l'exemple suivant, lequel fonctionne avec IE 5 et NS 6, et suivants :

Le mot entre parenthèses (non visible ?) est masqué

Alors voilà la syntaxe de la feuille de style:

            Le mot entre parenthèses (<span style="visibility: hidden">non visible ?</span>) est masqué

Cette procédure permet de faire en sorte qu'un mot soit présent dans une page web sans que l'internaute le voie. On peut obtenir le même résultat en HTML, en utilisant du texte de même couleur que le fond de la page. Certains concepteurs de site s'en servent pour faire du "spam indexing". Cette façon de procéder n'est pas appréciée des moteurs de recherche, qui vont jusqu'à refuser d'indexer les pages correspondantes.

L'encadrement.
On peut encadrer du texte, comme devrait le montrer l'exemple ci-dessous :

Le mot suivant est encadré à titre d'exemple

Alors voilà la syntaxe de la feuille de style:

            <nobr>Le mot suivant est <span style="border: 1px solid rgb(128,128,128)"> encadré </span> à titre d'exemple</nobr>

En fait, on constate que cela ne marche pas dans IE 5, que NS 4 s'obstine à faire des retours à la ligne avant et après l'encadrement (malgré la présence d'une balise <nobr>), mais que IE6 et NS6 traitent l'exemple correctement.

Le positionnement vertical : indice et exposant, interlignage

Indice et exposant.
Comme le HTML, les feuilles de style permettent de placer du texte en indice et en exposant (et de le rendre plus petit). Cela fonctionne dans IE 5 et dans NS 6, mais pas dans NS 4, comme le montre l'exemple ci-dessous :

Texte en indice Texte en exposant

Alors voilà la syntaxe de la feuille de style:

            Texte en <span style="vertical-align: sub; font-size: smaller">indice</span>      

                        Texte en <span style="vertical-align: super; font-size: smaller">exposant</span>

Interlignage.
L'interlignage du texte ci-dessous est réglé à l'aide d'un style. Si vous disposez d'une version relativement récente de l'un des deux navigateurs, vous observerez que l'interligne varie comme précisé. Avec une version plus ancienne (ex : une version 3 de Navigator), vous n'observerez aucune différence.

Interligne
normal

Interligne
de 140 %

Interligne
de 180 %

Interligne
de 220 %

Alors voilà la syntaxe de la feuille de style:

          <td nowrap align="center" valign="middle">Interligne<br>
            normal</td>
          <td nowrap>&nbsp; &nbsp; &nbsp;</td>
          <td align="center" valign="middle">
            <p style="line-height: 140%">Interligne<br>
              de 140 %</td>
          <td nowrap>&nbsp; &nbsp; &nbsp;</td>
          <td align="center" valign="middle">
            <p style="line-height: 180%">Interligne<br>
              de 180 %</td>
          <td nowrap>&nbsp; &nbsp; &nbsp;</td>
          <td align="center" valign="middle">
            <p style="line-height: 220%">Interligne<br>
              de 220 %</td>
        </tr>

Pour pallier cette dernière difficulté, certains auteurs parsèment leur texte d'espaces définis dans une police de taille supérieure. Il faut une fameuse patience pour agir ainsi ! De plus, l'internaute peut s'étonner de voir que tous les espaces n'ont pas la même largeur. Néanmoins, voici ce que l'on obtient avec cette méthode (le chiffre entre parenthèses indique la taille de l'espace situé entre les deux derniers mots).

Cet interligne
est normal

Cet interligne
est accru (4)

Cet interligne
est accru (5)

Cet interligne
est accru (6)

Alors voilà la syntaxe de la feuille de style:

          <td align="center">Cet interligne<br>
            est normal</td>
          <td>&nbsp; &nbsp; &nbsp;</td>
          <td align="center">Cet interligne<br>
            est<font size="4">&nbsp;</font>accru (4)</td>
          <td>&nbsp; &nbsp; &nbsp;</td>
          <td align="center">Cet interligne<br>
            est<font size="5">&nbsp;</font>accru (5)</td>
          <td>&nbsp; &nbsp; &nbsp;</td>
          <td align="center">Cet interligne<br>
            est<font size="6">&nbsp;</font>accru (6)</td>

Le positionnement horizontal : crénage et distance entre mots

Le crénage.
Le crénage du texte ci-dessous est réglé à l'aide d'un style. De ligne en ligne, vous devriez voir la distance entre caractères s'accroître de manière régulière. C'est bien ce que vous observerez si vous utilisez IE5 ou NS6. Avec NS4, vous ne verrez pas de différence d'une ligne à l'autre :

Texte sans réglage du crénage.
Texte avec réglage du crénage (1 pt).
Texte avec réglage du crénage (2 pts).
Texte avec réglage du crénage (3 pts).
Texte avec réglage du crénage (4 pts).
Texte avec réglage du crénage (5 pts).

Alors voilà la syntaxe de la feuille de style:

            Texte sans réglage du crénage.<br>
            <span style="letter-spacing: 1pt">Texte avec réglage du crénage (1 pt).</span><br>
            <span style="letter-spacing: 2pt">Texte avec réglage du crénage (2 pts).</span><br>
            <span style="letter-spacing: 3pt">Texte avec réglage du crénage (3 pts).</span><br>
            <span style="letter-spacing: 4pt">Texte avec réglage du crénage (4 pts).</span><br>
            <span style="letter-spacing: 5pt">Texte avec réglage du crénage (5 pts).</span>

La distance entre les mots.
IE5 et NS4 ne règlent pas la distance entre les mots, mais IE6 et NS6 la règlent, comme le montre l'exemple ci-dessous.

Mots espacés normalement
Mots plus espacés ?

Alors voilà la syntaxe de la feuille de style:

            <span style="word-spacing: normal">Mots espacés normalement</span><br>
            <span style="word-spacing:15pt">Mots plus espacés&nbsp;?</span>

Un site diablement intéressant permettant de tester l'affichage des polices de caractères selon le style, la taille, les différents navigateurs... Font size testing ~ Library & tools ~ Limitless Innovations


Le système informatique (04)	Sommaire (00)	Le format PDF (06)