D’abord, les résolutions des écrans sont multiples, les navigateurs parfois spécifiques, plus ou moins élaborés, voire conformes. Il faut donc trouver un poids moyen, car il serait vain de concevoir une version dédiée pour chaque modèle ! Le succès actuel de l’iPhone peut, toutefois, conduire à envisager un développement spécifique pour des raisons de stratégie commerciale.

Aussi, utilisons-nous deux outils en ligne pour émuler le fonctionnement des périphériques de poche :

• Opera Mini Demo,
• dotMobi.

Dès que le rendu est correct avec Opera Mini Demo et validé par le W3C mobileOK Checker (la page d’accueil Iptima obtient le score de 99/100 et le présent article 98/100… scores perfectibles !), nous validons le développement.

Ensuite, certains navigateurs de périphériques de poche n’identifient pas le medium Handled dans l’en-tête des pages Html, et ne retiennent que le medium Screen !

Afficher un contenu identique est illusoire, n’en déplaise aux tenants des mises en page liquides ou fluides : les bannières ou les images ne sont pas redimensionnables le plus souvent, et toujours trop larges pour un téléphone, et leur largeur est forcément fixe !

Aussi faut-il servir un contenu spécifique pour les périphériques de poche, soit en l’adaptant soit en le créant. Le principe est simple… Lors de la demande de connexion, le navigateur est identifié : s’il est reconnu comme mobile, il est redirigé vers le contenu alternatif. Sur le plan technique, la mise en œuvre n’est guère plus compliquée (il suffit de consulter Iptima avec son radio-téléphone ou d’utiliser Opera Mini Demo pour voir une illustration !), mais dépasserait le cadre de cet article. Nous essaierons d’y revenir prochainement.

Une feuille de style pour périphérique de poche doit être courte, car le délai de son téléchargement a de l’importance. De plus, il est inutile de vouloir perfectionner à outrance l’aspect de la page, car certains navigateurs restent sourds aux raffinements (comme la suppression des puces dans les listes), et il vaut mieux se concentrer sur l’essentiel : marges et couleurs, à assortir au site principal.

À l’instar des feuilles de style dédiées à l’impression, nous avons décidé d’utiliser essentiellement des unités relatives et réduites, en raison de l’étroitesse de l’écran, avec l’unité em ou %. L’affichage des polices de caractères se limite à une seule valeur. Les largeurs des bordures sont relatives. Nous avons aussi renoncé à appliquer un fond de couleur pour recourir à un arrière-plan transparent. Les images sont toujours centrées, en raison de l’étroitesse de l’écran.

body {
  background-color: transparent;
  color: #000000;
  font-family: sans-serif;
  /* Permet de spécifier une police sans empattements plus lisible sur un écran. */
  font-size: 1em;
  margin: 1em
}
#header {
  border-bottom: medium solid #ffa97a;
  border-top: medium solid #ffa97a;
  padding-bottom: 0.25em;
  text-align: center
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto
}
ol.commentlist li, ol.pinglist li {
  border: thin dotted #666666;
  list-style-position: inside;
  list-style-type: decimal;
  margin: 0.9375em 0 0 0.9375em;
  /* margin: 15px 0 0 15px; dans la feuille de style pour l'écran du site principal */
  padding: 0.3125em;
  /* padding: 5px; dans la feuille de style pour l'écran du site principal */
}


Nous pouvons aussi cacher certains conteneurs, même si le contenu alternatif devrait permettre d’obvier à l’affichage de ces éléments…

#adsense, #advertising {
  display: none


Enfin, nous avons prévu d’afficher la signification des acronymes juste après leur affichage avec les pseudo-classes acronym:after, abbr:after, car l’équivalent des souris sur les Pda ne permettent pas toujours le survol. Ainsi, le lecteur connaît instantanément la signification. Tant pis pour les téléphones et les utilisateurs qui ne reconnaîtront pas cette règle…

