Mise en page

Mise en page : pagination et numérotation juridique

Deux plugins pour le travail sur des documents structurés — contrats, spécifications, rapports, politiques. Un affichage paginé en direct, qui montre les vraies limites de page, les en-têtes, les pieds de page et les numéros de page, et une numérotation juridique à plusieurs niveaux (1, 1.1, 1.1.1) pour les documents numérotés par clauses. Les deux sont inclus dans la licence standard. Pour savoir comment un DOM continu est projeté sur la géométrie d’une vraie page papier, consultez le fonctionnement de l’affichage paginé dans un éditeur dans le navigateur ; la numérotation est traitée dans la numérotation juridique avec les compteurs CSS.

Pagination Mise en page du document En-têtes et pieds de page Numérotation juridique

Affichage paginé

L’affichage paginé présente la zone modifiable sous forme de colonne de papier à la vraie largeur de page et dessine, pour chaque page, une limite, un numéro de page et un en-tête ou un pied de page facultatifs — l’affichage page qu’offre un traitement de texte. Il est purement visuel : rien de ce qu’il dessine n’est écrit dans votre contenu, et le HTML que vous enregistrez est identique à l’octet près, que l’affichage paginé soit activé ou non.

Chargez le plugin après l’éditeur, puis activez-le ou désactivez-le depuis votre propre interface :

<script src="richtexteditor/rte.js"></script>
<script src="richtexteditor/plugins/pagination.js"></script>

<script>
  var editor = new RichTextEditor("#editor");

  editor.setPageView(true);       // turn page view on
  editor.togglePageView();        // flip it
  editor.isPageView();            // -> true | false
  editor.getPageCount();          // -> number of pages
  editor.getPageGeometry();       // -> { pageWidth, pageHeight, margins..., contentHeight }
</script>

Les pages se coupent aux limites des blocs : un paragraphe, une ligne de tableau ou une image n’est donc jamais coupé en deux. Un saut forcé — ce qu’insère la commande de barre d’outils insertpagebreak — commence toujours une nouvelle page, exactement comme à l’export.

Mise en page du document

La géométrie provient de la mise en page propre au document lorsque votre application en fournit une : ce que vous voyez à l’écran correspond donc à ce que produisent les exports PDF et Word. Vous pouvez aussi la définir à l’exécution :

editor.setPageSetup({
  format: "Letter",          // A4 | Letter | Legal | A3 | A5 | Tabloid
  orientation: "portrait",   // portrait | landscape
  margins: { top: 1, right: 1, bottom: 1, left: 1 }   // inches, or "25mm" / "2cm" / "72pt" / "96px"
});

Option de configuration	Valeur par défaut	Rôle
`paginationEnabled`	`false`	Démarrer avec l’affichage paginé activé.
`pageFormat`	`"A4"`	Format du papier lorsque le document ne contient pas de mise en page.
`pageOrientation`	`"portrait"`	Portrait ou paysage.
`pageMargins`	`1in all round`	Marges, en pouces ou dans n’importe quelle longueur CSS.
`paginationShowPageNumbers`	`true`	Afficher le badge de numéro de page sur chaque page.
`paginationShowPageCount`	`true`	`Page 3 of 12` ou `Page 3`.

En-têtes et pieds de page

Le HTML de l’en-tête et du pied de page se répète sur chaque page et prend en charge les marqueurs {page} et {total} :

editor.setPageSetup({
  headerHtml: "Master Services Agreement &mdash; Acme Corp",
  footerHtml: "Page {page} of {total} &middot; Confidential"
});

Numérotation de listes juridique et à plusieurs niveaux

La numérotation juridique transforme une liste ordonnée imbriquée en numérotation hiérarchique des clauses — 1, 1.1, 1.1.1 —, le format dans lequel sont rédigés les contrats, les spécifications et les documents de politique.

<script src="richtexteditor/plugins/multilevellist.js"></script>

<script>
  // Acts on the ordered list containing the caret.
  editor.setLegalNumbering(true);
  editor.toggleLegalNumbering();
  editor.isLegalNumbering();     // -> true | false

  // The stylesheet, so your public page / print template can match the editor.
  editor.getLegalListCss();
</script>

La numérotation est produite par des compteurs CSS, et non en écrivant des numéros dans le texte. Votre balisage reste un <ol> / <li> sémantique et propre — une seule classe est stockée sur la liste racine —, si bien que les numéros ne peuvent jamais se désynchroniser lorsque des clauses sont insérées, supprimées ou réordonnées. Comme il s’agit de vrai CSS, le pipeline d’impression du navigateur l’affiche : l’export PDF et l’aperçu avant impression reproduisent donc la numérotation.

<ol class="rte-legal-list">
  <li>Definitions          <!-- 1.     -->
    <ol>
      <li>Agreement        <!-- 1.1.   -->
      <li>Parties          <!-- 1.2.   -->
        <ol><li>Discloser  <!-- 1.2.1. -->
            <li>Recipient  <!-- 1.2.2. -->
        </ol>
    </ol>
  <li>Obligations          <!-- 2.     -->
</ol>

Le séparateur et le suffixe se configurent avec legalListSeparator et legalListSuffix — par exemple "1-1-1" ou "1.1)" —, et le nom de la classe lui-même avec legalListClass.