Voilà, nouvelle année d’étude oblige, j’ai voulu mettre à jour mon CV. Cependant, je ne suis pas très convaincu par l’apparence de l’actuel, beaucoup trop simple et fade à mon goût. Après quelques croquis, je commence à avoir une idée de l’apparence que je souhaite lui donner.

Bien, maintenant il va falloir le créer. Sauf que Libre Office ne propose pas de faire des documents très beaux. Quand à Microsoft Word, je peux oublier vu le prix des licences ou d’un abonnement à Office 365. Je songe alors à Inkscape, mais je ne sais pas l’utiliser autrement que pour réaliser des logos simplistes et je n’ai pas le temps d’apprendre à le manier. Je tombe alors sur quelques services permettant de réaliser son CV en ligne, mais le seul qui soit convainquant oblige à prendre un abonnement à l’année pour accéder à davantage d’options.

C’est alors qu’une idée farfelue m’est venue à l’idée : pourquoi ne pas le réaliser en HTML avec Bootstrap ? Je me mets alors à l’œuvre et j’arrive rapidement à un résultat qui me plaît :

Capture d'écran de 2014-09-22 16:48:04

Bien, maintenant que j’ai réalisé mon CV en HTML, il faudrait que je puisse l’exporter en PDF afin de pouvoir l’imprimer ou l’envoyer aux recruteurs. Rien de plus simple, il suffit d’utiliser la fonction « Exporter en PDF » du navigateur ! Erreur, puisqu’une partie de la mise en forme CSS saute :

Capture d'écran de 2014-09-22 16:47:56

Je cherche donc sur Internet et je trouve une solution vraiment ingénieuse : WebKit HTML to PDF. Cet outil utilise Qt et sa WebView basée sur WebKit pour effectuer un rendu de la page, puis utilise l’API d’impression de Qt pour exporter le rendu en PDF. Je m’empresse alors de télécharger et installer l’outil. Il s’utilise alors avec la commande wkhtmltopdf input.html output.pdf. Le résultat s’approche de ce que je cherche, mais à quelques détails près :

Capture_2014-09-22-16:49:08

Après quelques expérimentations, je m’aperçois que la largeur de ma page dépasse celle d’une feuille A4. Je change donc la largeur de mon container à 750 px pour avoir un rendu dans mon navigateur plus proche de celui du PDF :

Capture d'écran de 2014-09-22 16:54:42

Après cela, je m’aperçois que les titres sont un peu trop grands. Je décide d’en diminuer la taille :

Capture d'écran de 2014-09-22 16:58:21

Le résultat est bien meilleur, cependant il reste ce problème de marges. Après avoir cherché dans la doc de wkhtmltopdf, je vois qu’on peut modifier les marges à l’aide d’options, ce qui donne la commande suivante wkhtmltopdf -B 0 -L 0 -R 0 -T 0 input.html output.pdf et le résultat suivant :

Capture_2014-09-22-17:01:38

Voilà, parfait ! Enfin, presque, puisqu’il y a un bug avec la propriété CSS border-radius, m’obligeant à me passer de la photo circulaire. Ce qui donne le résultat suivant, qui est exactement ce que je cherchais, et ce sans trop d’effort !

Capture d'écran de 2014-09-22 17:06:37


Catégories : Tutoriels Tags : , , , , ,

Laisser un commentaire