acronym:after, abbr:after {
  content: " ["attr(title)"]";
  text-decoration: none


Attention ! il est tentant de redimensionner les images trop larges avec une feuille de style : l’image originale sera téléchargée, et obligera le navigateur à effectuer le redimensionnement, ralentissant l’affichage de la page.

Les feuilles de style dédiées à l’impression sont toujours reconnues avec les navigateurs, contrairement à handled pour les périphériques de poche : pourquoi utiliser une solution complexe et coûteuse en ressources comme JavaScript ou Php ?

Si une impression normée s’avère souhaitable, il vaut mieux alors générer un document Pdf à la volée.

Cependant, il n’est pas judicieux de concevoir une feuille de style sophistiquée dans les moindres détails : comme le recours à l’impression reste marginal, les règles peuvent être rudimentaires.

Aussi avons-nous décidé de lâcher prise pour l’impression : nous allons utiliser des unités relatives avec em, nous ne spécifierons pas une police de caractères, et afficherons du noir et blanc. Ainsi, le navigateur gèrera par défaut l’impression… avec des résultats moins hasardeux !

En revanche, nous avons développé une solution spécifique pour la gestion des liens, des acronymes et des images, qui permet de tirer parti astucieusement des spécificités du medium Print.

Quelques propriétés…

D’abord, appelons le medium Print dans l’en-tête de nos pages Html…

<link rel="stylesheet" href="http://www.monsite.com/styles/print.css" type="text/css" media="print" />


Réglons ensuite l’apparence de notre site…

body {
  color: #000000;
  /* Nous imprimons en noir et blanc */
  font-family: serif;
  /* Permet de spécifier une police à empattements plus lisible sur le papier. */
  font-size: 1em;
  margin: 1.5em
}


Ensuite, cachons les éléments purement décoratifs ou non significatifs, images ou non…

#adsense, #advertising {
  display: none
}


Imprimons nos liens en noir et blanc…

h1, h2, h3, h4, h5, h6 {
  color: #000000;
  padding: 0.5em;
  text-align: center;
  text-decoration: none
}
h1.a, h1 a:link, h1 a:visited, h2.a, h2 a:link, h2 a:visited, h3.a, h3 a:link, h3 a:visited, h4.a, h4 a:link, h4 a:visited, h5.a, h5 a:link, h5 a:visited, h6.a, h6 a:link, h6 a:visited {
  color: #000000;
  text-decoration: none
}


Préférons les unités relatives pour les bordures…

.postmetadata {
  border: thin solid #999999;
  /* Il existe trois unités relatives pour désigner la largeur de la bordure : 'thin', 'medium', ou 'thick'. */
  margin: 1em;
  padding: 1em
}


Continuons à jouer avec les unités relatives…

ol.commentlist li, ol.pinglist li {
  border: thin dotted #666666;
  list-style-position: inside;
  list-style-type: decimal;
  margin: 1.5em 0 0 1.5em;
  /* margin: 15px 0 0 15px; dans la feuille de style pour l'écran */
  padding: 0.5em;
  /* padding: 5px dans la feuille de style pour l'écran */
}


Gestion des liens et des acronymes

Par défaut, les liens et les acronymes sont imprimés en l’état, c’est-à-dire soulignés ou non. Néanmoins, un lien souligné n’est guère informatif pour le lecteur de la version imprimée, et il devra retourner sur le site pour retrouver l’adresse ! Aussi pourquoi ne pas afficher l’adresse du lien ou la signification de l’acronyme juste après l’affichage ? Css permet aisément de spécifier la propriété avec :a:after…

h1 a:after, h2 a:after, h3 a:after, h4 a:after, h5 a:after {
  border-bottom: thin solid #000000;
  content: " ["attr(href)"]";
  /* Noter l'espace juste après le premier guillemet pour éviter que le contenu ne colle au lien. */
}
acronym:after, abbr:after {
  border-bottom: thin dotted #000000;
  content: " ["attr(title)"]"
}


Gestion des images

Pour les images, il ne semble pas toujours utile de les imprimer. En effet, la plupart des images ne présente aucune valeur informative, et l’impression d’une image d’une résolution de 72 pixels par pouce se révèle souvent catastrophique. C’est pourquoi, nous avons pris le parti de ne pas les afficher à l’impression (au passage, les droits d’auteur sont ainsi préservés), mais de signaler leur existence par deux moyens : avec le contenu de la balise alt, d’une part, et, d’autre part, avec la mention [img] (nous avons repris sobrement le nom de la balise Html pour assurer l’internationalisation de la feuille de style). Ces deux affichages peuvent sembler redondants, mais la pseudo-classe img:after n’est pas gérée par tous les navigateurs. Ainsi, le lecteur ne perd aucune information essentielle !

