Moteur de rendu Typst pour les formats d'impression

Exemple — Maison Verte SARL Le responsable administratif de Maison Verte SARL souhaite générer des factures PDF plus rapidement et avec une meilleure qualité de rendu. Il active le moteur Typst pour ses formats d'impression et constate une réduction significative du temps de génération, tout en conservant une mise en page professionnelle et moderne.

Le moteur de rendu Typst est une alternative performante au moteur Chromium pour la génération de PDF à partir des formats d'impression créés avec le constructeur. Il offre des avantages en termes de vitesse, de consommation mémoire et de qualité de rendu, tout en étant entièrement intégré à Dokos.

Pourquoi utiliser Typst ?

Typst est un langage de composition moderne conçu pour la génération de documents. Contrairement à Chromium, qui nécessite un rendu complet de la page HTML avant de générer un PDF, Typst compile directement le document en PDF à partir d'une description structurée. Cela se traduit par des performances bien supérieures :

Activation de Typst pour un format d'impression

Typst est une option opt-in : il doit être activé manuellement pour chaque format d'impression. Chromium reste le moteur par défaut pour les formats existants.

Prérequis

• Dokos version 16 ou supérieure.
• Le format d'impression doit être créé ou modifié via le constructeur de format d'impression.

Étapes d'activation

1. Ouvrir le format d'impression :
   • Accédez à la liste des Formats d'impression via la recherche (Ctrl+K).
   • Sélectionnez le format à modifier ou créez-en un nouveau.
   • Cliquez sur Modifier pour ouvrir le constructeur de format d'impression.
2. Accéder aux paramètres du format :
   • Dans la barre latérale droite, ouvrez l'onglet Paramètres.
3. Choisir le moteur de rendu :
   • Dans la section Moteur PDF, sélectionnez Typst (expérimental).
   • Un avertissement s'affiche pour indiquer que certaines fonctionnalités ne sont pas supportées (voir Limitations).
4. Enregistrer le format :
   • Cliquez sur Enregistrer pour appliquer les modifications.
   • Si le format utilise des fonctionnalités non supportées par Typst, une erreur s'affiche avec la liste des blocages (voir Gestion des blocages).

      
flowchart TD
    A[Ouvrir le constructeur] --> B[Onglet Paramètres]
    B --> C[Sélectionner Typst]
    C --> D{Blocages ?}
    D -->|Oui| E[Corriger les blocages]
    D -->|Non| F[Enregistrer le format]
    E --> F

    

Nouveautés liées à Typst

Bloc Typst

Exemple — Bureau Moderne Bureau Moderne souhaite ajouter une clause de confidentialité en bas de ses factures, formatée avec une police spécifique et des marges personnalisées. Il utilise un bloc Typst pour insérer directement du code Typst dans son format d'impression, sans avoir besoin de modifier le HTML ou le CSS.

Le bloc Typst est un nouveau type de bloc disponible dans le constructeur pour les formats utilisant le moteur Typst. Il permet d'insérer du code Typst brut, qui sera émis tel quel dans le document final. Ce bloc est l'équivalent du bloc HTML pour les formats Chromium.

Fonctionnalités clés

• Édition directe : Le code Typst peut être saisi et modifié directement depuis l'inspecteur.
• Prévisualisation : Le rendu du bloc est visible dans l'aperçu du constructeur.
• Jinja templating : Les blocs Typst supportent le templating Jinja, comme les autres champs du constructeur.

Comment utiliser le bloc Typst

1. Ajouter un bloc Typst :
   • Dans le constructeur, ouvrez l'onglet Blocs.
   • Faites glisser le bloc Typst dans la section souhaitée du canevas.
2. Éditer le contenu :
   • Sélectionnez le bloc dans le canevas.
   • Dans le panneau latéral Inspecteur, ouvrez l'onglet Contenu.
   • Saisissez votre code Typst dans l'éditeur. Exemple :

     #set text(font: "Helvetica", size: 10pt)
     #align(center)[Clause de confidentialité]
     

