MISE EN PAGE GLOBALE
DETERMINÉE PAR UN CONTENEUR
CADRE DU TEXTE, DIMENSION DES CARACTÈRES


Nous allons définir des caractéristiques pour tout le fichier grâce à un div spécifique dont le style sera indiqué dans le fichier css. Nous avons vu qu'un style peutt se définir par exemple de la manière suivante:

.monstyle
{
font-size:16px;
.........
}

et qu'il était appelé dans la page créée de la manière suivante:

<div class="monstyle">

Le div que nous allons définir, pour des raisons qui seront expliquées plus tard, sera, lui, déclaré dans le fichier css de la manière suivante:

#monstyle
{
font-size:16px;
.........
}

et appelé de la manière suivante:

<div id="monstyle">

Ce div, spécifié ainsi, devra être appelé une seule fois dans le fichier créé.

Définissons donc un div de nature id - que nous nommerons par commodité "conteneur" - comportant les caractéristiques suivantes qui seront justifiées ci-après.

-à placer dans le fichier css

#conteneur
{
margin-left:auto;
margin-right:auto;
font-size:16px;
width:90%;
max-width:500px;
}

-et dans le fichier en cours:

<div id="conteneur"> (au début du fichier après l'ouverture de body <body>)
</div> (en fin de fichier avant la fermeture de body: </body>)

-margin-left:auto;margin-right:auto; indique que le conteneur est centré

-font-size:16px La dimension des caractères (déterminée par la commande de style font-size) qui soit compatible aussi bien avec un pc qu'avec un smartphone ou une tablette semble être de 16px, sans précision de police particulière. Au-dessus, la taille apparaît trop grande sur un pc, au-dessous elle apparaît trop petite sur un smartphone.

-width:90% indique que le cadre défini par le conteneur va occuper 90% de la largeur de la fenêtre, soit 5% de marge de chaque côté. L'indication en pourcentage plutôt qu'en valeur absolue de pixel permet, sur une tablette ou un smartphone, d'obtenir que le cadre de texte occupe le maximum de place (en déduisant les marges réduites à 10%). La grosseur des caractères se trouve quasiment augmentée au maximum et cela évite au lecteur de devoir taper 2 fois sur l'écran de la tablette pour faire coïncider le cadre de texte avec la dimension maximale de l'écran.

-max-width:500px Cette commande permet d'obtenir des lignes au maximum de 500px, même si la fenêtre est plus grande. Cette dimension correspond à une lecture agréable (soit 70 caractères environ par ligne, ce qui est approximativement la dimension d'une ligne sur un livre papier format courant). Par ailleurs, de nombreuses personnes ne savent pas modifier la taille de la fenêtre du navigateur et par conséquent le laissent à sa dimension maximale sur un pc de bureau à grand écran. Elle auraisent sans cette disposition des lignes exagérément longues.

On peut vérifier sur un grand écran de pc ce qui se produit, en prenant comme exemple la présente page, construite dans un conteneur correspondant à ce qui vient d'être énoncé (à la seule différence qu'on a ajouté la commade de style text-align:justify pour mieux faire apparaître le cadre de texte).

-donc si on diminue la largeur de la fenêtre du navigateur (en utilisant la poignée à droite ou à gauche), les lignes diminuent de longeur sans que les marges disparaissent. Elles restent proportionnelles à la dimension totale

-si on augmente au contraire la largeur, il arrive un moment où, la dimension de 500px étant attente, la longueur des lignes n'augmente plus et le cadre du texte reste centré par rapport à la fenêtre.

Sur la tablette ou smartphone, en position portrait, le cadre du conteneur occupe généralement tout l'espace en largeur. Si on tourne l'appareil en position paysage, la dimension des caractères ne change pas et la largeur du conteneur non plus, de sorte que les marges augmentent de taille.

Remarque: On peut moduler les commandes du conteneur en fonction de ce qu'on veut obtenir spécifiquement pour une page. Par exemple, si on veut inclure des photographies, 500px peut s'avérer un peu juste, on préfèrera 600px, voire 700px...

Remarque: Les adaptations à la lecture sur tablette et smartphone sont conseillées expressément par Google. Elle sont même nécessaires pour que les pages impliquées apparaissent en cas de recherche sur ces appareils.

Remarque: Sur tablette et smartphone, en position paysage, on a la ressource du pinch-in (loupe en écartant deux doitgs) pour augmenter encore la taille des caractères sans que le texte déborde en largeur, ce qui peut être appréciable. Précisons que si l'on n'inclue pas de commande de style max-width dans le conteneur, les lignes occupent toute la largeur en position paysage, mais cela n'augmente en aucun cas la taille des caractères.

Remarque: La commande de style max-width (ou bien une spécification absolue de largeur) est indispensable pour la lecture de textes longs (romans, articles...) sur un ordinateur de bureau si l'on veut retrouver à chaque ouverture du navigateur l'endroit de la lecture où on en était. Ceci grâce à la spécification par défaut des navigateurs (ouvrir à l'ouverture les onglets ouverts à la fermeture). Cependant, retrouver le texte à l'endroit où on l'avait quitté nécessite que la page ait une dimension fixe ou qu'elle soit à sa dimension maximale, c'est-à-dire qu'il faut grâce à la poignée élargir la fenêtre jusqu'à la dimension maximum des lignes. Si la page est diminuée, l'endroit du texte à l'écran change. Pour cette raison, il est préférable de choisir un max-width relativement faible (500px par exemple) car si on choisit un max-width plutôt élevé, on risque plsu facilement d'utiliser la page sans qu'elle ait atteint sa dimention maximale.

Remarque: Il est naturellement indispensable de vérifier sur divers appareils (pc de bureau, portable, tablettes, smartphones) le résultat obtenu en fonction de ce que l'on aura spécifié dans le conteneur.

SOMMAIRE    SUITE