/    Sign up×
Community /Pin to ProfileBookmark

Printing onto one page

Copy linkTweet thisAlerts:
Oct 24.2005

Hey guys,

Im trying to print a form that normally takes up over a page and trying to have it print on just one page. Like some printers that have a setting to “shrink to fit”. How can I do this using CSS? I know about using @media print….etc. but specifically how can I ‘shrink’ the page without distorting the layout?

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@tegraphixOct 24.2005 — As far as I know, there is no "shrink to fit" with CSS. My suggestion would be to use CSS to change the font and form field properties so that they are small enough to fit on one page.

A lil extra info: http://www.alistapart.com/articles/goingtoprint
Copy linkTweet thisAlerts:
@schmidtyauthorOct 24.2005 — thanks tegraphix....

another question then =D

is there a way to set the input text fields size equal to its maxlength?

like.... width: ????;
Copy linkTweet thisAlerts:
@tegraphixOct 24.2005 — You can change the width of input fields.

[CODE]
input {
width: 100px;
}
[/CODE]
Copy linkTweet thisAlerts:
@schmidtyauthorOct 24.2005 — yeah...im not exactly thinkin straight....I guess what I want to do is, for the printer version, make everything smaller, text, input fields, input text, etc....
Copy linkTweet thisAlerts:
@tegraphixOct 24.2005 — Here's an example:

[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
color: #000000;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

input, textarea {
width: 100px;

/* If you want to change text size in fields */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}

textarea {
height: 50px;
}

</style>

</head>

<body>

<form>
Name: &nbsp;&nbsp;&nbsp; <input type="text" name="name" id="name" value="My Name">
<br /><br />
Comments: <br />
<textarea>Some text</textarea>
</form>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@schmidtyauthorOct 25.2005 — thanks tegra...I though I had tried that last night but I must forgot a px or something cause it didnt work.

but I have another question... ?

I am trying to set the print margins with css. I checked out [URL=http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html]this page[/URL] and this is what I did...

[code=html]
@page {
size: landscape;
margin-left: 0.1in;
margin-right: 0.1in;
margin-top: 0.1in;
margin-bottom: 0.1in;
}
[/code]

...but its not working.


Thanks again for all the help...
Copy linkTweet thisAlerts:
@tegraphixOct 25.2005 — for the margins, try using either "px" or "%", not "in", for the measurement
Copy linkTweet thisAlerts:
@schmidtyauthorOct 25.2005 — tryed px, %, and even cm. could there be something in the head i need?
Copy linkTweet thisAlerts:
@tegraphixOct 26.2005 — What exactly isn't working? Does it give you a margin larger than you are specifying or no margin at all?
Copy linkTweet thisAlerts:
@felgallOct 26.2005 — in or cm are the most appropriate for margin settings for the print page. Not all browsers understand the @page stylesheet command - try it with a version 8 browser and see if it works there, I don't think any of the version 7 browsers support it.
×

Success!

Help @schmidty spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...