[ergonomie] max-width pour un texte plus lisible

Hello tout le monde,
Pas de question, juste une petite info pour ceux que ça intéresse

---

Les sites en largeur fluide, c'est bien. Sauf que voilà, quand vous avez surtout du texte dedans, et que vous regardez ces sites sur un écran un peu large (ou même en 1024×768), les lignes de texte s'allongent parfois démesurément.

Mais que faire ?

C'est là que débarque la propriété CSS max-width, qui permet de bloquer une largeur pour les grandes résolutions, tout en restant fluide pour les petites. Génial, non ? Et comme le but est de rendre le texte plus agréable à lire, on utilise une largeur maximale en em. En sachant qu'en gros (mais ça varie suivant les fontes utilisées) 1em = 2 caractères. De plus, la longueur de ligne la plus "ergonomique" (celle qui demande le moins d'effort) serait de 60 à 75 caractères. Soit 30 à 37.5 em.

J'ai appliqué ce principe sur mon blog, par ici :
http://www.covertprestige.info/
(Note: si vous lisez ce message dans quelques semaines, il se peut que ça ne soit plus à l'ordre du jour, ce blog servant de banc d'essai de temps à autre… mais si j'ai le temps je ferai une page de démonstration.)

Problème avec Internet Explorer
C'est bien simple, IE 6 (et inférieur) ne comprend pas max-width. Dommage…
Je vois trois issues :
1 – décider de ne pas utiliser cette propriété en l'absence de support pour la majorité des utilisateurs ;
2 – l'utiliser quand même, et se contenter du rendu moins optimisé dans IE ;
3 – essayer de trouver une parade en bidouillant.

Svend Tofte a choisi la troisième solution, et propose l'utilisation de Javascript pour IE via la propriété CSS expression().
http://www.svendtofte.com/code/max_width_in_ie/

La solution qu'il propose pour un faux max-width en em me semble assez aléatoire (une histoire de taille du texte par défaut qu'il faudrait connaître à l'avance… pas sûr d'avoir compris ce passage). Je me suis donc contenté de quelque chose de plus soft :

div#page {
	width:expression(document.body.clientWidth > 900? "900px": "auto" );
}

Si la largeur de body est supérieure à 900px, on attribue une largeur de 900px au bloc qui contient la page. Si elle est inférieure, on garde une largeur automatique. Ce qui est l'équivalent d'un max-width: 900px; juste pour IE. C'est pas génial, mais c'est pas mal… l'essence même de la dégradation gracieuse.

Salut,

Oui la solution javascript de Svend Tofte est vraiment très bien pour aborder les design fluides de manière déstressée par rapport aux grandes résolutions sans être embêter par Internet Explorer.

Si tu travaille là dessus tu peux jeter un oeil à l'exemple que je donne qui est assez analogue au tien sauf que le conteneur est déterminé en pourcentage et limité en pixel. L'exemple aborde la chose sous l'angle de la question du centrage.

http://clb56.freezee.org/fluide_et_padding/ (Il s'agit du dernier point présenté dans le document).

Tu devrais externaliser la solution javascript spéciale IE dans une feuille de style appelée par un commentaire conditionnel. Il est possible que celà te permette une optimisation dans le cas IE + JS inactif.

pour_IE.css

conteneur {
width:valeur; /*si javascript inactif*/
width:expression(document.body.clientWidth > 900? "900px": "auto" );/*si javascript actif*/
}

Modifié par clb56 (12 May 2006 - 21:26)

max-width, max-width, mais pourquoi n'y ai je pas pensé plus tot !! Ca me sera bien pratique, merci mpop de nous avoir (ré)éclairé dessus