Lymnee Print

Lettre et publipostage avec un simple… navigateur.

Quelle est la solution la plus simple et la plus performante pour imprimer une lettre ? Les traitements de texte sont lourds et le publipostage est complexe à appréhender. Latex a paru être la solution la plus évidente : faute de trouver la classe idéale, nous avons conçu la classe missive. En terminant ce travail, et compte tenu de nos connaissances en développement Web, nous nous sommes demandé comment obtenir le même résultat à partir d’un navigateur.

Nous voulions proposer…

une solution accessible aux débutants et complète pour les techniciens afin de produire une lettre sur du papier au format A4 ;
un code fonctionnel avec les principaux navigateurs disponibles ;
un usage exclusif du français en prévoyant une évolution future pour les autres locuteurs ;
la personnalisation des marges pour les enveloppes à fenêtre et l’impression optionnelle d’un trait de pliage ;
le publispotage à titre complémentaire en permettant de personnaliser le contenu dans le texte et de respecter le genre des mots selon le sexe du destinataire.

La présente documentation est destinée aux débutants. Les autres sauront l’adapter.

Introduction

Création d’une première page

Une page Html se présente sous la forme…

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Lettre</title>
</head>
<body>
</body>
</html>

La page peut être créée avec n’importe quel logiciel, comme un bloc-notes. Il suffit de copier-coller le code ci-dessous et de l’enregister sous le titre lettre.html. Ensuite, le fichier peut être ouvert avec un navigateur. La page est blanche, mais son titre Lettre s’affiche dans la barre d’état.

Notons <html lang="fr"> : fr indique au navigateur que le texte du fichier est en français.

Maintenant, plaçons deux paragraphes de texte…

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Lettre</title>
</head>
<body>
	<p>Premier paragraphe de la lettre à venir.</p>
	<p>Deuxième paragraphe de la lettre à venir.</p>
</body>
</html>

Actualisons le fichier dans le navigateur : les deux paragraphes s’affichent.

Nous savons comment écrire, modifier et ouvrir une lettre.

Effaçons les deux paragraphes. Nous ajoutons à la page les deux fichiers nécessaires (une feuille de style et une librairie en JavaScript) à la production d’une lettre…

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Lettre</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lymnee/lymnee/lymnee.print.css" type="text/css" />
</head>
<body>
	<script src="https://cdn.jsdelivr.net/gh/lymnee/lymnee/lymnee.print.js" type="text/javascript"></script>
</body>
</html>

Aucune donnée personnelle ou textuelle n’est envoyée sur le réseau Internet.

Nos contenus se placeront sous la balise ouvrante <body>.

Nous savons comment préparer la lettre.

Présentation succinte des balises Html

Une balise Html est un élément utilisé dans une page Web. Son code comprend des chevrons (< et > ). Elle joue plusieurs rôles. Retenons que les navigateurs l’interprètent afin de savoir comment afficher une information.

Une balise s’écrit en général sous forme de paire, et cette paire peut en contenir d’autres…

<p>Premier paragraphe</p>
<p>Deuxième paragraphe</p>
<ul>
	<li>Premier item d’une liste non ordonnée</li>
	<li>Deuxième item d’une liste non ordonnée</li>
</ul>
<ol>
	<li>Premier item d’une liste ordonnée</li>
	<li>Deuxième item d’une liste ordonnée</li>
</ol>

Le navigateur affiche…

Premier paragraphe

Deuxième paragraphe

Premier item d’une liste non ordonnée
Deuxième item d’une liste non ordonnée

Premier item d’une liste ordonnée
Deuxième item d’une liste ordonnée

L’insertion d’une image diffère, sa balise est orpheline : <img src="monimage.jpg" />.

Une portion de texte peut être personnalisée grâce à <span></span> : nous verrons son usage pour le publipostage.

Une balise <div>…</div> peut accueillir d’autres balises. C’est un conteneur. Pour interagir avec elle, Lymnee Print lui attribue un identifiant : <div id="texte">…</div>. Il y a cinq conteneurs.

Nous connaissons les balises Html nécessaires pour composer la lettre. D’autres peuvent être invoquées.

Nous utiliserons des balises Html, d’une part, et, d’autre part, Xml.

Usage

