Styling a Printable 'form'

[CJM]

....When I say 'form' I'm talking about a conventional paper version, as
opposed to a <form>.

I'm building a web-based application which needs to be able to create
Invoices/Advice Notes/Order Acknowledgements etc... The application itself
has a largely fluid layout, but for these printed documents I need to make
them fixed, such that the printed layout is consistent. That is, they need
to look consistent on an A4 page.

Its worth noting that the printable version will be displayed in a page, but
only to be immediately printed. That is, there doesnt specifically need to
be a screen stylesheet, since the user will only print the page, rather that
look at it on-screen.

Before I start bodging my own solution, I thought I'd better do some
homework on what the best approach to take - hence I'm asking you guys!

I've googled for help, and there is plenty out there, but I'm still sorting
the wheat from the chaff. I'm also finding a few annoying things like that
there is a great @Page directive in CSS, which is all but unsupported!

Most of these forms/documents are tabular by nature, but I'm trying to
resist resorting to a tables-within-tables layout as yet.

How best do I control this layout? Do I specify a bounding block of a fixed
width? Do I use px/pt/cm/em/etc widths? How do I make sure that the content
wraps rather than stretches it's container?

It's hard to ask more specific questions because I don't know what I don't
know!

Anyway, thanks in advance...

Chris
--
cj*******@REMOVEMEyahoo.co.uk
[remove the obvious bits]

[me]

"CJM" <cj******@REMOVEMEyahoo.co.uk> wrote in message
news:3a*************@individual.net...

...When I say 'form' I'm talking about a conventional paper version, as
opposed to a <form>.

I'm building a web-based application which needs to be able to create
Invoices/Advice Notes/Order Acknowledgements etc... The application itself
has a largely fluid layout, but for these printed documents I need to make
them fixed, such that the printed layout is consistent. That is, they need
to look consistent on an A4 page.

Its worth noting that the printable version will be displayed in a page, but only to be immediately printed. That is, there doesnt specifically need to
be a screen stylesheet, since the user will only print the page, rather that look at it on-screen.

Before I start bodging my own solution, I thought I'd better do some
homework on what the best approach to take - hence I'm asking you guys!

I've googled for help, and there is plenty out there, but I'm still sorting the wheat from the chaff. I'm also finding a few annoying things like that
there is a great @Page directive in CSS, which is all but unsupported!

Most of these forms/documents are tabular by nature, but I'm trying to
resist resorting to a tables-within-tables layout as yet.

How best do I control this layout? Do I specify a bounding block of a fixed width? Do I use px/pt/cm/em/etc widths? How do I make sure that the content wraps rather than stretches it's container?

It's hard to ask more specific questions because I don't know what I don't
know!

Anyway, thanks in advance...

Chris
--
cj*******@REMOVEMEyahoo.co.uk
[remove the obvious bits]

Thank heavens I got here before the carnage began as I predicted in my post
to you in c.i.w.a.h. :-)

For printed documents I recommend PDF. With PDF you can be certain your
document will look exactly as you expect.
Good Luck,
me

PS: Please try not to be too offended by the crazies in here who will likely
(surely?) attack you for wanting to use fixed fonts and non-fluid layout.

[Beauregard T. Shagnasty]

me wrote:

Thank heavens I got here before the carnage began as I predicted in
my post to you in c.i.w.a.h. :-)

For printed documents I recommend PDF. With PDF you can be certain
your document will look exactly as you expect.
For a printed form, PDF is a good option. So would a print style sheet.
PS: Please try not to be too offended by the crazies in here who
will likely (surely?) attack you for wanting to use fixed fonts and
non-fluid layout.

We are not crazy.

--
-bts
-This space intentionally left blank.

[kaeli]

In article <11*************@corp.supernews.com>, anonymous@_.com enlightened
us with...

PS: Please try not to be too offended by the crazies in here who will likely
(surely?) attack you for wanting to use fixed fonts and non-fluid layout.

And you say people ridicule YOU.

Pot...kettle.

--
--
~kaeli~
Murphy's Law #2030: If at first you don't succeed, destroy
all evidence that you tried.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[CJM]

Well unfortunately (for me) this is an urgent business requirement. I really
havent got time to get involved with any flame-war or jihad.

