Как разработать CSS для печати этикетки

Question

Когда пользователь моего сайта нажимает кнопку «распечатать этикетку», он отправляется на страницу, где на белом фоне появляется только этикетка и открывается диалоговое окно печати.Мой вопрос о том, как «думать» CSS для этой этикетки, чтобы она печаталась на всю ширину бумаги, независимо от того, какая это бумага (США, A4, ...).

Должен ли я использовать проценты дляразмер всего, ящики, поля, ...?ЭМС для шрифтов?или очки?Стоит ли сначала использовать сброс css?

Есть ли хороший ресурс в сети для такого вида приложений css?

Обновление: я сделал это с плавающими секциями и процентной шириной, котораямакет хорошо на обычной бумаге.Поэтому считаю этот вопрос закрытым.

Answer 1

Думаю, хитрость заключается в том, чтобы сделать макет как можно более плавным. И избегайте использования px в качестве меры. Вот одна хорошая статья: CSS Design: Going to Print

Answer 2

Вы должны избегать использования позиции: абсолютная / фиксированная, плавающая: влево / вправо.

Pt лучше всего подходит для печатных шрифтов, хотя в большинстве случаев это не имеет значения.

Answer 3

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

Я бы сгенерировал одно SVG-изображение и масштабировал его. SVG предназначен для масштабирования, в то время как (X) HTML предназначен для перетекания контента в зависимости от разрешения.

SVG - это просто некоторый xml, который может быть встроен прямо в ваш HTML, смотрите здесь для примеров.