SITAmnesty

jeudi 15 octobre 2009

Produire au format PDF un texte impeccablement mis en page

Filed under: Interlude — sitamnesty @ 00:56

14 oct. 2012 : le site htm2pdf.co.uk à été « mis à jour » et… plus rien ne fonctionne correctement ! En attendant que htm2pdf.co.uk se rétablisse :
– utiliser pdfonfly.com (Attention, avec ce service, basculer en affichage Wysiwig en cliquant de nouveau sur l’icône « source » avant de cliquer sur le bouton « create pdf » sans quoi, pour une raison mystérieuse, tous les caractères accentués seront absents du pdf généré !)
– ou utiliser l’exportation au format pdf de la suite bureautique OpenOffice (Fichier > Ouvrir… le fichier HTML à convertir en PDF puis Fichier > Exporter… sélectionner le format PDF et cliquer sur Enregistrer)
– ou bien https://secure.convert-doc.com/converters/html-to-pdf.html.

 

Mise à jour, 25 mai 2011
Il existe désormais des sites internet permettant de générer d’un clic un fichier .pdf impeccablement mis en page, simplement en donnant l’URL d’un article disponible sur internet. C’est particulièrement utile pour proposer une version imprimable dans le cas d’articles qui ne s’impriment pas correctement par la solution de l’impression directe du navigateur (Fichier [ > Mise en page | Aperçu avant impression ] > Imprimer… ou Ctrl+P) , et qui ne proposent pas non plus de version imprimable. Cela arrive hélas de plus en plus du fait que les modèles de blogs ou de sites deviennent de plus en plus élaborés, produisant des articles destinés à être lus sur écran et plus vraiment à être imprimés.
Ces services sont bien plus simples à utiliser que la méthode proposée ci-dessous, destinée aux perfectionnistes.
Ils suffisent dans 90% des cas si l’on est perfectionniste, et dans 100% si on ne l’est pas.

 

htm2pdf.co.uk est un service dont la fonction principale, Convert by URL, permet de convertir une page web en un document PDF tout simplement en donnant l’adresse URL de la page web dans la zone « Address » et en cliquant sur le bouton « CONVERT ». C’est très pratique pour faire des copies d’écran de la totalité d’une page web directement en PDF au lieu d’utiliser la touche de copie d’écran à plusieurs reprises, d’assembler les images successives des différents écrans successifs puis de convertir cette image en pdf.

htm2pdf.co.uk - convertir une page web en document pdf en donnant tout simplement l'URL de la page

Une autre fonction, bien moins utilisée, Convert raw html (conversion de html brut), permet de convertir du code HTML en fichier PDF. C’est cette fonction qui va être utilisée pour mettre en page le code HTML d’une portion seulement de page web (typiquement, un article et ses illustrations) lorsque la conversion directe de l’URL ne donne pas un résultat satisfaisant. C’est notamment le cas lorsque la page affiche de nombreux autres éléments en plus de l’article lui-même (autres articles, publicités etc.)

Ecrire d’abord le texte au format html, soit directement avec un éditeur html soit via le blog wordpress. Si on veut mettre en page un article existant, récupérer le code html de cet article en surlignant l’article à la souris (clic gauche maintenu) puis clic droit dans la zone surlignée, choisir « code source de la sélection » et copier-coller le code html qui s’affiche.

On va produire le pdf en copiant-collant le html dans l’onglet Convert raw html du site htm2pdf.co.ukAttention Ouvrir ce site directement en cliquant sur son lien depuis une page internet (comme la présente page) va fabriquer le pdf de la page. C’est très pratique pour faire un bouton « Convertir la page en PDF » mais cela allonge le temps d’ouverture de la page (on ne peut pas tout avoir). Pour ouvrir le site rapidement, ouvrir htm2pdf.co.u (qui n’existe pas !), et rajouter le k à la suite du u de fin pour ouvrir le bon site htm2pdf.co.uk ;-)

fenêtre Convert raw html du site htm2pdf.co.uk

puis en procédant par essai & erreurs en jouant sur deux paramètres :
– les marges de gauche et de droite
– les marges en haut des pages

htm2pdf.co.uk répond parfois Service Unavailable (en français dans le texte : Service Indisponible) quand il y a trop de demandes de conversion en même temps.

htm2pdf.co.uk répond parfois -Service Unavailable- (en français dans le texte : Service Indisponible) quand il y a trop de demandes de conversion en même temps

Ne pas se décourager : il suffit d’attendre… un certain temps puis de recommencer et ça marche (en principe… :-) )

Cette méthode est destinée UNIQUEMENT à produire des documents pdf correctement mis en page sur QUATRE pages MAXIMUM (c’est à dire deux feuilles recto-verso) dans le cadre des actions SITA.
Par correctement mis en page il faut comprendre un texte qui occupe le minimum de pages mais avec des caractères bien lisibles, des marges agréables et toutes les pages entièrement remplies du bas en haut (notamment sans grande zone blanche au bas de la dernière page) et avec si possible des coupures entre les pages situées en fin de ligne ou de paragraphe (et non pas en milieu de phrase)