3. Utiliser des variables Jinja :
   • Vous pouvez insérer des champs du document avec la syntaxe Jinja. Exemple :

     #set text(size: 9pt)
     #align(right)[Facture #doc.name]
     

4. Prévisualiser et enregistrer :
   • Le rendu du bloc est visible dans l'aperçu du constructeur.
   • Enregistrez le format pour appliquer les modifications.

      
flowchart TD
    A[Ajouter un bloc Typst] --> B[Sélectionner le bloc]
    B --> C[Onglet Contenu]
    C --> D[Saisir le code Typst]
    D --> E[Prévisualiser]
    E --> F[Enregistrer]

    

Lettre d'en-tête comme champ de lien

Exemple — Maison Verte SARL Maison Verte utilise plusieurs lettres d'en-tête selon le type de document (facture, devis, bon de commande). Avec la nouvelle interface, elle peut désormais sélectionner directement la lettre d'en-tête depuis l'inspecteur, sans avoir à modifier le code HTML du format.

Dans les formats utilisant Typst, la lettre d'en-tête est désormais configurée comme un champ de lien dans l'inspecteur. Cela permet de sélectionner une lettre d'en-tête existante ou de laisser le champ vide pour ne pas en utiliser.

Comment configurer la lettre d'en-tête

1. Sélectionner la zone d'en-tête :
   • Dans le constructeur, cliquez sur la section d'en-tête du canevas.
2. Configurer la lettre d'en-tête :
   • Dans le panneau latéral Inspecteur, ouvrez l'onglet En-tête.
   • Utilisez le champ Lettre d'en-tête pour sélectionner une lettre existante dans la liste.
   • Pour supprimer la lettre d'en-tête, laissez le champ vide.
3. Prévisualiser et enregistrer :
   • La lettre d'en-tête sélectionnée est visible dans l'aperçu.
   • Enregistrez le format pour appliquer les modifications.

      
