How wide is my printed page?

@PapaGeekJan 31.2011

The actual width of the browser window can be in a variety of DOM locations based on the browser:

width = window.innerWidth
width = document.documentElement.clientWidth
width = document.body.clientWidth

to mention a few.

Does anyone know if the DOM also holds information about the width of the printed page?

to post a comment

@omnicityFeb 01.2011 — #How could it possibly know? Until you have gone into the print dialog then you haven't chosen a printer, or a paper size for that printer, never mind adjusted the borders...

Depending on what you want to do, a simple print-only style sheet may help.

@PapaGeekauthorFeb 01.2011 — #I am in the process of writing a JavaScript that will select a different CSS file from a list of alternate style sheets based on the width of the browser window, sort of like media queries, but it will work on all browsers and allow for a default setting. It works on the same principle as the media print style sheet.

Since the browser has to know the size of the printed page before it renders the page, (how does it know where to break the lines), I was hoping that this information would be available to a JavaScript. Basically I was trying to define two print media style sheets, one displaying the page with a single column of text and the other with two columns, then choose the appropriate style sheet base on the page width (landscape or portrait) of the printer.

@omnicityFeb 01.2011 — #I dont quite understand what you need to do with JS that you can't do with media queries?

I also don't understand what relation you think there is between the browser width/height/orientation and the printed page?

@PapaGeekauthorFeb 01.2011 — #Media queries only work on the latest versions of a few browsers.

I also have not been able to get a straight answer on how media queries handle the default case. The biggest problem with media queries is that all the stylesheets are defined as active stylesheets. If there is a default, how do you turn it off when you turn on the one you want?

What I've seen so far is a way to test to see if it is the latest version of IE8 then define your full list of media query stylesheets. If it is not, define the default stylesheet. What is going to happen when different browser manufacturers come into play? What will the if statement or statements look like?

The way I'm writing the script you define the default style sheet as stylesheet, the rest as alternate stylesheet. If the browser does not support JavaScript, the default is used, if it does, the script knows how to modify the DOM to select the appropriate stylesheet as the active one.

There is no direct relationship between the browser and the printer, but I believe the browser will render the page for the printer once it knows the page size. If there is no print media script, it used the screen script for things like fonts, colors, etc.

The concept behind media queries is that the rendering of the page can and should change based on the size of the display area. media queries and my script do exactly that. I was trying to enhance my script to do the same for printed media.

If you are printing portrait on standard paper, you will probably print your content as a single column and it will be fairly readable depending on the font size you use. What if the visitor prints the page on legal paper in landscape mode. The length of your lines will become so long they will be difficult to read. Wouldn't it be nice if the browser / JavaScript could recognize that and automatically change to a two column printout with line lengths that are easier to read?

How wide is my printed page?

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How wide is my printed page?

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