Making a Large Resolution Web Page print on a Normal Paper

Google+ Pinterest LinkedIn Tumblr +

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, text), just contact me at 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.

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

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.

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.



About Author

Leave A Reply