I have to produce printed documents from a web application that will look
consistent to all and every customer. I'd like to do it as slickly as I can,
but I'd rather offend a few sensibilities and break a few rules if it's an
alternative to not getting it done.

I'll listen to the 'crazies' if they can be off help. Equally I'll listen to
the Best-in-IE/fixed width/etc philistines if they can be of help. If both
sides bother to help me out, I'll weigh up their respective advice and make
my best judgement.

However, we seemed to have jumped straight from the initial question to the
idealogical battle with out actually offering and advice up; good, bad, or
indifferent.

Can anyone offer any sensible suggestions?

Chris

[CJM]

If you disagree with his advice, please post your alternative suggestions...

But please dont just waste my thread on an ongoing argument.

[me]

"kaeli" <ti******@NOSPAM.comcast.net> wrote in message
news:MP************************@nntp.lucent.com...

In article <11*************@corp.supernews.com>, anonymous@_.com enlightened us with...

PS: Please try not to be too offended by the crazies in here who will likely (surely?) attack you for wanting to use fixed fonts and non-fluid

layout.
And you say people ridicule YOU.

Pot...kettle.

If I'm wrong then I haven't ridiculed anyone. Answer this. How many times
have posters had their hands slapped in here for asking how to do things the
(insert description of narrow minded people here) disapprove of?
Signed,
me

[Chris Morris]

"CJM" <cj******@REMOVEMEyahoo.co.uk> writes:

Well unfortunately (for me) this is an urgent business requirement. I really
havent got time to get involved with any flame-war or jihad.

I have to produce printed documents from a web application that will look
consistent to all and every customer. I'd like to do it as slickly as I can,
but I'd rather offend a few sensibilities and break a few rules if it's an
alternative to not getting it done.

I'll listen to the 'crazies' if they can be off help. Equally I'll listen to
the Best-in-IE/fixed width/etc philistines if they can be of help. If both
sides bother to help me out, I'll weigh up their respective advice and make
my best judgement.

However, we seemed to have jumped straight from the initial question to the
idealogical battle with out actually offering and advice up; good, bad, or
indifferent.

Can anyone offer any sensible suggestions?

You can use print stylesheets, but support is limited and you may find
problems if you have a lot of IE users, and especially if you have
users of older browsers.

If it absolutely must look consistent in print, use PDF. You can
generate it customised as necessary from a server-side script, if you
need that, though I don't know the details and there are more appropriate
groups to ask in for that.

I think, from what you've said, the latter is the better solution. I
think print stylesheets are more useful for producing screen documents
_that also happen to print reasonably well_ rather than for producing
documents that are primarily there to be printed.

--
Chris

[CJM]

"me" <anonymous@_.com> wrote in message
news:11*************@corp.supernews.com...

cj*******@REMOVEMEyahoo.co.uk
[remove the obvious bits]

Thank heavens I got here before the carnage began as I predicted in my
post
to you in c.i.w.a.h. :-)

For printed documents I recommend PDF. With PDF you can be certain your
document will look exactly as you expect.
Good Luck,
me

This seems like a long way round...

I have a PDF component which can render an ASP page as a PDF, but this is
dependant on the same issues - ie I must style the page appropriately in the
ASP page in order for it to render appropriately in the PDF.

The same component can construct a PDF manually (ie by adding text/graphics
etc to a blank PDF page) but this is a nightmare when it comes to handling
wrapping text etc...

There surely must be an easier route, via CSS??

[Beauregard T. Shagnasty]

CJM wrote:

I have to produce printed documents from a web application that
will look consistent to all and every customer.

Since you have no control over all and every customer's browser that
your visitors may use, you could only arrive at "consistent" by using
a pdf.

You haven't described exactly how intricate this form is. If it is
fairly simple, perhaps using tables with field names to the left of
fill-in spaces, and using CSS to make underlines with border-bottom
would work.

If it is complex, then HTML is not your answer.

--
-bts
-This space intentionally left blank.

[me]

"CJM" <cj******@REMOVEMEyahoo.co.uk> wrote in message
news:3a*************@individual.net...

Well unfortunately (for me) this is an urgent business requirement. I really havent got time to get involved with any flame-war or jihad.

I have to produce printed documents from a web application that will look
consistent to all and every customer. I'd like to do it as slickly as I can, but I'd rather offend a few sensibilities and break a few rules if it's an
alternative to not getting it done.

