Herong's Tutorial Notes On XSL-FO and XHTML
Dr. Herong Yang, Version 2.00

XHTML Publication - From Web to PDF

Part:   1   2  3 

This tutorial helps you to understand:

  • Requirements for an XHTML to PDF conversion tool
  • The XHTML Source File Format
  • The CSS File
  • The XSL File with XSLT and XSL-FO Statements
  • Process Instructions

Now, I have a good understanding of all XML related technologies: DOM, SAX, DTD, XSchema, XSLT, XSL-FO, XHTML, and CSS. Let me put them together and write a system to help me organize my notes so they can be published in both XHTML and PDF formats.

Requirements for an XHTML to PDF conversion tool

Here is my requirements for my own system:

  • Source copies of notes should be written in XHTML format.
  • Notes should be organized as one chapter per file.
  • Source XHTML files should be well formatted for Web browsers. A CSS file should be used to archive the best result possible.
  • A XSLT file with XSL-FO statements is needed to convert XHTML source files to FO files.
  • FO files for different chapters should be merged into a single final FO file.
  • The final FO file can be formatted into a PDF file, ready to print.

The XHTML Source File Format

Since the XHTML source files are the starting points, their formats must be simple and easy to use. They must also contain all the formatting properties needed for both Web browsers and PDF processors.

To get a full copy of my XHTML source file format, you can use your Web browser to view the source code while you are browsing this page on the Web. Here I will just show you some sections from xhtml.xhtml: 

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="book_fo.xsl"?>
<html><head>
<meta title="Herong's Notes On XSL-FO and XHTML"/>
<meta version="Version 1.01"/>
<meta author="Dr. Herong Yang"/>
<meta copyright="Copyright (c) 2002 by Dr. Herong Yang. ...
<meta pagetitle="eXtensible Hyper-Text Markup Language (XHTML)"/>
<meta date="23-Dec-2002"/>
<meta filename="xhtml.xhtml"/>
<link rel="stylesheet" type="text/css" href="book.css"/>
<title>Herong's Notes On XSL-FO and XHTML - eXtensible ...
</head><body>
<table class="frame" cellspacing="0" cellpadding="0">

<tr><td class="frame_top" colspan="3">
<font size="+3">Herong's Notes On XSL-FO and XHTML</font>
<br/>- by Dr. Herong Yang, Version 1.01, 23-Dec-2002
</td></tr>

<tr><td class="frame_left"></td>
<td class="frame_center">

<table class="page_border" cellspacing="0" cellpadding="0">
<tr><td colspan="3" height="1"><img height="1" width="100%" ...
<tr><td width="1" rowspan="1"><img height="100%" width="1" ...
<td>

<table class="page" cellspacing="0" cellpadding="0">
<tr><td>

<table cellspacing="0" cellpadding="0" border="0">
<tr><td aligh="left" colspan="3"><font size="-1"><b>...
<tr><td align="left"><font size="-1">Dr. Herong Yang, ...
<td align="center"><font size="-1"></font></td>
<td align="right"><font size="-1">
[ <a href="../">Home</a> | <a href="help.xhtml">Help</a>...
</font></td></tr>
<tr><td class="page_line" colspan="3"><img height="1" ...
<tr><td class="body" colspan="3">

<p class="chapter_title" id="xhtml.xhtml">
eXtensible Hyper-Text Markup Language (XHTML)
</p>

<p class="section_title">
What is XHTML
</p>

<p>
<b>XHTML</b>: A markup language for organizing information ...
World Wide Web (WWW). XHTML is an improvement of HTML to meet the ...
</p>

...

<p class="section_title">
"Hello world!" Example of XHTML
</p>

<p>
1. Use any text editor to enter the following lines of text into a file: 
</p>
<pre class="block_source"><?xml version="1.0"?>
<html><body>Hello world!</body></html>
</pre>

...

</td></tr>
<tr><td class="page_line" colspan="3"><img height="1" ...
<tr><td align="left"><font size="-1">Dr. Herong Yang, ...
<td align="center"><font size="-1"></font></td>
<td align="right"><font size="-1">
[ <a href="../">Home</a> | <a href="help.xhtml">...
</font></td></tr>
<tr><td aligh="left" colspan="3"><font size="-1"><b>
Herong's Notes On XSL-FO and XHTML - eXtensible Hyper-Text Markup ...
</table>

</td></tr>
</table>

</td>
<td width="1" rowSpan="1"><img height="100%" width="1" ...
<tr><td colSpan="3" height="1"><img height="1" ...
</table>

</td>

<td class="frame_right"></td></tr>

<tr><td class="frame_bottom" colspan="3">
...
</td></tr>

</table>
</body></html>

(Continued on next part...)

Part:   1   2  3 

Dr. Herong Yang, updated in 2006
Herong's Tutorial Notes On XSL-FO and XHTML - XHTML Publication - From Web to PDF