Le respect de l’orthographe des balises est nécessaire : certaines comportent des accents.

La production d’une missive par Lymnee Print nécessite deux composants…

Lettre
Ce composant, <template id="lettre"></template>, contient le texte de la lettre.

Les balises, standards, au format Html, mettent en forme le texte.
Arbre
Ce composant, <template id="arbre"></template>, complète et formate le texte de la lettre grâce à ses variables.

Les balises, personnalisées (et personnalisables), au format Xml, structurent l’information. L’arbre possède des branches qui contiennent elle-mêmes des branches.

La lettre, <template id="lettre"></template>, comprend cinq conteneurs obligatoires…

de, <div id="de"></div>
expéditeur ;
à, <div id="à"></div>
destinataire ;
élément, <div id="élément"></div>
objet ou références éventuellement ;
événement, <div id="événement"></div>
lieu et date.

Le contenu du cinquième conteneur, <div id="texte"></div>, est écrit directement, comme dans un logiciel de traitement de texte.

Le contenu des quatres conteneurs au format Html est défini dans l’arbre au format Xml, <template id="arbre"></template>…

<destinataire>
</destinataire>
<expéditeur>
</expéditeur>
<expédition>
</expédition>

Les paires de balises de l’arbre sont triées alphabétiquement pour faciliter la lecture. Toutefois, l’ordre est sans importance.

Le contenu des balises principales est défini en choisissant ses propres balises. Le plus simple est de prévoir au moins une balise par paragraphe. Solution sommaire, mais efficace : reprendre le canevas proposé en le complétant si nécessaire.

La paire de balises <expédition></expédition> contient les informations qui figurent dans les deux derniers conteneurs : élément et événement.

Paire de balises `<destinataire></destinataire>`

La présentation de deux variantes permet de comprendre comment la création d’une lettre fonctionne.

Première variante

<destinataire>
	<civilité>Madame</civilité>
	<prénom>Marie</prénom>
	<nom>CURIE</nom>
	<adresse>21, rue de l’École de Médecine</adresse>
	<codepostal>75006</codepostal>
	<localité>PARIS</localité>
</destinataire>

Avec cette structure, le texte à écrire est…

<div id="à">
    <p>${civilité} ${prénom} ${nom}</p>
    <p>${adresse}</p>
    <p>${codepostal} ${localité}</p>
</div>

Deuxième variante

<destinataire>
	<identité>Madame Marie CURIE</identité>
	<adresse>21, rue de l’École de Médecine</adresse>
	<codepostaletville>75006 PARIS</codepostaletville>
</destinataire>

Avec cette structure, le texte à écrire est…

<div id="à">
    <p>${identité}</p>
    <p>${adresse}</p>
    <p>${codepostaletville}</p>
</div>

Dans les deux cas, le navigateur lira…

<p>Madame Marie CURIE</p>
<p>21, rue de l’École de Médecine</p>
<p>75006 PARIS</p>

… puis affichera…

Madame Marie CURIE

21, rue de l’École de Médecine

75006 PARIS

Explication dispensable : Lymnee Print utilise des littéraux de gabarit ; les valeurs dans les chaînes entre ${ et } sont remplacées lors de l’affichage de la lettre. Par exemple ${prénom} sera remplacé par la valeur contenue dans <prénom></prénom>, <prénom>Marie</prénom>.

Quel est donc l’intérêt de recourir à la balise <civilité></civilité> dans la première variante ? Imaginons que la formule finale de la lettre soit Je vous prie d’agréer, M…, mes salutations distinguées. : nous pouvons écrire Je vous prie d’agréer, ${civilité}, mes salutations distinguées. C’est utile, notamment, pour un modèle ou pour un polypostage.

Incise, nous pourrions écrire pour afficher en caractères gras l’expéditeur…

<div id="à">
    <p><strong>${identité}</strong></p>
    <p><strong>${adresse}</strong></p>
    <p><strong>${codepostaletville}</strong></p>
</div>

Paire de balises <expéditeur></expéditeur>

<expéditeur>
	<prénom>Victor</prénom>
	<nom>SEGALEN</nom>
	<adresse>146, rue Léo Saignat</adresse>
	<codepostal>33000</codepostal>
	<localité>BORDEAUX</localité>
