Project

General

Profile

CSS 2.1/3 basics, and @page.

Layout

The velocity report plugin allows report designers to create layouts using standard XHTML markup and CSS 2.1.<br>
CSS 3's @page module is also supported, and provides very sophisticated tools for dealing specifically with paged media.

By supporting XHTML markup, CSS 2.1 and CSS 3's @page module the velocity report plugin provides report designers with more control over their layouts than with any other reporting tool available for Servoy!

CSS Media Types

The velocity report plugin determines how a report is to be presented on different media by way of the target medium, as specified directly within your CSS, or by a media attribute within your style tag.

Examples

Specify the target medium from a style sheet with the @media or @import at-rules.

@import url("my.css") screen;
@media print {
  /* style sheet for print goes here */
}

Specify the target medium within the document language.

...<HTML>
   <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK REL="stylesheet" TYPE="text/css" 
     MEDIA="print" HREF="foo.css">
   </HEAD>...

"Print" and "screen" media types are supported in the following way: * The print media type is used when reports are rendered to PDF, or when reports are viewed in print-preview mode, in the viewer. * The screen media type is used when the report is shown in a web browser, or in the viewer, when the viewer is not in print-preview mode.

Media type "all" can be used to specify that your report should be presented using the same style for both screen (continuous) and print (paged) media types.

Including CSS in Your Markup

CSS can be included in your markup in one of three ways: # Using an external stylesheet resource # Using an Internal style sheet # Using inline style

Examples

External stylesheet

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Note: In the above example a relative path is used to specify the stylesheet "mystyle.css."<br>
In the case of the velocity report plugin, for a relative path to resolve to the value of your report directory server-plugin property ("velocityreport.reportfolder"), you will need to embed a special $baseHREF Velocity tag somewhere inside the HTML `<HEAD>` tag,
for example:

<head>
<title>Set the base HREF</title>
$baseHREF
</head>

Internal stylesheet

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline style

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

CSS 2.1 Reference

You can refer to the W3C specs here:
http://www.w3.org/TR/CSS21/

Or check the W3Schools.com online reference here:
http://www.w3schools.com/css/css_reference.asp

CSS 3's @Page Module for Paged Media

The @Page module is very powerful. Parapharasing the W3C's specification and related examples in this wiki page wouldn't be doing it justice.

Please see: http://www.w3.org/TR/css3-page/

In your @page definition, You can define the page size with
-fs-page-width: with a float value in inch, cm or mm
-fs-page-height: with a float value in inch, cm or mm

Extensions to the CSS 2.1 Specification

Please also see: http://pigeonholdings.com/projects/flyingsaucer/R8/doc/guide/users-guide-R8.html#xil_43
for specific extensions available from the xhtmlrenderer library.