I'll listen to the 'crazies' if they can be of help.
?
Equally I'll listen to
the Best-in-IE/fixed width/etc philistines if they can be of help.
That would be *me*.
If both
sides bother to help me out, I'll weigh up their respective advice and make my best judgement.

However, we seemed to have jumped straight from the initial question to the idealogical battle with out actually offering and advice up; good, bad, or
indifferent.

Can anyone offer any sensible suggestions?

Chris

PDF won't work for you? I assume you're familiar with them, if not please
say so.
Signed,
me

[CJM]

"Chris Morris" <c.********@durham.ac.uk> wrote in message
news:87************@dinopsis.dur.ac.uk...

You can use print stylesheets, but support is limited and you may find
problems if you have a lot of IE users, and especially if you have
users of older browsers.

If it absolutely must look consistent in print, use PDF. You can
generate it customised as necessary from a server-side script, if you
need that, though I don't know the details and there are more appropriate
groups to ask in for that.

I think, from what you've said, the latter is the better solution. I
think print stylesheets are more useful for producing screen documents
_that also happen to print reasonably well_ rather than for producing
documents that are primarily there to be printed.

--
Chris

Thanks Chris

Given the time constraints, I think I'm going to have to go for the
screen-documents-that-print-reasonably-well. The PDF solution is a little
bit more work than I have time for... though it might be a worthy addition
to the next version....

PS... ALL my users are using IE! (same as many other corporate
environments). In theory, having a known and limited user base could be an
advantage, but I'm reluctant to start developing IE-only applications, and
as we all know - it isn't the most reliable or compliant browser.

[me]

"CJM" <cj******@REMOVEMEyahoo.co.uk> wrote in message
news:3a*************@individual.net...

"me" <anonymous@_.com> wrote in message
news:11*************@corp.supernews.com...

cj*******@REMOVEMEyahoo.co.uk
[remove the obvious bits]
Thank heavens I got here before the carnage began as I predicted in my
post
to you in c.i.w.a.h. :-)

For printed documents I recommend PDF. With PDF you can be certain your
document will look exactly as you expect.
Good Luck,
me

This seems like a long way round...

I have a PDF component which can render an ASP page as a PDF, but this is
dependant on the same issues - ie I must style the page appropriately in

the ASP page in order for it to render appropriately in the PDF.

The same component can construct a PDF manually (ie by adding text/graphics etc to a blank PDF page) but this is a nightmare when it comes to handling
wrapping text etc...

There surely must be an easier route, via CSS??

I assume you want a pixel perfect layout, if so you must use fixed fonts and
a non-fluid layout, if that's OK for you.
Signed,
me

[CJM]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:3a*************@individual.net...

CJM wrote:
Since you have no control over all and every customer's browser that
your visitors may use, you could only arrive at "consistent" by using
a pdf.

