Diseño de página

Diseño de página: paginación y numeración de estilo legal

Dos plugins para trabajar con documentos: contratos, especificaciones, informes, políticas. Una vista de página paginada en vivo que muestra los límites reales de las páginas, encabezados, pies de página y números de página, y una numeración de estilo legal de varios niveles (1, 1.1, 1.1.1) para documentos con cláusulas numeradas. Ambos se incluyen en la licencia estándar. Para saber cómo se proyecta un DOM continuo sobre la geometría real del papel, consulta cómo funciona la vista de página paginada en un editor del navegador; la parte de la numeración se explica en numeración de estilo legal con contadores CSS.

Paginación Configurar página Encabezados y pies de página Numeración de estilo legal

Vista de página paginada

La vista de página muestra el área editable como una columna de papel con el ancho real de la página y dibuja un límite, un número de página y, opcionalmente, un encabezado y un pie para cada página: la vista de diseño de impresión que ofrece un procesador de textos. Es puramente visual: nada de lo que dibuja se escribe en tu contenido, y el HTML que guardas es idéntico byte a byte con la vista de página activada o desactivada.

Carga el plugin después del editor y actívalo o desactívalo desde tu propia interfaz:

<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>

Las páginas se cortan en los límites de los bloques, así que un párrafo, una fila de tabla o una imagen nunca se parten por la mitad. Un salto forzado (lo que inserta el comando insertpagebreak de la barra de herramientas) siempre empieza una página nueva, exactamente igual que al exportar.

Configurar página

La geometría sale de la configuración de página del propio documento cuando tu aplicación la proporciona, así que lo que ves en pantalla coincide con lo que producen las exportaciones a PDF y Word. También puedes establecerla en tiempo de ejecución:

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"
});

Opción de configuración	Predeterminado	Función
`paginationEnabled`	`false`	Empieza con la vista de página activada.
`pageFormat`	`"A4"`	Tamaño del papel cuando el documento no lleva configuración de página.
`pageOrientation`	`"portrait"`	Vertical u horizontal.
`pageMargins`	`1in all round`	Márgenes, en pulgadas o en cualquier longitud CSS.
`paginationShowPageNumbers`	`true`	Dibuja la etiqueta con el número de cada página.
`paginationShowPageCount`	`true`	`Page 3 of 12` frente a `Page 3`.

Encabezados y pies de página

El HTML del encabezado y del pie se repite en cada página y admite los marcadores {page} y {total}:

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

Numeración de listas de varios niveles o de estilo legal

La numeración de estilo legal convierte una lista ordenada anidada en una numeración jerárquica de cláusulas (1, 1.1, 1.1.1), el formato en que se redactan los contratos, las especificaciones y los documentos de políticas.

<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 numeración se genera con contadores CSS, no escribiendo números en el texto. Tu marcado sigue siendo <ol> / <li> semántico y limpio (solo se guarda una clase en la lista raíz), así que los números nunca se desincronizan al insertar, borrar o reordenar cláusulas. Como es CSS real, lo representa el proceso de impresión del navegador, lo que significa que la exportación a PDF y la vista previa de impresión reproducen la numeración.

<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>

El separador y el sufijo se configuran con legalListSeparator y legalListSuffix (por ejemplo, "1-1-1" o "1.1)"), y el propio nombre de la clase con legalListClass.