On va utiliser les codes html suivants :

– Pour introduire des marges identiques à gauche et à droite :
Encadrer le code html du texte dans un tableau (table) centré (center) qui va occuper, par exemple, 90% de la largeur (width) de la page.
Pour cela, rajouter les instructions html suivantes de création d’un tableau centré contenant une seule cellule composée d’une seule ligne (tr) d’une seule colonne (td) qui contient le texte :
<TABLE WIDTH=90% ALIGN="CENTER" CELLPADDING=5 CELLSPACING=0><TR><TD>
(code html du texte)
</TD></TR></TABLE>
La cellule est encadrée de 5 pixels vides (cellpadding) pour éviter de parfois tronquer certaines portions de caractères en bout de ligne, notamment en italique.

Pour avoir une mise en page agréable à lire, faire au maximum des tableaux de 90% (marges minimales de 5% et 5%) et au minimum de 60% (marges maximales de 20% et 20%).
Il est possible de définir la largeur en pixels au lieu de %, par exemple pour caler la largeur du texte exactement sur la largeur d’une image utilisée en bandeau au début d’un article. Le code est alors WIDTH=600 pour, par exemple, 600 pixels.

Produire le pdf sur http://www.htm2pdf.co.uk/ et voir s’il est possible de trouver une valeur de % du tableau centré qui permette de faire une mise en page rentrant sur une, deux, trois ou quatre pages bien pleines. On réserve un peu de place à la fin de la dernière page pour pouvoir, dans un deuxième temps, rajouter des marges en haut et en bas des précédentes pages de telle sorte que les coupures de pages soient placées entre des paragraphes ou à des fins de phrases.

Pour le remplissage des pages, on peut aussi jouer sur un deuxième paramètre : la taille des caractères.

– Pour agrandir (ou réduire) la taille des caractères :
A L’INTERIEUR du tableau précédemment défini pour les marges, encadrer le code html du texte par le code html suivant :
<span style="font-size: 125%;">
(code html du texte)
</span>
Dans cet exemple le texte va être agrandi de 25%. 100% ne change pas la taille des caractères et est équivalent à la taille html par défaut "font 3" (font size="3")
Eviter de trop réduire la taille des caractères parce que c’est pénible à lire.
Le code <span style="font-size: x%;"> permet un réglage plus fin que le code <font size="n"> qui ne fonctionne que par tailles prédéfinies allant de 1 à 7.
Vous pouvez utiliser ce même code « grossissant » (ou « rapetissant » si besoin est, avec x < à 100) pour grossir (ou rapetisser) un paragraphe du texte. C'est pratique notamment pour grossir un paragraphe de conclusion, ce qui permet par la même occasion de choisir la hauteur de la marge de fin de texte de façon relativement précise.

Ne pas oublier de réserver un peu de place à la fin de la dernière page pour rajouter des marges en haut et en bas aux sauts de pages.

– Pour rajouter des marges en haut ou en bas des pages.
Introduire le code html d’un paragraphe vide, c’est à dire contenant un blanc "collant" (le terme exact est "non sécable", en anglais "non breakable space" d’où le code html nbsp) : <p>&nbsp;</p>
Si le paragraphe vide n’est pas suffisant, ou au contraire trop grand, rajouter ou le remplacer par autant de sauts (BReak) de lignes vides (blanches non sécables) que nécessaire : <br> ou &nbsp;<br>

Jouer sur tous ces paramètres, dans l’ordre suivant :

  • Marges gauche-droite de 90% à 80% environ,
  • Grossir si nécessaire les caractères jusqu’à obtention d’un espace blanc en bas de dernière page d’une hauteur d’environ 1/5 de page,
  • Rajouter des paragraphes vides pour obtenir de bonnes marges en haut et en bas des pages lors des sauts de page. Ces paragraphes vides vont combler le 1/5 d’espace blanc en bas de dernière page.
  • Enfin, si besoin (et si la conclusion s’y prête), grossir le dernier paragraphe du texte pour ajuster la marge au bas du document.

Récapitulation en résumé :
<TABLE WIDTH=90% ALIGN="CENTER" CELLPADDING=5 CELLSPACING=0><TR><TD>
<span style="font-size: 100%;">
<p>&nbsp;</p>
(code html du texte)
</span>
</TD></TR></TABLE>

Une mise en page aérée, avec des marges agréables sur les quatre côtés de toutes les pages, les sauts de page entre des paragraphes ou des fins de lignes, des caractères lisibles et des pages bien pleines, augmente largement la crédibilité du texte.
Et surtout ça incite à lire, contrairement à un texte tout tassé qui semble d’emblée rébarbatif.

Un commentaire »

  1. […] Mise en page | Aperçu avant impression ] > Imprimer… ou Ctrl+P) soit en proposant une version PDF), et de […]

    Ping par Les pétitions sur internet… « SITAmnesty — samedi 28 mai 2011 @ 17:24


RSS feed for comments on this post. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Propulsé par WordPress.com.

%d blogueurs aiment cette page :