Screen vs printer height
I have a list of several items with different heights (say, 200 items) and I want to print it in a A4 paper. The paper has a header (company logo, etc) and a footer (page number, etc) and the remaining space of the A4 paper is where the list of items should go (say, a rectangle with 180mm height).
How can I calculate how many items will fit into the 180mm height rectangle of each page, enabling me to print the necessary number of pages to include all the 200 items?
I tried getting the available height in pixels of a <div style=’height: 180mm’></div>
using clientHeight and then adding the items, one by one, to another div and keep determining its height until it's the same as first div.
I then print a page with that specific number of items that should fit the 180mm rectangle of the A4 paper and proceed to the next items in the list.
The problem is that due dpi / ppi differences, the pixels equivalent of a 180mm height on screen is different of a 180mm height on printer, so I end up with half full 180mm rectangles and more pages than necessary.
Any thoughts on how to proceed?
Ripped code of what I've tried:
HTML:
<div id="calcsize" style="width: 100%; height: auto"></div>
JAVASCRIPT:
//get the size in px of a 180mm div
document.getElementById("calcsize").innerHTML = "<div style='width: 100%; height: 180mm'></div>";
var boxh= $("#calcsize").outerHeight(); //height in px of the 180mm box
//add items to div until it’s full
var contents = “<div style=’width: 100%; height: auto’>”;
for(var i=0; i<200; i++)
contents += “<div style=’margin-bottom: 10mm’>Printing item “ + i + ”</div>”;
document.getElementById("calcsize").innerHTML = contents + “</div>”;
var boxi= $("#calcsize").outerHeight();
if(boxh<=boxi) break; //filled the 180mm div
//print the list on a 180mm box
var printlist=”<div style=’height: 180mm; border: 1px solid black>” + contents + “</div></div>”;
var mywindow = window.open('', 'PRINT', 'height=auto');
mywindow.document.write('<html><head><title>' + tit + '</title>');
mywindow.document.write('</head><body>');
mywindow.document.write(printlist);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
Thanks in advance,
Direz
javascript html
asked Nov 15 '18 at 10:53
DirezDirez
125
add a comment |
I have a list of several items with different heights (say, 200 items) and I want to print it in a A4 paper. The paper has a header (company logo, etc) and a footer (page number, etc) and the remaining space of the A4 paper is where the list of items should go (say, a rectangle with 180mm height).
How can I calculate how many items will fit into the 180mm height rectangle of each page, enabling me to print the necessary number of pages to include all the 200 items?
I tried getting the available height in pixels of a <div style=’height: 180mm’></div>
using clientHeight and then adding the items, one by one, to another div and keep determining its height until it's the same as first div.
I then print a page with that specific number of items that should fit the 180mm rectangle of the A4 paper and proceed to the next items in the list.
The problem is that due dpi / ppi differences, the pixels equivalent of a 180mm height on screen is different of a 180mm height on printer, so I end up with half full 180mm rectangles and more pages than necessary.
Any thoughts on how to proceed?
Ripped code of what I've tried:
HTML:
<div id="calcsize" style="width: 100%; height: auto"></div>
JAVASCRIPT:
//get the size in px of a 180mm div
document.getElementById("calcsize").innerHTML = "<div style='width: 100%; height: 180mm'></div>";
var boxh= $("#calcsize").outerHeight(); //height in px of the 180mm box
//add items to div until it’s full
var contents = “<div style=’width: 100%; height: auto’>”;
for(var i=0; i<200; i++)
contents += “<div style=’margin-bottom: 10mm’>Printing item “ + i + ”</div>”;
document.getElementById("calcsize").innerHTML = contents + “</div>”;
var boxi= $("#calcsize").outerHeight();
if(boxh<=boxi) break; //filled the 180mm div
//print the list on a 180mm box
var printlist=”<div style=’height: 180mm; border: 1px solid black>” + contents + “</div></div>”;
var mywindow = window.open('', 'PRINT', 'height=auto');
mywindow.document.write('<html><head><title>' + tit + '</title>');
mywindow.document.write('</head><body>');
mywindow.document.write(printlist);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
Thanks in advance,
Direz
javascript html
asked Nov 15 '18 at 10:53
DirezDirez
125
Show us what you've tried. So we can understand and help you better.
– ElusiveCoder
Nov 15 '18 at 11:01
add a comment |
I have a list of several items with different heights (say, 200 items) and I want to print it in a A4 paper. The paper has a header (company logo, etc) and a footer (page number, etc) and the remaining space of the A4 paper is where the list of items should go (say, a rectangle with 180mm height).
How can I calculate how many items will fit into the 180mm height rectangle of each page, enabling me to print the necessary number of pages to include all the 200 items?
I tried getting the available height in pixels of a <div style=’height: 180mm’></div>
using clientHeight and then adding the items, one by one, to another div and keep determining its height until it's the same as first div.
I then print a page with that specific number of items that should fit the 180mm rectangle of the A4 paper and proceed to the next items in the list.
The problem is that due dpi / ppi differences, the pixels equivalent of a 180mm height on screen is different of a 180mm height on printer, so I end up with half full 180mm rectangles and more pages than necessary.
Any thoughts on how to proceed?
Ripped code of what I've tried:
HTML:
<div id="calcsize" style="width: 100%; height: auto"></div>
JAVASCRIPT:
//get the size in px of a 180mm div
document.getElementById("calcsize").innerHTML = "<div style='width: 100%; height: 180mm'></div>";
var boxh= $("#calcsize").outerHeight(); //height in px of the 180mm box
//add items to div until it’s full
var contents = “<div style=’width: 100%; height: auto’>”;
for(var i=0; i<200; i++)
contents += “<div style=’margin-bottom: 10mm’>Printing item “ + i + ”</div>”;
document.getElementById("calcsize").innerHTML = contents + “</div>”;
var boxi= $("#calcsize").outerHeight();
if(boxh<=boxi) break; //filled the 180mm div
//print the list on a 180mm box
var printlist=”<div style=’height: 180mm; border: 1px solid black>” + contents + “</div></div>”;
var mywindow = window.open('', 'PRINT', 'height=auto');
mywindow.document.write('<html><head><title>' + tit + '</title>');
mywindow.document.write('</head><body>');
mywindow.document.write(printlist);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
Thanks in advance,
Direz
javascript html
asked Nov 15 '18 at 10:53
DirezDirez
125
I have a list of several items with different heights (say, 200 items) and I want to print it in a A4 paper. The paper has a header (company logo, etc) and a footer (page number, etc) and the remaining space of the A4 paper is where the list of items should go (say, a rectangle with 180mm height).
How can I calculate how many items will fit into the 180mm height rectangle of each page, enabling me to print the necessary number of pages to include all the 200 items?
I tried getting the available height in pixels of a <div style=’height: 180mm’></div>
using clientHeight and then adding the items, one by one, to another div and keep determining its height until it's the same as first div.
I then print a page with that specific number of items that should fit the 180mm rectangle of the A4 paper and proceed to the next items in the list.
The problem is that due dpi / ppi differences, the pixels equivalent of a 180mm height on screen is different of a 180mm height on printer, so I end up with half full 180mm rectangles and more pages than necessary.
Any thoughts on how to proceed?
Ripped code of what I've tried:
HTML:
<div id="calcsize" style="width: 100%; height: auto"></div>
JAVASCRIPT:
//get the size in px of a 180mm div
document.getElementById("calcsize").innerHTML = "<div style='width: 100%; height: 180mm'></div>";
var boxh= $("#calcsize").outerHeight(); //height in px of the 180mm box
//add items to div until it’s full
var contents = “<div style=’width: 100%; height: auto’>”;
for(var i=0; i<200; i++)
contents += “<div style=’margin-bottom: 10mm’>Printing item “ + i + ”</div>”;
document.getElementById("calcsize").innerHTML = contents + “</div>”;
var boxi= $("#calcsize").outerHeight();
if(boxh<=boxi) break; //filled the 180mm div
//print the list on a 180mm box
var printlist=”<div style=’height: 180mm; border: 1px solid black>” + contents + “</div></div>”;
var mywindow = window.open('', 'PRINT', 'height=auto');
mywindow.document.write('<html><head><title>' + tit + '</title>');
mywindow.document.write('</head><body>');
mywindow.document.write(printlist);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
Thanks in advance,
Direz
javascript html
javascript html
asked Nov 15 '18 at 10:53
DirezDirez
125
asked Nov 15 '18 at 10:53
DirezDirez
125
edited Nov 15 '18 at 11:41
Direz
asked Nov 15 '18 at 10:53
DirezDirez
125
asked Nov 15 '18 at 10:53
DirezDirez
125
asked Nov 15 '18 at 10:53
DirezDirez
125
125
Show us what you've tried. So we can understand and help you better.
– ElusiveCoder
Nov 15 '18 at 11:01
add a comment |
Show us what you've tried. So we can understand and help you better.
– ElusiveCoder
Nov 15 '18 at 11:01
Show us what you've tried. So we can understand and help you better.
– ElusiveCoder
Nov 15 '18 at 11:01
Show us what you've tried. So we can understand and help you better.
– ElusiveCoder
Nov 15 '18 at 11:01
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317822%2fscreen-vs-printer-div-height%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317822%2fscreen-vs-printer-div-height%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Show us what you've tried. So we can understand and help you better.
– ElusiveCoder
Nov 15 '18 at 11:01