dl.gallery {
  text-align: left /* Nos images sont placées dans des listes de définition */
}
.gallery_dt, .gallery_dd {
  margin-left: 0 /* Évite le décalage à droite imposé par le navigateur */
}
.gallery dt a img {
  display: none
}
.gallery dt a img:after {
  content: " ["attr(alt)"] [alt]"
}
.gallery dt:after {
  color: #333333;
  content: "[img] ";
  font-style: italic
}
.gallery dd:after {
  color: #333333;
  font-style: normal
}
.gallery dt, .gallery_dd {
  font-style: italic
}


Nota. Le marquage sémantique d’une liste de définition permet une gestion plus fine de l’affichage.

Si l’on ne souhaite pas se passer de l’impression des images, peut-être vaut-il mieux proposer, à titre alternatif, le téléchargement d’une image à la résolution spécifique.

En revanche, nous ne savons pas gérer correctement les veuves (Widows) et les orphelines (Orphans) pour éviter l’affichage disgracieux de lignes isolées en haut ou en bas de page : gageons que Css 3, voire l’évolution des navigateurs, permettra de combler nos attentes de typographe !

Lien intéressant : Faites bonne impression avec les CSS.

La réponse fut facile à trouver avec Wp-Print.

Il faut télécharger le répertoire print de l’archive décompressée, sans convertir son intitulé. Après l’installation, Wp-Print s’administre depuis le menu Options, onglet Print, et ne présente pas de difficulté particulière.

En revanche, il faut modifier les modèles single.php, post.php, page.php ou theloop.php selon les caractéristiques du thème WordPress.

Il faut chercher la ligne…

<?php while (have_posts()) : the_post(); ?>

… et ajouter dessous, où l’on veut que soit placé l’icône ou le texte Imprimer…, le code suivant :

<?php if(function_exists('wp_print')) { print_link(); } ?>

Si l’on souhaite que le lien imprimer ne s’affiche qu’à la fin des articles et pas à la fin des pages, il suffit de ne pas modifier le modèle page.php. Pour affiche le lien imprimer sur une page spécifique, il faut saisir le code suivant :

[print_link]

Enfin, il faut aller dans le menu options, onglet permaliens et cliquer sur le bouton mise à jour de la structure des permaliens. Le lien Imprimer… sur les anciens articles est automatiquement créé.

Maladresse de débutant, nous avions francisé avec ardeur (et en « dur » !) Wp-Print via les fichiers print.php et wp-print… en pure perte !

En effet, en retournant sur le site du plugiciel, nous nous sommes aperçu que le fichier .mo en français était disponible en téléchargement. Consciencieux, nous avons aussi récupéré le fichier .po afin d’affiner la traduction.

À l’usage, l’efficacité de Wp-Print est impressionnante : les liens, numérotés dynamiquement, sont imprimés dans le pied de l’article ou de la page.

Depuis notre passage à la version 2.6 de WordPress, nous avons dû mettre à jour ce plugiciel. Pour respecter l’usage du français, nous avons ajouté des espaces devant les : dans :

• les lignes 274, 276, 342 et 344 de wp-print.php,
• les lignes 57 et 58 de print-posts.php.

Pour respecter les droits d’auteurs de Lester, l’auteur du Plugin, nous ne proposons en téléchargement que ces deux fichiers francisés : il suffit de les remplacer dans le dossier original. Voici, à toutes fins utiles, le lien direct vers le fichier .mo de traduction française : version française de Wp-Print. Les intrépides ou les perfectionnistes d’entre vous joueront avec le fichier .po !

Lorsqu’on utilise WordPress sans les commentaires, on peut souhaiter supprimer la mention Commentaires désactivés. Il faut enlever la fonction print_comments_number() dans wp-print.php et, partant, son appel dans le fichier print-posts.php.