</expéditeur>

Avec cet exemple de structure, le texte à écrire est…

<div id="de">
    <p>${prénom} ${nom}</p>
    <p>${adresse}</p>
    <p>${codepostal} ${localité}</p>
</div>

Peuvent être ajoutées d’autres informations comme l’adresse électronique, le numéro d’appel…

Paires de balise `<expédition></expédition>`

<expédition>
	<date>12 mai 2024</date>
	<localité>Bordeaux</localité>
	<objet>Genération d’une lettre</objet>
	<références>Envoi 2024-05-12-v1</références>
</expédition>

Avec cet exemple de structure, le texte à écrire est…

<div id="élément">
    <p>${objet} ${nom}</p>
    <p>${références}</p>
</div>
<div id="événement">
    <p>${localité}, le ${date}</p>
</div>

L’usage de ’ et pas de ' permet d’obtenir une apostrophe culbutée, conformément à l’usage en français.

Le conteneur élément est indispensable, même s’il est laissé vide quand il n’y a ni objet, ni références.

<div id="élement">
</div>

Autres balises de l’arbre

L’arbre, <template id="arbre"></template>, peut contenir des balises supplémentaires afin de modifier la présentation de la lettre. Si elles sont absentes, en tout ou en partie, des valeurs par défaut sont utilisées. Sauf mention contraire, les exemples ci-dessous présentent les valeurs par défaut.

<caractères>
	<couleur>black</couleur>
	<justification>oui</justification>
	<police>
		<famille>Open Sans</famille>
		<lien>https://fonts.googleapis.com/css2?family=Open+Sans</lien>
	</police>
	<taille>11pt</taille>
</caractères>

