Banana.Report.ReportStyleSheet

The class Banana.Report.ReportStyleSheet is used to set the styles to format a report.
It contains multiple Banana.Report.ReportStyle objects.

Create a report stylesheet

A report stylesheet object is created using the function Banana.Report.newStylesheet().

// Create a new stylesheet for the report
var stylesheet = Banana.Report.newStyleSheet();

Page size and orientation

At this moment the report is rendered based on the page size defined in the default printer device.
You can't define a page size, but you can set the orientation with the Style @page.

Page orientation can't be set only once per report, you can't switch from potrait to landscape. 

var stylesheet = Banana.Report.newStyleSheet();
stylesheet.addStyle("@page").setAttribute("size", "landscape");

Methods

addStyle(selector)

Create a new style with the given selector. The return object is of type Banana.Report.ReportStyle.

The syntax of selector follows the CSS specification.

• Style name without a preceding dot are reserved predefined tags like "td", "p", "table"
• Style name for new class need a preceding point ".myStyle" in the addStyle method.
  The dot name is not used when adding the class name to the element

report.addParagraph("Text to print 24pt", "myStyle");
var style = stylesheet.addStyle(".myStyle");
myStyle.setAttribute("font-size", "24pt");
myStyle.setAttribute("text-align", "center"); 

report.addCell("Text to print");
var styleTd = stylesheet.addStyle("td");
styleTd.setAttribute("font-weight", "bold");

addStyle(selector, attributes)

Create a new style with the given selector and attributes. The return object is of type Banana.Report.ReportStyle.

The syntax of selector and attributes follow the CSS specification.

var style2 = stylesheet.addStyle(".style2", "font.size: 24pt; text-align: center");

parse(text)

Load the styles from the given text. The text follow the CSS specification.

stylesheet.parse(
  "p.style1 {font-size:24pt; text-align:center;}" +
  "@page {size:A4 landscape;}"
  );

See the How to use CSS file  tutorial example.

The selector

The selector follows the css syntax, following you will find some examples:

You can get the tag of an element through the method getTag();

Function for adding styles

When you have multiple styles it would be helpful to add a function for all the styles you need. For example:

function exec() {
  // Create a new report object with the title "Report title"
  var report = Banana.Report.newReport("Report title");
  
  // Add example text for each style in the report
  report.addParagraph("Hello World", "title");           // Example text for title style
  report.addParagraph("Subtitle Example", "subtitle");   // Example text for subtitle style
  report.addParagraph("Header Example", "header");       // Example text for header style
  report.addParagraph("Data Example", "data");           // Example text for data style
  report.addParagraph("Centered Text Example", "centerAlign"); // Example text for center alignment
  report.addParagraph("Right-Aligned Text Example", "rightAlign"); // Example text for right alignment
  report.addParagraph("Footer Example", "footer");       // Example text for footer style

  // Create a new stylesheet object for the report
  var stylesheet = Banana.Report.newStyleSheet();

  // Call the function to define and apply styles to the stylesheet
  addStyles(stylesheet);

  // Display the report in a preview window with the applied stylesheet
  Banana.Report.preview(report, stylesheet);
}

// Function that defines all the CSS styles for the report elements
function addStyles(stylesheet) {
    // Style for headers: bold font and a bottom border
    stylesheet.addStyle(".header", "font-weight: bold; border-bottom: 1px solid black;");
    
    // Style for data cells: padding and a light bottom border
    stylesheet.addStyle(".data", "padding: 5px; border-bottom: 0.5px solid #ddd;");
    
    // Style to center-align text
    stylesheet.addStyle(".centerAlign", "text-align: center");
    
    // Style to right-align text
    stylesheet.addStyle(".rightAlign", "text-align: right");
    
    // Style for the main title: larger font, bold, centered, with top margin
    stylesheet.addStyle(".title", "font-size: 16px; font-weight: bold; text-align: center; margin-top: 20px;");
    
    // Style for subtitles: smaller font, centered, with bottom margin
    stylesheet.addStyle(".subtitle", "font-size: 10px; text-align: center; margin-bottom: 20px;");
    
    // Style for the footer: small font, centered, with top margin
    stylesheet.addStyle(".footer", "text-align: center; font-size: 8px; margin-top: 20px;");
}