#javascript #html #css
#javascript #HTML #css
Вопрос:
Я пытаюсь разработать редактор для написания текста, на выходе получается html и распечатывается на открытке.
Я разрабатываю предварительный просмотр, чтобы проверить, каким будет рендеринг перед печатью. Например, прикрепленный макет моей открытки
Поскольку это настоящая открытка, у меня весь мой стиль в cm, а не в px (я знаю, что это простое преобразование), но это не главная проблема.
Допустим, что доступное для записи содержимое моей открытки составляет 6 х 9 см, а полный размер — 11 х 16 см.
На данный момент у меня есть все в html, без фонового изображения, но это ужасно на мобильных устройствах, потому что слишком большой, я должен установить некоторое переполнение, и это не удобно для пользователя.
Сначала у меня была идея создать предварительный просмотр с использованием canvas, а затем создать изображение, которое будет автоматически масштабироваться, но не похоже, что текст canvas не принимает html.
Другим решением было бы использовать масштабное преобразование в css, берущее соотношение между реальным размером изображения шаблона и фактическим размером изображения шаблона, а затем корректирующее его с помощью javascript. Это может работать, но не очень чисто
Дайте мне знать, если вы видите другие альтернативы
Комментарии:
1. Поскольку это уже HTML, мне интересно, могли бы вы сделать это в основном с помощью CSS, Чтобы как можно больше измерений использовали пропорциональные единицы (%, vw, rem и т. Д.), Которые Затем масштабируются до необходимого общего размера.
Ответ №1:
Насколько я понимаю, вы хотите оформить свою страницу так, чтобы она печаталась в формате postcard. Это можно сделать с помощью css:
В вашем CSS-файле вы можете определить стили, связанные с печатью, как показано ниже.
@Media Print
{
//your print related styles goes here
}
Перейдите по ссылке для печати: https://developer.mozilla.org/en-US/docs/Web/CSS/@media