Печать на бумажной форме

Question

Я подумываю об использовании таблицы стилей печати для заполнения предварительно напечатанной бумажной формы.Допустим, у вас есть лист бумаги, который выглядел так:

Name: ________________________
Address: _____________________
City: ________________________
State: _______________________
Zip: _________________________
Favorite ice cream: __________

Я бы хотел, чтобы моя веб-страница (с таблицей стилей печати) выглядела так:

        John Smith
            1 Main St
          Springfield
           MA
          01002

Когдапользователь печатает страницу, информация заполняет бумажную форму следующим образом:

Name: ___John Smith___________
Address: ___1 Main St_________
City: ___Springfield__________
State: ____MA_________________
Zip: ______01002______________
Favorite ice cream: __________

Причина, по которой мы думаем сделать это, заключается в том, что у нас уже есть большой запас форм цветной бумаги, которые мы простохотите заполнить, когда это возможно.У нас может не быть всей информации (в приведенном выше примере у нас нет информации об их любимом мороженом).Поэтому мы бы хотели, чтобы человек, которому мы даем форму, проверил имеющуюся у нас информацию и добавил недостающую информацию.

Кто-нибудь делал это, используя таблицу стилей печати?Я просто напрашиваюсь на неприятности?Должен ли я просто воспроизвести всю форму в браузере (вопросы + ответы) и распечатать ее на чистом листе?Спасибо!

Answer 1

Если вы довольны использованием абсолютного позиционирования DIV, вы можете использовать поддержку CSS для верхних, левых, правых, нижних, ширины и высоты, указанных в сантиметрах в таблице стилей печати. ​​

Т.е.:

div.name { position:absolute; top:1cm; left:3cm; width:4cm; height:0.7cm; }
div.address1 { position:absolute; top:1.9cm; left:3cm; width:4cm; height:0.7cm; }

Вам просто нужно измерить ваши формы, а затем настроить все DIV, чтобы они находились в том месте, где линии находятся в ваших существующих формах.

Когда я пытался сделать это сам, я просто настроил сетку вложенных неупорядоченных списков, чтобы разметить сетку 5 на 5 мм, чтобы помочь проработать начальное выравнивание на печатной странице, а затем просто измерил с помощью линейки, какие размеры использовать для каждого элемента. Да, и вам нужно установить страницу (или упаковщик div) в относительное положение.

Edit - Вы также можете установить div для установки скрытия любого переполнения, чтобы не допустить переноса длинных строк в другое поле.

Answer 2

Я не понимаю, почему это невозможно сделать с помощью проб и ошибок.Как говорит @Richard, вы можете использовать cm для юнитов.Да, это будет утомительно, но я уверен, что это можно сделать.Тем более, что он должен работать только для одного конкретного макета формы, который у вас есть, чтобы попробовать его.

Answer 3

Полагаю, вы требуете слишком много хлопот, но вы вправе использовать доступные ресурсы.

В таких случаях несколько пикселей / точек вверх или вниз могут превратить вашу печать в беспорядок ...использование CSS для этого может быть довольно сложным (он имеет пиксельную точность, но не ориентирован на страницы, не имеет контроля полей страницы и т. д.).Если бы я должен был сделать это (да, это будет утомительно), я бы использовал генератор отчетов с точностью до пикселя (например, Jasper ) и тщательно выровнял поля.

Answer 4

Дэвид,

То, что вы хотите сделать, определенно более утомительно, чем просто распечатывать форму с нуля, но, очевидно, понятно, что вы не хотите тратить печатные ресурсы, которые у вас уже есть.

Система сетки 960 (http://960.gs) довольно популярна для размещения веб-сайтов, и хотя ее использование не обязательно будет именно тем, для чего она предназначена, я думаю, что это поможет. Вы можете скачать всересурсы системы сетки 960 из здесь .

После загрузки ресурсов вы захотите найти PDF-версию документа листа эскиза. Вы можете наложить его поверх напечатанногоформы (здесь помогает прозрачность) и определите, как расположить веб-страницу в соответствии с желаемым позиционированием.

После этого вы можете использовать демонстрационный код системы координат 960 из папки ресурсов для запуска макета.

Надеюсь, что поможет несколько