Congratulations! This is a pretty nice PDF (well, a layout could be a bit better, but you can easily improve it.
Now, you should be be disappointed that your document cannot precisely match the HTML rendering of this information. This is not possible in principle. You should not try to hard to make a perfect match, anyway. These two document formats are build on very different design principles. PDF is like an electronic print version: all rendering is solidly fixed on each sheet of paper. In contrast, HTML is fluid and it does not have any fixed view: it depends on many factors, first of all, the width of the client area of the Web browser window, version of the browser, its rendering defaults (usually, CSS defines only important details of rendering leaving the rest to defaults).
There is also know one-to-one correspondence between structural elements of both formats — HTML is much more logical, it provides pretty good isolation of logical structure from presentation (which is mostly delegated to CSS) and this isolation becomes deeper as the standards develops (compare with HTML5). In contrast, PDF is much more raw rendering standard. I think you know this much better than I do as you recently finished this job.
So, how to solve this problem in practice?
I think all you can do is improvement of the pure design of the document in both formats. This is more of graphical designer work than programming, is more about applied cognitive science. You need to focus of some features common to any format which will catch the human eyes on the level of structure of the document which can make the differences not essential for perception. The best thing to do it is to work at the level of structure of the document. For example, if you have three levels of document section (like h1, h2 and h3 in HTML) make the title of the section recognizable, so the reader could easily recognize what level is that by its features, but not by the detail of the test itself (indents, margins, font, etc. as the perception of the paragraph is more fluid and dependent on the rendering conditions). Also, it's very important to keep the document design simple. You should not use any single decoration, not even a tiny line without well-defined purpose.
Good luck,
—SA
Updated 22-Jan-12 20:45pm
v2
Submit an article or tip