Portable Document Format (PDF) (Web Design in a Nutshell, 2nd Edition)

5.4. Portable Document Format (PDF)

PDF (Portable Document Format) i s a technology developed by Adobe for sharing electronic documents. The remarkable thing about PDF files is that they preserve the fonts, colors, formatting, and graphics of the original source document. Ideally, a PDF document looks exactly the way it was designed, regardless of the platform, hardware, and software environment of the end user. It can be viewed on the screen or printed out to a high-quality hard copy.

PDF existed before the Web, but the two make great partners -- PDF is the ideal file format for sharing documents, and the Web provides a highly accessible network for distributing them. You can make any document into a PDF file and make it available from a web page. The advantage, of course, is that you have more control over fonts and layout, and the formatting is not limited by HTML.

Forms, documentation, and any other materials that rely on specific formatting are good candidates for PDF files. To use a classic example, the IRS makes tax forms available for download in PDF format so taxpayers can print them out at home without requesting them by mail or making a trip to the post office.

But PDF files are not totally static. They can contain links to online material and other PDF files. Adobe Acrobat 5 can even create interactive PDF forms which can be filled out, automatically updated, and submitted online. PDFs can also be dynamically generated based on user input.

With the control PDF offers over display, it's tempting to want to use it for all online material. It's important to understand that PDF is not a substitute for HTML, nor is it likely ever to be. But it is a powerful tool for sharing any sort of document electronically. It's like sending a piece of paper through the lines.

5.4.1. Viewing PDF Files

PDFs are viewed and printed via the freely available and widely distributed Acrobat Reader. Acrobat Reader is also available as a plug-in (called PDFViewer) or ActiveX control that is automatically installed with Internet Explorer and Netscape Navigator Versions 3.0 and higher on a variety of platforms including Windows, Mac, and Unix.

When a user clicks on a link to a PDF file from a web page, what happens depends on how the browser is configured. If the browser has the PDFViewer plug-in, the document displays right in the browser window; the plug-in adds a toolbar to the browser window for navigating through the PDF document. If the browser is configured to use Acrobat Reader as a helper application, the browser automatically launches the reader, and the PDF displays in the separate application window.

Without the Reader or plug-in, when a browser encounters a PDF file, it issues a prompt to install the plug-in, choose a helper application, or save the file to disk.

5.4.2. Creating PDF Files

The standard application for creating PDF files is Adobe Acrobat, which is in Version 5 as of this writing. This commercial product gives publishers the greatest control over PDF creation.

When Acrobat is installed on a computer, making PDFs is simple. From an Adobe application, just open the document and export it to the PDF format. In Microsoft Office (Windows only), there is a PDF Maker icon right on the toolbar. To create a PDF from a non-Adobe application, print it to a PostScript file (choose "File" instead of "Printer" in the Print dialog box). Then open the PostScript file in Acrobat Distiller (part of the Acrobat package) and save it as a PDF file. In both scenarios, a dialog box appears, in which you can specify a large number of quality and optimization settings.

