Most web developers create links to PDF files so that Adobe Acrobat or the Adobe Reader takes over the entire browser window. Few people leverage the fact that you can display a PDF file in a web page just like any other graphic by using the embed tag in your HTML file. You can also use PDF Open Parameters in the src property to make the document look better on that page but those don’t work the same way in all browsers.

Careful attention to crafting the HTML page, setting the embed tag parameters properly and setting properties in your PDF correctly can make a PDF embedded in an HTML page work just as seamlessly as a SWF file.

Below is an example of simply adding the PDF file name to the src property of the embed tag; it doesn’t look that great.

<embed src="FullScreenEmbed.pdf" width="500" height="375">

In the example below, I’ve added parameters to the URL that suppress the toolbar, navigation panes, and scrollbars of the Acrobat or Reader user interface. This looks much better. You can navigate the PDF by clicking on it (to activate the embedded PDF) and then use the arrow keys on your keyboard to scroll through the document. The other advantage of this method is that you don’t need to change the PDF to provide a better experience; you simply adjust the way it looks by adding parameters to the URL.

<embed src="FullScreenEmbed.pdf#toolbar=0&navpanes=0&scrollbar=0" width="500" height="375">

The example below demonstrates the solution that, in my opinion works the best. Here, I used Acrobat to set the PDF to “Open in Full Screen mode” in the “Document Properties” dialog box.

<embed src="FullScreenEmbed.pdf" width="500" height="375"/>

Setting the document to open in full screen mode will cause the PDF to fill the entire area specified in the width and height properties of the embed tag. The PDF page size is 10 inches by 7.5 inches so I use a width of 500 pixels and a height of 375 pixels so that the aspect ratio of the embed object window and the PDF match. The PDF will not stretch to fill the area in the same way that an image file would. Instead, the PDF will display in the center of the area and fill the rest with the “Full Screen Appearance Background Color” which is an Acrobat user preference but their color choice may not fit with the style of your web page so it’s best to keep the aspect ration the same. Of course, your document can change the background color setting through JavaScript by adding, for example, “app.fs.backgroundColor = color.white;” as a document level JavaScript. You can read about how to use the built-in color arrays and create your own on page 193 of the JavaScript™ for Acrobat® API Reference.

Setting the document to open in full screen mode will also cause the document to “play” in the browser same way that it would if it were in full screen mode in Acrobat or Reader. All of your animations and page transitions will display properly.