Le Web a sa propre typographie

Les feuilles de style
cuy copyleft
  See You Why?  

 

Chapitre pr�c�dent
Le système informatique (04) 		        Retour au sommaire
Sommaire (00) 		        Chapitre suivant
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("https://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%) ;
 
feuille de style
  Les diverses r�gles qui constituent la feuille de style sont incorpor�es dans la page HTML � l'aide de la balise STYLE :  

<style type="text/css">
 <!--
  td.A { font-size: 10pt; text-align: center }
 -->
</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

Chapitre pr�c�dent
Le système informatique (04) 		        Retour au sommaire
Sommaire (00) 		        Chapitre suivant
Le format PDF (06)