Making a High Resolution Web Page Print on a Normal Paper

Introduction
You have the following available computer screen resolutions: 800 X 600, 1024 X 768, 1152 X 864, 1280 X 960, and 1280 X 1024. If you design your web page with dimensions in pixels for the 800 X 600 resolution almost everything on the web page would be printed on your normal paper, when you execute the Print command of your browser; there may be little or no vertical right stripe truncation. If you design your web page with dimensions in pixels for any of the higher resolution, when you give the browser the Print command a right vertical stripe of the web page would not be printed. Because of this striping, you typically have a page designed for display on the computer screen and a corresponding page design for printing.

In this article I show you how you can design a web page for a large (high) resolution and have that same page (instead of a corresponding page) printed on your normal letter or A4 paper.

You need basic knowledge in HTML and CSS in order to understand this article.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Web Page Design for all Resolutions
I wrote an article once titled, "Web Page Design for All Resolutions", in this blog. In that article I wrote that if you want your web page to suit all resolutions, uses the percentage instead of pixel for the width value of all your HTML elements. I also wrote that you should not give height value for any of the elements. Normally, when you give a width value to any element (including image) the browser gives the corresponding height value or an appropriate height value for the element.

In this way, with the percentage unit, the width you have for your large (high) screen resolution web page, will be the width of the printed document, when the page is printed on your normal paper. The problem here is that there will be a lot of wrapping of inline elements in order that a wide content on the screen should fit on a narrow paper. So the corresponding height of the paper will be more than the corresponding height of the web page, on the wide (large) screen.

Solution
The solution I am offering is that you should design your web page for the high (wide) resolution in such a way that when the wrapping occurs during printing, it should lead to little change in the overall presentation. You achieve this by allowing all the elements in containing elements in their default state, so far as the CSS display property is concerned. That is, inline elements such as IMAGE, LINKS, and SPAN elements remain inline elements in containing elements, while block-level elements such as the Paragraph element, remain block-level. In that way, the considerable wrapping of inline elements will lead to little change in overall presentation.

Examples of containing elements are the DIV, and FORM elements. These elements would always contain smaller HTML elements. This solution is applicable to cells of the TABLE element, even though cells of TABLE elements are not strictly containing elements.

So far as the CSS display property is concerned, in a containing element, you can change a block-level element to an inline element and not an inline element to a block-level element. Remember, you can always float an inline element left or right within a containing element.

Partitioning
You generally partition your web page into different large portions. In each partition you put in smaller HTML elements. With small resolution screens you can partition your web page using HTML DIV elements. With large resolution screens and with today's browsers it is difficult to partition your web page using DIV elements; precisely it is difficult to have three consecutive inline elements on one line.

So, with today's browsers and with large screen resolutions you have to use HTML Frames to partition your web page. Search Engines do not work well with frames, but there is nothing we can do.

Related Articles
I have written other articles that are related to this one. The titles of the articles are:

Web Page Design for All Resolutions
Designing Web Page for Printing
Guide to HTML Layout

To get to these articles, type the name of the article with my name, Chrys, in the Search Box of this page, and click Search. If there is a Google Search Box on the page, use it.

Chrys