Paragon
Examples / R-demo-code-001

Demo Long Table

PowerPoint RTL

Generate the PowerPoint How a template is put together

The template

This is the whole thing — an HTML page with {{ }} bindings. Nothing is generated from a designer format; what you see here is what the engine renders.

template.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<!-- Stylesheets, scripts and fonts go here. Every page of this report gets them. -->
<link rel="stylesheet" href="assets/css/report.css">

<style>
    /*
      The body stands for the sheet this page prints onto.

      min-height rather than height: height would pin the body to one sheet, so a page whose
      content outgrows it would leave anything positioned against the body behind on the first
      sheet. min-height gives a full page when the content is short and grows when it is not.

      flex, because a child cannot fill a min-height parent with height: 100% — a percentage
      height needs a definite height to resolve against, and min-height is not one. flex: 1 on
      the child is what fills the leftover space.
    */
    body {
        margin: 0;
        font: 11pt sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
</style>
</head>
<body>

<!--
    The report's data, as JSON, for chart and script code to read:

        const model = JSON.parse(document.getElementById('report-data').textContent);

    Here rather than in a page because the data belongs to the report: this file is merged into
    every page, so writing it once puts a copy in each.
-->
<script id="report-data" type="application/json">{{json}}</script>


  <!--
    What goes on every sheet. Leave either empty for none, and leave room for them in the page's
    own padding — neither reserves space, they draw over the content.

    The header is placed in the page, fixed to the top of the sheet, so this report's CSS styles it
    and the designer's preview shows it exactly as it will print. The footer is drawn by the browser
    instead, because it is the only way to print the page number:
        Page <span class="pageNumber"></span> of <span class="totalPages"></span>
  -->
  <template id="report-header"></template>
  <template id="report-footer"></template>

</body>
</html>

What it carries

Stylesheets, scripts, images and fonts travel inside the report, so nothing is resolved from the outside while it renders.