width of container for creating an 8.5 x 11 form
We have a form in excel that I need to display in a web app. The data entry will be done in multiple input dialogs. The results are displayed dynamically on the form to be exported as a pdf. I am laying out the form in css grid. I have 19 columns. I originally set my font size to 16px and I am using rem as my units. I set the width to 720 but the col7ms are quite narrow. I tried changing the font size to 14. I just wondered if there were some standards when setting up a form in css that will be output to a pdf for printing. Thanks
24 Replies
why dont you just provide a pdf with a form inside? im sure you can do it with word, and then export it as something the user can write on. or do you want validation as well?
also, dont use pixels for printable stuff: try to use points (pt)
9pt font is pretty readable in printed form (which is about 12px)
also use inches or cm or mm instead of pixels
but if you do this on a word or something, then it is already in the correct sizes
The completed form is displayed in an angular app where several input dialog forms are used for data entry. There is a lot of interaction with the input data . The validated data is displayed in the form that is being created. It is then exported as a pdf
The data is also being saved to a data management system.
input dialogs? like, the annoying
prompt thingies?No, there are 8 input forms that are used to collect the data that is required on the document being created. There are about 50 fields that are required on the form
yikes! sounds like hell to fill that
can you store some of that information to be autofilled in the future?
That’s why we are creating the app. 🙂
Yes there are several lookup tables and dependencies for validation
how about a wizard, so the boring stuff is less annoying?
and this way, you validate step by step
I converted the excel form layout to html to get an idea of the sizing. It created a width of 840 pixels. I had set mine originally to 720. I just wondered if there was a suggested width and font
no, you have to try it yourself
The input screens can be run in order as a widget or the user can click on an area of the created form to display the related input form
Thanks. I’ll keep looking.
if i were you, i would add a 0.5in margin on the sides, and 0.7in on top and bottom to the document
I set the margins to .5 in
the problem is that the rest of the content is a big "depends", but try to use 8-9pt
use inches for the sizes of everything - NOT PIXELS
and use pt for fonts and borders
try to use a font that saves ink, like a gothic
make sure it is printable on black and white and on color
The grid is 19 columns by 52 rows. I was usually f rem as my units to allow the user to zoom the form
avoid large areas with color
thats fine for the form, but not for the generated html to be printed
in fact, you probably should use a library that renders the pdf directly, instead of sending html to the user
We may resort to having a printable layout as well. We have done that with other apps
No, the form is part of the ui for the app. We create the pdf with our angular code
so, you use angular to render the pdf, and then send the file to the user?
or you generate the html and the user prints it in the app/browser?
both are very different beasts
Never set your font size in pixels, it is an accessibility nightmare
it's for printing, which is even worse
My only input/question is what size device will be rendering the PDF?
Do you have user studies to show what a useful PX width would be?
letter size
its some weird freaky thing that is almost an a4 sheet, but not quite, and is in inches
wait, rendering the pdf?
that doesnt matter, as it is always a letter sized output
regardless of the device
it can be a smartwatch, a smart fridge, smart shoes, a 24:9 curved display, a regular laptop...
whatever is rendered has to be letter sized, or proportional (50%, 25%, 12.5%)
Ah fair enough.
If you know the size has to be a letter size then do what your users need.
No standards but plenty of guidelines.
Do you have considerations for anyone who has larger fonts?
I know Microsoft has a suite of guidelines for word etc. they may be of use for referencing of decisions made
It’s not as complicated as it sounds. The form information is a required by an agency for certification. They provide a sample as a guideline. We have an excel sheet that we use currently to create the form and provide some validation. The process is being replaced by an angular app to provide a better user experience and to bring the process in line with other workflows.
We are using multiple input forms for data entry. These can operate as a wizard or can be opening through a sidebar menu or by clicking on a section of the displayed complete form. As the user moves through the entry forms the data is displayed on the form being created. The grid has 19 columns and 52 rows. My question is , is there an optimum width and font size for creating an html document that will later be used to print on a letter size 8.5 x 11 sheet.
We are using multiple input forms for data entry. These can operate as a wizard or can be opening through a sidebar menu or by clicking on a section of the displayed complete form. As the user moves through the entry forms the data is displayed on the form being created. The grid has 19 columns and 52 rows. My question is , is there an optimum width and font size for creating an html document that will later be used to print on a letter size 8.5 x 11 sheet.
thats a very different question
yes, 8.5x11