Once the PDF file has been created, it can then be opened in Acrobat for further fine-tuning and advanced settings. See the Adobe web site (http://www.adobe.com) or the Acrobat documentation for more information on creating and fine-tuning PDF files.

The important thing to remember is that the PDF file needs to be optimized for web delivery, so be sure to check the "Optimized" box in whatever program you use to create your PDFs. Optimizing the PDF structures the document and the media it contains so that it can be delivered page by page. It also results in much smaller file sizes. When you save the PDF, be sure that you give it the proper .pdf suffix.

Alternatives to Acrobat

Acrobat is not your only option for converting your files to PDF. Because PDF is an open source technology, Adobe has opened the door to third-party developers who want to support the ability to create PDFs. These include shareware programs, Perl scripts, and even printer driver-based tools that fool your programs into thinking they are printing to a printer, when in fact they are creating a PDF file. A good place to look for PDF-related tools is PlanetPDF (http://www.planetpdf.com).

There are also online conversion services: you upload your file and it is converted for you for a small fee or subscription. Adobe has its own conversion service called Create Adobe PDF Online that charges a monthly fee, but your first three conversions are free. It is available at http://cpdf.adobe.com. Even better, check out Gohtm.com (http://www.gohtm.com), where they convert your documents to PDF for free!

These services may be a good alternative if you only need to create PDFs occasionally. If you plan to make PDFs part of your publishing process, Acrobat is a good investment because of the advanced features it offers.

5.4.3. HTML for Adding PDF Files to Web Pages

There are two basic ways of calling a PDF file from a web page: linking to the file (or a specific page within it) and embedding it in the page like an image.

5.4.3.1. Linking to a PDF file

Creating a link to a PDF file is the same as linking to any other document. Just include the file name in the URL as shown in this example:

<A HREF="documentation.pdf">Link to PDF file</A>

The PDF file resides on the server like any other media file. Most modern server software is preconfigured to recognize the PDF MIME type (type application/pdf, extension .pdf).

5.4.3.2. Linking to a specific page in a PDF file

It is possible to create a hypertext link to a specific page in a PDF document, allowing readers to jump just to the relevant information without waiting for the entire PDF document to download. It's a useful feature, but a number of criteria must be met in order for it to work:

The server must support byteserving, a feature on web servers that allows them to deliver one page of the PDF file at a time. Byteserving is supported on the following servers: Microsoft Internet Information Server, Netscape Enterprise and Fastrack Servers, Apache, and Starnine Webster 3.0 (for Mac).
The user's browser must be Netscape Navigator or Microsoft Internet Explorer Version 3.0 or higher.
The user must have the Acrobat Plug-in or ActiveX control installed in the browser so that PDF files are displayed within the browser window.

Assuming all these elements are in place, it is easy to create the PDF and link to it. With the PDF document open in Acrobat, create a new destination at the page you want to link to and give it a logical name (e.g., section3). Add destinations with the Destinations palette (Window Choose Destinations). Repeat for additional destinations. When you save the PDF file, be sure to check the Optimized checkbox. Optimizing the PDF file structures it page by page.

In the HTML document, make a link to the PDF file and the specific destination. The section name is separated from the file name by a hash symbol (#), as shown in this example:

<A HREF="article.pdf#section3">

For more information on page-serving PDF files, see the Adobe.com tutorial at http://www.adobe.com/epaper/tips/acrlongpdf/main.html. For more technical information about byteserving, see http://www.adobe.com/support/techguides/acrobat/byteserve/byteservmain.html.

5.4.3.3. Embedding a PDF file

A single-page PDF file can be embedded in a web page just like an image using the <img> tag:

<IMG SRC="directions.pdf" WIDTH="450" HEIGHT="400">

If a multipage PDF document is embedded in a web page, only the first page is displayed, without an Acrobat navigation toolbar. It is treated just like a static graphic. It is also advisable to list the file size of the file next to the link so users can make an informed decision whether to download it.

If the user clicks on the embedded PDF image, however, it launches the Acrobat Reader, where the multipage document is fully functional. This technique can be used to show a thumbnail of the PDF file before the file itself is opened.

5.4.4. Tips for Linking to PDF Files

As for any large media file, it is good web design etiquette to provide some indication of what users will get when they click on a link to a PDF file. The file format itself can be shown with a small PDF icon, by writing out the name of the file with its .pdf suffix, or by identifying the file type next to the link in parentheses, e.g., "link (PDF)".

As a courtesy to your users, consider also including a link to the Acrobat Reader download site. As of this writing, the URL is http://www.adobe.com/products/acrobat/readermain.html.

5.4.5. For Further Reading

Gordon Kent's book Internet Publishing with Acrobat (Adobe Press), although somewhat out of date (it's based on Acrobat 3.0), is packed with succinct information about creating and using PDFs over the Web. It is also available for free in PDF format at http://www.novagraphix.com/Internet_Publishing_with_Acrobat/.

The Adobe site offers the best online resources for information on PDF. Be sure to check the following sections:

http://www.adobe.com/products/acrobat/main.html: Adobe Acrobat Product Page

http://www.adobe.com/epaper/main.html: ePaper Center

http://www.adobe.com/epaper/tips/main.html: ePaper Center Tutorials

http://www.adobe.com/support/techguides/acrobat/main.html: Acrobat Technical Guides

Once you are up and running, these sites have links and resources to keep you up to date with PDFs:

http://www.pdfzone.com: PDF Zone

http://www.planetpdf.com: PlanetPDF