Le web version papier (et plus)

Un collègue profite de son trajet dans le metro pour parcourir ses sites préférés.

Mais komenkifé ? Y’a déjà le WiFi dans le métro parisien ? Ou bien il a un N80 avec un forfait 3G ? Ou mieux ? Un Blackberry ?

Non, rien de tout ça. Par contre, dans le métro, pour peu qu’on trouve une place assise, on peut lire tranquillement son journal. C’est cette astuce que mon collègue utilise : il imprime ses sites préférés et les lit tranquillement sur papier. Du papier ! C’est fou !

A cette occasion, il m’a fait remarquer que le barbablog n’était pas optimisé pour l’impression et cela l’ennuyait lors de ses trajets. J’ai regardé mes pieds, j’ai rougi, j’ai pleuré et j’ai finalement fait la seule chose à faire : j’ai rajouté une feuille de style dédiée à l’impression.

Lorsqu’on appelle une feuille de style, il est possible de spécifier le média auquel celle-ci s’applique. Le web, on l’oublie trop souvent, n’est pas uniquement réservé aux écrans. On peut très bien lire une page web sur papier, sur terminal mobile, avec un terminal audio…

La liste du W3C des médias auxquels on peut appliquer une feuille de style spécifique est longue :

• braille
• embossed
• handheld
• print
• projection
• screen
• speech
• tty
• tv

Les plus utilisées à l’heure actuelle [1] sont screen, print, projection et handeld.

• screen est destiné à l’affichage écran ;
• projection est utilisée lorsqu’une pag web est projetée, avec un barko par exemple ;
• print, la valeur qui nous intéresse aujourd’hui, s’applique lors de l’impression d’une page ;
• handeld est destinée à l’affichage sur terminal mobile.

La syntaxe pour réserver une feuille de style à un média particulier est :

<style type="text/css" media="screen">
@import url(mafeuilledestyle.css)
</style>

Par défaut, si aucun type de média n’est spécifié, la feuille de style s’appliquera à tous les medias (on peut également spécifier la valeur media= »all »).

Voilà pour la théorie. Passons à la pratique.

Comment faire plaisir à un collègue en lui facilitant la lecture des articles du barbablog [2]

Pour la version imprimable il faut partir du postulat suivant : on ne dispose pas du même niveau d’interactivité sur le papier et sur un écran avec une souris et un clavier. Ca paraît idiot de le formuler ainsi mais cela veut dire que sur papier, les formulaires et les différents éléments de navigation sont inutiles :

form, #sidebar { /* sidebar c'est le nom du menu dans le barbablog*/
display: none; /* on les cache */
}

Vu que je ne souhaite pas me faire des ennemis en flinguant les cartouches d’encre des imprimantes de mes lecteurs, je m’assure que le fond de page est bien blanc :

body {
background: white; /* je veux rester ami avec toi lecteur */
}

et j’assigne un fond transparent à tous les autres conteneurs :

#container, #content {
background: transparent none;
}

Nous avons changé de média, il nous faut également changer d’unité pour les polices. Autant sur écran, l’unité à utiliser est le em [3] autant sur le papier l’unité à utiliser est le point. D’où :

body {
background: white;
font-size: 12pt;
}

Sur papier, les polices serif facilitent la lecture (sur écran, on utilise en général des polices sans-serif). On rajoute donc la règle suivante :

body {
background: white;
font-size: 12pt;
font-family: times,serif;
}

Sur papier, le lecteur ne peux plus cliquer sur les liens mais ceux-ci conservent une valeur informative. Afficher les urls peut s’avérer être une bonne idée (en fait, c’est vraiment une bonne idée):

#content a:link:after, #content a:visited:after {
content: " [" attr(href) "] ";
font-size: 90%; /* on les mets en plus petits quand même */
}
#content a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}

Malheureusement, le pseudo sélecteur :after ne fonctionne que dans Firefox, Safari et IE7 (je crois). Donc pas d’urls pour les IE 6 et inférieurs.

Petite touche finale [4]: je laisse toujours apparaître le nom du site ou le logo du site en haut de la page imprimée, histoire de savoir à quoi on a à faire au premier coup d’oeil. Sur le barbablog j’ai laissé un petit barbayellow en haut de page, facilement identifiable par son air béat et sa couleur jaune.

Globalement les feuilles de style print sont très efficaces puisque reconnues par la plupart des navigateurs web. On verra dans un prochain billet que ce n’est pas aussi évident pour les feuilles de styles de type handeld, destinées aux terminaux mobiles.

1. Comprenez : les propriétés qui sont actuellement reconnues par la plupart des terminaux.
2. Non je n’enlèverai pas le vert fluo et le rose barbie pour l’instant.
3. Une unité relative bien pratique lorsque les utilisateurs utilisent la fonction zoom du navigateur
4. La touche du pro comme on l’appelle également.