La couleur est définie par un nom (red) ou une valeur (#f00, #ff0000…).

Si justification vaut oui, les bords gauche et droit du texte sont alignés avec les bords gauche et droit du paragraphe. En ce cas, les espaces entre les mots sont irréguliers. Un mot trop long est coupé avant le retour à la ligne dans le respect des normes typographiques par le navigateur. Sinon, le texte est aligné à gauche. Le choix de l’ou ou de l’autre est subjective.

La paire de balises <police></police> permet d’indiquer un nom de police de caractères. Si la police n’est pas installée dans l’ordinateur, il convient d’indiquer son chemin et son nom (seulement le nom du fichier s’il figure dans le même répertoire que le document, solution la plus simple) ou son lien distant comme le montre l’exemple. Il est loisible d’appeler deux graisses différentes, par exemple https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700. À défaut, le navigateur choisit la famille de police avec empattements à afficher.

La taille doit être sélectionnée avant de définir les coupures de page.

<enveloppe>
	<marges>
		<gauche>110mm</gauche>
		<supérieure>58mm</supérieure>
	</marges>
	<fenêtre>45mm</fenêtre>
</enveloppe>

Si la lettre doit être insérée dans une enveloppe à fenêtre au format DL (99mm * 210mm), il est utile d’indiquer les mesures, car les fabricants ne respectent pas une norme identique. Sont à indiquer en millimètres la distance entre le bord gauche de l’enveloppe et la fenêtre, la distance entre le bord supérieur de l’enveloppe et la fenêtre, et la hauteur de la fenêtre, après usage d’un double décimètre. Une enveloppe à fenêtre au format C5 (229 mm * 162mm), correspondant à une feuille A4 pliée en deux, est utilisable si les mesures sont correctes.

<page>
<marges>
	<droite>20mm</droite>
	<gauche>20mm</gauche>
	<inférieure>20mm</inférieure>
	<supérieure>20mm</supérieure>
</marges>
<numérotation>page x sur y</numérotation>
<pliage>oui</pliage>
</page>

Les marges par défaut sont définies à 20 millimètres, mais personnalisables. Les marges doivent être sélectionnées avant de définir les coupures de page. Il faut dire au navigateur de n’utiliser aucune marge et aucun en-tête ou pied de page pour l’impression.

Si numérotation vaut aucune ou est indéfinie, les pages ne seront pas numérotées. Si numérotation vaut page x, le numéro de page sera indiqué à partir de la page 2. Si numérotation vaut page x sur y, le numéro de page sera indiqué à partir de la page 2, sous la forme Page 2 sur 6 si la lettre compte six pages.

Si pliage vaut oui, un trait apparait dans la marge gauche de la première page de la lettre ou des lettres dans le cadre d’un polypostage : il sert de répère pour plier facilement en trois le document avant son insertion dans l’enveloppe. Afin que le trait apparaisse, il faut dire au navigateur d’imprimer les arrière-plans pour l’impression.

<signataire>
	<prénom>Victor</prénom>
	<nom>Segalen</nom>
	<signature>signature.png</signature>
</signataire>

Avec cet exemple de structure, le texte à écrire est…

<div id="signature">
	<p>${prénom} ${nom}</p>
</div>

Si un signataire est défini, il s’affichera à la fin de lettre ou des lettres dans le cadre d’un polypostage. Sa marge gauche sera alignée avec le bloc de l’adresse, conformément à l’usage.

Le nom de la paire de balises <signature></signature> est nécessaire afin d’utiliser éventuellement une image de la signature. Elle contient le chemin et le nom du fichier (seulement le nom du fichier s’il figure dans le même répertoire que le document, solution la plus simple). Elle est insérée sous la signature textuelle. Elle est redimensionnée par le navigateur si nécessaire. Un saut de page manuel peut s’imposer cependant. La lettre peut évidemment être signée scripturalement après impression !

Polypostage

Lymnee Print est nativement conçue pour prendre en charge le polypostage. Il suffit de dupliquer la paire de balises <destinataire></destinataire> et d’en modifier les informations. Les paires de balises internes doivent être identiques. Une lettre par destinataire est produite dans le même document. La numérotation des pages recommence à 1 pour chaque lettre. Les valeurs définies dans chaque paire de balises <destinataire></destinataire> personnalisent le texte dupliqué.

Il est possible d’accorder une portion de texte ou un mot au sexe du destinataire. Deux conditions sont nécessaires :

déclarer le sexe dans le champ <destinataire></destinataire> en utilisant la paire de balise <sexe></sexe> avec les valeurs H ou F.
placer le texte entre deux paires de balises <span></span>…
```
<template id="lettre">
	<p>…</p>
	<p>Je suis heureux de vous avoir <span>lu</span><span>lue</span>.</p>
	<p>…</p>
</template>
```
La première paire correspond au texte pour un correspondant. La deuxième paire correspond au texte pour une correspondante.

Si le destinataire est une femme, le texte Je suis heureux de vous avoir lue. sera affiché. Sinon, il sera Je suis heureux de vous avoir lu..

Sauts de page

Les navigateurs ne gèrent pas (encore) l’impression comme les traitements de texte, notamment la numérotation et les sauts de page. Afin de remédier à cet inconvénient, il convient d’ajouter le couple de balises <saut></saut> avant le paragraphe à renvoyer sur la page suivante. L’aperçu avant impression permet de savoir où les sauts de page sont nécessaires. L’exercice est fastidieux, mais une lettre ne compte pas des dizaines de page ! À titre informatif, le texte des en-têtes et pieds de page s’affichent en magenta-rose à l’écran : cette couleur n’apparaît pas à l’impression.

Messages d’erreur

Lors de l’affichage dans le navigateur, les erreurs critiques sont signalées.

Où est la lettre ?: Il manque <template id="lettre">…</template>.
Où est le destinataire ?: Il manque <div id="à">…</div>.
Où est le texte ?: Il manque <div id="texte">…</div>.
Où est l’arbre de données ?: Il manque <template id="arbre">…</template>.
Où est l’expéditeur ?: Il manque <div id="de">…</div>.
Où sont le lieu et la date ?: Il manque <div id="événement">…</div>.
Où sont l’objet ou les références ?: Il manque <div id="élément">…</div>.

Lym­nee Print

Lym­nee Print

Introduction

Création d’une première page

Présentation succinte des balises Html

Usage

Paire de balises <destinataire></destinataire>

Première variante

Deuxième variante

Paires de balise <expédition></expédition>

Autres balises de l’arbre

Polypostage

Sauts de page

Messages d’erreur

Lymnee Print

Lymnee Print

Paire de balises `<destinataire></destinataire>`

Paires de balise `<expédition></expédition>`