Using HTML/CSS to Shrink Content to Printable Page
Is there a way to force a web browser to shrink, reduce the font, or otherwise condense the size of content within a HTML/CSS-defined content-page to fit on a printed page?
I am trying to print documents from a variety of web repositories to a PDF or hardcopy format. These documents frequently have page numbers as if a printed document; unfortunately, the web-versions available on the repositories frequently don't match the pagination when printed.
A completely and totally random example: https://www.sec.gov/Archives/edgar/data/1392097/000095013607001902/file1.htm
Searching through other threads, I pieced together the following code, which was successful in defining the page size and making the printed document include page breaks at the appropriate place at the beginning of new pages:
<style>
.pageA4 {float:none; page-break-before:always; body{width:210mm; height 297mm; margin-left:auto; margin-right:auto;}
</style>
...
<div class="pageA4">
Content content content
</div>
When the content exceeds the A4 page size, however, the excess spills over onto the next page. It continues until it hits the /div tag, the next div then starts at the top of the next printed page as is appropriate.
I would like to be able to make any over-sized pages shrink-to-fit the A4 so that the printed document's pagination matches that appearing in the document content.
html css printing-web-page
asked Nov 14 '18 at 23:10
TheOnlyShubesTheOnlyShubes
161
add a comment |
Is there a way to force a web browser to shrink, reduce the font, or otherwise condense the size of content within a HTML/CSS-defined content-page to fit on a printed page?
I am trying to print documents from a variety of web repositories to a PDF or hardcopy format. These documents frequently have page numbers as if a printed document; unfortunately, the web-versions available on the repositories frequently don't match the pagination when printed.
A completely and totally random example: https://www.sec.gov/Archives/edgar/data/1392097/000095013607001902/file1.htm
Searching through other threads, I pieced together the following code, which was successful in defining the page size and making the printed document include page breaks at the appropriate place at the beginning of new pages:
<style>
.pageA4 {float:none; page-break-before:always; body{width:210mm; height 297mm; margin-left:auto; margin-right:auto;}
</style>
...
<div class="pageA4">
Content content content
</div>
When the content exceeds the A4 page size, however, the excess spills over onto the next page. It continues until it hits the /div tag, the next div then starts at the top of the next printed page as is appropriate.
I would like to be able to make any over-sized pages shrink-to-fit the A4 so that the printed document's pagination matches that appearing in the document content.
html css printing-web-page
asked Nov 14 '18 at 23:10
TheOnlyShubesTheOnlyShubes
161
add a comment |
Is there a way to force a web browser to shrink, reduce the font, or otherwise condense the size of content within a HTML/CSS-defined content-page to fit on a printed page?
I am trying to print documents from a variety of web repositories to a PDF or hardcopy format. These documents frequently have page numbers as if a printed document; unfortunately, the web-versions available on the repositories frequently don't match the pagination when printed.
A completely and totally random example: https://www.sec.gov/Archives/edgar/data/1392097/000095013607001902/file1.htm
Searching through other threads, I pieced together the following code, which was successful in defining the page size and making the printed document include page breaks at the appropriate place at the beginning of new pages:
<style>
.pageA4 {float:none; page-break-before:always; body{width:210mm; height 297mm; margin-left:auto; margin-right:auto;}
</style>
...
<div class="pageA4">
Content content content
</div>
When the content exceeds the A4 page size, however, the excess spills over onto the next page. It continues until it hits the /div tag, the next div then starts at the top of the next printed page as is appropriate.
I would like to be able to make any over-sized pages shrink-to-fit the A4 so that the printed document's pagination matches that appearing in the document content.
html css printing-web-page
asked Nov 14 '18 at 23:10
TheOnlyShubesTheOnlyShubes
161
Is there a way to force a web browser to shrink, reduce the font, or otherwise condense the size of content within a HTML/CSS-defined content-page to fit on a printed page?
I am trying to print documents from a variety of web repositories to a PDF or hardcopy format. These documents frequently have page numbers as if a printed document; unfortunately, the web-versions available on the repositories frequently don't match the pagination when printed.
A completely and totally random example: https://www.sec.gov/Archives/edgar/data/1392097/000095013607001902/file1.htm
Searching through other threads, I pieced together the following code, which was successful in defining the page size and making the printed document include page breaks at the appropriate place at the beginning of new pages:
<style>
.pageA4 {float:none; page-break-before:always; body{width:210mm; height 297mm; margin-left:auto; margin-right:auto;}
</style>
...
<div class="pageA4">
Content content content
</div>
When the content exceeds the A4 page size, however, the excess spills over onto the next page. It continues until it hits the /div tag, the next div then starts at the top of the next printed page as is appropriate.
I would like to be able to make any over-sized pages shrink-to-fit the A4 so that the printed document's pagination matches that appearing in the document content.
html css printing-web-page
html css printing-web-page
asked Nov 14 '18 at 23:10
TheOnlyShubesTheOnlyShubes
161
asked Nov 14 '18 at 23:10
TheOnlyShubesTheOnlyShubes
161
asked Nov 14 '18 at 23:10
TheOnlyShubesTheOnlyShubes
161
asked Nov 14 '18 at 23:10
TheOnlyShubesTheOnlyShubes
161
asked Nov 14 '18 at 23:10
TheOnlyShubesTheOnlyShubes
161
161
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You might want to use
@media print {
/* styles go here */
}
The HTML5 Boilerplace CSS provides "instructions on how browsers should break the content into pages" along with many other print styles.
edited Nov 15 '18 at 3:43
Pang
6,9291664102
answered Nov 14 '18 at 23:30
jorscobryjorscobry
856
add a comment |
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%2f53310125%2fusing-html-css-to-shrink-content-to-printable-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You might want to use
@media print {
/* styles go here */
}
The HTML5 Boilerplace CSS provides "instructions on how browsers should break the content into pages" along with many other print styles.
edited Nov 15 '18 at 3:43
Pang
6,9291664102
answered Nov 14 '18 at 23:30
jorscobryjorscobry
856
add a comment |
You might want to use
@media print {
/* styles go here */
}
The HTML5 Boilerplace CSS provides "instructions on how browsers should break the content into pages" along with many other print styles.
edited Nov 15 '18 at 3:43
Pang
6,9291664102
answered Nov 14 '18 at 23:30
jorscobryjorscobry
856
add a comment |
You might want to use
@media print {
/* styles go here */
}
The HTML5 Boilerplace CSS provides "instructions on how browsers should break the content into pages" along with many other print styles.
edited Nov 15 '18 at 3:43
Pang
6,9291664102
answered Nov 14 '18 at 23:30
jorscobryjorscobry
856
You might want to use
@media print {
/* styles go here */
}
The HTML5 Boilerplace CSS provides "instructions on how browsers should break the content into pages" along with many other print styles.
edited Nov 15 '18 at 3:43
Pang
6,9291664102
answered Nov 14 '18 at 23:30
jorscobryjorscobry
856
edited Nov 15 '18 at 3:43
Pang
6,9291664102
edited Nov 15 '18 at 3:43
Pang
6,9291664102
edited Nov 15 '18 at 3:43
Pang
6,9291664102
6,9291664102
answered Nov 14 '18 at 23:30
jorscobryjorscobry
856
answered Nov 14 '18 at 23:30
jorscobryjorscobry
856
answered Nov 14 '18 at 23:30
jorscobryjorscobry
856
856
add a comment |
add a comment |
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%2f53310125%2fusing-html-css-to-shrink-content-to-printable-page%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
