XEPOnline HTML to PDF Test Document

I am a test paragraph!

Headings

Heading level 3 without any specific style changes

Heading Level 4

Heading Level 5

Heading Level 6

Other Block-level Structures

The following shows various block-level structures, some with standard HTML interpretation of the style and other with css styling applied to augment/change the formatting.

This is a paragraph with some CSS styling applied

This is the standard <blockquote> element. It provides an indented look to the text. This is rarely used in the days of <div> elements, classes and css styling but it is supported.

This is the standard <pre> element. Again, most folks would use
css to style output like this, but for old HTML compatibility 
we support the "pre" element.

Inline Elements

Testing some inline elements. There are some elements still used like "b" for bold and "i" for italic. They can even be combined like bold italic underline. The more modern approach of using <span> with classes and css is also supported. A variety of other elements supported like the quote element even^superscripts and_subscripts.

Tables

Tables: This section tests various tabular structures including borders, colors and spanning.

A fancier table with all CSS styling. Also note that this table implements "thead" and "tbody" which map to the appropriate XSL FO constructs so that the table header and table footer is repeated at a break in the page.

Lists

Bullet-style Lists

Testing un-numbered lists, first a simple list

• One
• Two
• Three

Another list with list-style-type setting in CSS

• One
• Two
• Three

Now, nested lists

• One
• A list inside the other list
  • Level 2 bullet
  • A list inside the other list
    • Level 2 bullet
    • A list inside the other list
      • Level 2 bullet
      • Level 2 bullet
      • Level 2 bullet
    • Level 2 bullet
  • Level 2 bullet
• Three

Numbered Lists

Testing the same lists as above, numbered, first a simple list

1. One
2. Two
3. Three

Another set of lists with list-style-type setting in CSS

1. One
2. Two
3. Three

1. One
2. Two
3. Three

1. One
2. Two
3. Three

Now, nested lists

1. One
2. A list inside the other list
   1. Level 2 bullet
   2. A list inside the other list
      1. Level 2 bullet
      2. A list inside the other list
         1. Level 2 bullet
         2. Level 2 bullet
         3. Level 2 bullet
      3. Level 2 bullet
   3. Level 2 bullet
3. Three

Images

Images in web pages can be linked via absolute or relative references or they can be embedded directly in the web page using a data-uri scheme. All of these methods are supported. In addition, modern browsers make signifcant use of SVG as a format that can be directly included in the page. This is why we selected XSL FO for back-end processing of the information. XSL FO and specifically XEPOnline supports SVG not by converting the SVG to an image, but by processing SVG to the output, retaining all the vector-based information.

Image Example #1: Static SVG

This is a static SVG inserted directly in the HTML page.

Image Example #2: Linked PNG

This is a PNG inserted using "src" attribute of the "img" tag. When formatting, XEPOnline needs to be able to access the image in question so the path of the web page is sent using xml:base to provide XEPOnline with the ability to resolve the path to the image.

Processing the <img> also requires special handling because HTML5 allows non-closed tags. Since XSL FO is an XML-based processing solution, the XEPOnline javascript handles this by creating valid XML first before submitting.

Take special care if using auto-scaling of images. If you desire an exact size of the image, it should be specified in the HTML or css. The width is carried through to the PDF. The following two images are one locally referenced on the submit website and the same image remotely referenced.

Image Example #3: Base-64 Encoded Images Using data: URI

This image of a folder icon is directly in the web page as base-64 encoded.

Image Example #4: Dynamic, Javascript-based SVG Charting

The following chart is dynamically generated using Anychart JavaScript library. This shows that even page-based dynamic information can be sent to the engine after processing in its full SVG format. There is not pre-processing of this SVG to image format at any time. The full vector information is carried through to the PDF.

Image Example #5: Dynamic, Javascript-based SVG Charting II

The following chart is dynamically generated using d3 JavaScript library. You can even see that dynamic SVG is printed as it exists at any time. This sample is dynamic, click this paragraph and the pie chart data changes. The print file will represent what is on the screen at that time.

Hyperlinks

Hyperlinks can be carried into the output PDF.

External

This link should go to the XEPOnline web site.

Internal

Links can also point to internal destinations which are carried through to the PDF. Using many of the concepts above, you could create a list that is the document table of contents styled with css to add images and control appearance.

• XEPOnline HTML to PDF Test Document
  • Why Did We Develop This?
  • How it Works
  • Currently Supported Elements
  • Style Handling
  • Headings
  • Other Block-level Structures
  • Inline Elements
  • Tables
  • Lists
    • Bullet-style Lists
    • Numbered Lists
    • Special Processing
  • Images
    • Static SVG
    • Linked PNG
    • Base-64 Image
    • Dynamic, Javascript-based SVG Charting
  • Hyperlinks
    • External
    • Internal

Floating Content

Many current implementations in HTML make use of responsive designs. The challenge is to try and replicate this HTML into the printed page. The trigger here is the float element. We will start with an easy example, how about replicating a drop-cap.

Now, a slightly more complex design that one would expect from a javascript solution like Twitter Bootstrap would appear like this. We are directly writing the styles and not using Twitter Bootstrap for testing purposes.

Custom Tips and Tricks

Pass-Through XSL FO Styling

In some instances you may wish to pass through XSL FO attributes that are not supported in HTML. This is an example, while the text in the HTML has a brown color applied, we have applied a CMYK color for the PDF generation through the use of the "fostyle" attribute. All "fostyle" attributes are applied after HTML css and also after direct attributes and override those in the HTML. This paragraph also has "text-align" justify in the HTML and font-stretch, font-size-adjust and hyphenate only in the PDF output. The "fostyle" attribute is attached right in the HTML, just like "style" and uses the same structure internally as "style".

Footnotes

Since HTML supports arbitrary XML inside the markup, one of the easiest ways to do some simple footnotes is to simply use the regular XSL FO markup¹¹ This is a sample footnote in the body of the document. The css shows the footnote on mouseover and the PDF will render as a footnote. Because the css is tuned for mouseover display, the HTML css for the structure is discarded but you can use <span> to style the output to PDF. for a footnote. This paragraph is an example of this technique. The XEPOnline stylesheets have implemented the footnote structure, will recognize it and transfer it to the backend. You would implement inside the html as:

<footnote>
    <sup>your character here for inside the HTML</sup>
    <footnote-body>
        <block>
            <sup>optional footnote char here for inside print footnote</sup>
            your inline HTML markup here for footnote formatting 
            in PDF. Only inline styles (b, i, span) are supported in the css
            provided for footnotes. Of course, you can implement
            your own.
        </block>
    </footnote-body>
<footnote>

Custom XML in Web Page

With today's browser technology, you can use css to style any content you wish. This includes any generic XML inserted into the HTML file. For example, consider that you just wish to place the sales data through some dynamic process into a table. If you examine the source HTML for this page here, you will see only XML. It is 100% styled with external css in the file named "xmlsamp.css".

And this table is formatted according to the css styling, even carried through to the PDF. You so not have to change XML tags, you only indicate their style as "table" or "table-row" or "block" or "inline" in the css and XEPOnline will format the generic XML according to the css styling to print.