flowchart TD
    A[Sélectionner la section d'en-tête] --> B[Onglet En-tête]
    B --> C[Choisir une lettre d'en-tête]
    C --> D[Prévisualiser]
    D --> E[Enregistrer]

    

Gestion des blocages

Typst ne supporte pas toutes les fonctionnalités disponibles dans les formats Chromium. Pour éviter des rendus incorrects ou des erreurs silencieuses, Dokos bloque l'enregistrement d'un format Typst si des fonctionnalités non supportées sont détectées. Voici la liste des blocages courants et comment les résoudre :

Exemple de résolution d'un blocage

Scénario : Bureau Moderne tente d'enregistrer un format Typst contenant un bloc HTML pour afficher une signature. Dokos bloque l'enregistrement avec le message : Blocage : Bloc HTML non supporté par Typst.

Solution :

1. Supprimez le bloc HTML du canevas.
2. Ajoutez un bloc Typst à la place.
3. Insérez le code suivant dans le bloc Typst pour afficher la signature :

   #image("path/to/signature.png", width: 100%)
   #align(right)[Signature]
   

4. Enregistrez le format.

Bonnes pratiques pour Typst

Optimiser les performances

• Éviter les images haute résolution : Typst traite les images plus efficacement que Chromium, mais des images trop lourdes peuvent ralentir la génération.
• Limiter les blocs Typst complexes : Privilégiez les blocs standard pour les éléments simples (champs, tableaux) et réservez les blocs Typst pour les éléments avancés.
• Utiliser des polices standard : Typst supporte les polices Google Fonts, mais leur chargement peut ralentir la génération. Préférez les polices système pour les documents simples.

Personnalisation avancée

• Polices Google Fonts : Typst peut utiliser les polices Google Fonts configurées dans le format. Pour les activer :
  1. Dans le constructeur, ouvrez l'onglet Paramètres.
  2. Activez l'option Charger les polices Google Fonts.
  3. Sélectionnez les polices souhaitées dans la liste.
• Styles personnalisés : Utilisez le champ Style personnalisé dans l'onglet Style de l'inspecteur pour ajouter des règles Typst avancées. Exemple :

  #set page(margin: (x: 1.5in, y: 1in))
  

• Sections répétées : Typst supporte la répétition des en-têtes et pieds de page sur toutes les pages. Pour l'activer :
  1. Dans le constructeur, ouvrez l'onglet Paramètres.
  2. Activez l'option Répéter l'en-tête et le pied de page.

Dépannage

Exemple complet : Création d'une facture avec Typst

Scénario : Maison Verte SARL souhaite créer un format de facture moderne avec Typst, incluant un logo, un tableau des articles, un QR code pour le paiement, et une clause de confidentialité.

Étapes de création

1. Créer un nouveau format d'impression :
   • Accédez à Impression > Format d'impression.
   • Cliquez sur Nouveau et sélectionnez Facture comme doctype.
   • Activez le mode constructeur.
2. Configurer le moteur Typst :
   • Ouvrez l'onglet Paramètres.
   • Sélectionnez Typst (expérimental) comme moteur PDF.
3. Ajouter une lettre d'en-tête :
   • Sélectionnez la section d'en-tête.
   • Dans l'onglet En-tête, choisissez une lettre d'en-tête existante (ex. : Logo Maison Verte).
4. Ajouter les informations client :
   • Glissez-déposez les champs Nom du client, Adresse, et Date dans la section principale.
   • Ajustez l'espacement et les couleurs dans l'onglet Style.
5. Créer un tableau des articles :
   • Ajoutez une section de type Répétiteur pour les articles.
   • Configurez les colonnes Article, Quantité, Prix unitaire, et Montant.
   • Activez le mode Disposition tableau et choisissez un style d'en-tête Coloré.
6. Ajouter un QR code pour le paiement :
   • Ajoutez un bloc Code-barres en bas de la section principale.
   • Configurez le champ Source avec doc.payment_link (lien de paiement).
   • Sélectionnez le format QR.
7. Ajouter une clause de confidentialité :
   • Ajoutez un bloc Typst en bas du canevas.
   • Insérez le code suivant :

     #set text(size: 9pt, font: "Helvetica")
     #align(center)[
       Ce document est confidentiel. Toute reproduction ou diffusion non autorisée est interdite.
     ]
     

8. Prévisualiser et enregistrer :
   • Utilisez l'aperçu ancré pour valider le rendu.
   • Enregistrez le format sous le nom Facture Typst - Maison Verte.

      
flowchart TD
    A[Créer un nouveau format] --> B[Configurer Typst]
    B --> C[Ajouter une lettre d'en-tête]
    C --> D[Ajouter les champs client]
    D --> E[Créer un tableau des articles]
    E --> F[Ajouter un QR code]
    F --> G[Ajouter une clause Typst]
    G --> H[Prévisualiser et enregistrer]

    

Résultat

Maison Verte dispose désormais d'un format de facture moderne, généré en moins de 100 ms, avec :

• Un logo en en-tête.
• Un tableau des articles clair et professionnel.
• Un QR code pour faciliter le paiement.
• Une clause de confidentialité personnalisée.

Limitations et évolutions futures

Limitations actuelles

• Blocs HTML : Non supportés (remplacés par des blocs Typst).
• Modèles Jinja dans les champs : Non supportés (utilisez des blocs Typst à la place).
• Codes-barres linéaires : Seuls les QR codes sont supportés.
• Lettre d'en-tête HTML : Non supportée (utilisez des images ou des lettres Typst-native).
• CSS avancé : Certaines règles CSS ne sont pas traduites en Typst.

Évolutions prévues

• Support des codes-barres linéaires : Intégration des formats CODE128 et EAN-13.
• Éditeur visuel pour les blocs Typst : Interface simplifiée pour les utilisateurs non techniques.
• Prévisualisation instantanée des blocs Typst : Rendu en temps réel dans le constructeur.
• Support des animations et transitions : Pour des documents dynamiques (ex. : présentations).

Ressources supplémentaires

• Documentation officielle de Typst
• Guide de migration des formats HTML vers Typst
• Exemples de code Typst pour Dokos
• Benchmark des moteurs de rendu PDF
• Forum Dokos - Discussions sur Typst