I think I might have led you up the wrong path! The application is used
internally for tracking a service that one part of our business conducts -
customers wont be getting anywhere near it! So the user base is known (All
IE users I'm afraid). But the application needs to spit out some paperwork
periodically that is posted to the customer.

You haven't described exactly how intricate this form is. If it is
fairly simple, perhaps using tables with field names to the left of
fill-in spaces, and using CSS to make underlines with border-bottom
would work.

The forms aren't that complex...

- a header, with logo & company address etc
- Customer Billing Address details on one side, Delivery Address details on
the other (so each would use half the width or thereabouts)
- details of items ordered/shipped/invoiced beneath
- finish off with some footer info.

I just need it to use the full width of an A4 page and to be printed
reasonably consistently;
If it is complex, then HTML is not your answer.

Not that complicated... is it?

My instinct is to create a bounding DIV or to style the Body element to the
width of an A4 page...and I can then use 100% of that bounding container to
position the individual elements... How to make them stick to that width is
another question...

But how do I specify the width of the page? Body { width: 8in;} ?? Should I
use 70ems? A number of pts?

Chris

[CJM]

Not pixel perfect...

But I'm not sure about a truly fluid design either - I dont mind subtle
differences, but I dont want them to be extreme.

[Chris Morris]

"CJM" <cj******@REMOVEMEyahoo.co.uk> writes:

"Chris Morris" <c.********@durham.ac.uk> wrote in message
news:87************@dinopsis.dur.ac.uk...

I think, from what you've said, the latter is the better solution. I
think print stylesheets are more useful for producing screen documents
_that also happen to print reasonably well_ rather than for producing
documents that are primarily there to be printed.

Given the time constraints, I think I'm going to have to go for the
screen-documents-that-print-reasonably-well. The PDF solution is a little
bit more work than I have time for... though it might be a worthy addition
to the next version....

PS... ALL my users are using IE! (same as many other corporate
environments). In theory, having a known and limited user base could be an
advantage, but I'm reluctant to start developing IE-only applications, and
as we all know - it isn't the most reliable or compliant browser.

In this case it's a bit of a disadvantage - IE's support for print
stylesheets is poorer than most modern browsers. You should still be
able to get something looking usable, though.

With printing differences in printer setup, margins, paper size,
etc. that may be more important anyway, as long as you're not trying
anything fancy with page-breaks or similar [1]. Try to be conservative in
your estimates of how much space you have, though.

[1] So, hopefully your form all fits on one page.

--
Chris

[me]

"CJM" <cj******@REMOVEMEyahoo.co.uk> wrote in message
news:3a*************@individual.net...

Not pixel perfect...

But I'm not sure about a truly fluid design either - I dont mind subtle
differences, but I dont want them to be extreme.

Please enable quotes in your news reader so the text from the post you
replied to is visible in your post, thank you.

Print Preview in IE6 is your friend, use it to see what you'll get. Here is
an old link on CSS for forms:

http://web.archive.org/web/200402230...oredforms.html

No doubt there's something that's still online but that's all I have at the
moment.

Here's part of a form I created some time ago, use it in good health. The
original had many more fields and input validation. Fix line wraps and
indents to your liking. See below:
Good Luck,
me

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;">
<style type="text/css">
<!--
td { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
input { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
textarea { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
select { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
-->
</style>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<form method="post" action="">
<table width="780" cellspacing="0" cellpadding="5" align="center">
<tr>
<td width="45%">
<div align="right">Name: </div>
</td>
<td>
<input type="text" name="Name">
</td>
</tr>
<tr>
<td width="45%">
<div align="right">E-mail: </div>
</td>
<td>
<input type="text" name="E-mail">
</td>
</tr>
<tr>
<td width="45%">
<div align="right">Phone:</div>
</td>
<td>
<input type="text" name="Phone" size="10">
</td>
</tr>
<tr>
<td width="45%">
<div align="right">Fax: </div>
</td>
<td>
<input type="text" name="Fax" size="10">
</td>
</tr>
<tr>
<td width="45%">&nbsp;</td>
<td>
<input name="Print" onClick="window.print();return false" type="button"
value="Print">
</td>
</tr>
</table>
</form>
</body>
</html>

[Jonathan]

CJM wrote:

"me" <anonymous@_.com> wrote in message
news:11*************@corp.supernews.com...

cj*******@REMOVEMEyahoo.co.uk
[remove the obvious bits]

Thank heavens I got here before the carnage began as I predicted in my
post
to you in c.i.w.a.h. :-)

For printed documents I recommend PDF. With PDF you can be certain your
document will look exactly as you expect.
Good Luck,
me

This seems like a long way round...

I have a PDF component which can render an ASP page as a PDF, but this is
dependant on the same issues - ie I must style the page appropriately in the
ASP page in order for it to render appropriately in the PDF.

The same component can construct a PDF manually (ie by adding text/graphics
etc to a blank PDF page) but this is a nightmare when it comes to handling
wrapping text etc...

There surely must be an easier route, via CSS??

CJM,

Given what you've said about time constraints, this suggestion might be
a bridge too far but, in the long term, will offer the most flexibility:

Create a single xml source from your data (using e.g. using MSXML).

Create a stylesheet (XSL) for transforming your screen xml..
Create a stylesheet (XSLT/XSL-FO) for paginated output and use FOP (or
similar) to transform the xml ready for pdf creation.

This way, your pdf output will be consistent and pixel perfect rather
relying on conversion from markup designed for screen.

Alternatively, I believe there is a product that uses cascading
stylesheets to produce screen output at the same time as pdf output to
a specific page layout. ISTR it's an Australian company but cannot for
the life of me remember their name.
Regards
Jon.