Большое спасибо Джеффу Смиту за просмотр и редактирование этой статьи.
Краткий обзор CSS для постраничных носителей
Вы помните, когда CSS еще не было? Вероятно, нет , но позвольте мне сказать вам … когда появился CSS, он представил совершенно новый способ мышления о веб-макетах. На самом деле, мы не перестали экспериментировать с макетами с тех пор! Всегда есть развивающаяся тенденция макета, которая выдвигает новые идеи и самые границы CSS.
На прошлой неделе мы поговорили с Рейчел Эндрю , приглашенным экспертом CSS и основателем Edge of the Seat . Рэйчел увлечена CSS, и эта страсть явно выделяла ее как мастера своего дела, особенно при работе с медийными страницами. Она даже работала с нами над созданием наших собственных макетов книг здесь, в SitePoint — и все это с помощью CSS! CSS для постраничных носителей — такая нишевая тема, и именно поэтому мы были поражены, когда Рэйчел решила присоединиться к нам для вопросов и ответов, чтобы ответить на ваши вопросы. Давайте копаться в!
Ваши вопросы к Рэйчел
В: Мне было бы интересно узнать, в чем заключаются основные различия при приближении к макету страницы на печатной странице и веб-странице? Какие соображения существуют для печати, которые не относятся к веб-странице?
Рейчел: В некотором смысле, работа со страницей фиксированного размера на постраничных носителях намного проще, так как вы выводите данные в известном формате.
Основное различие заключается в том, что с постраничными носителями у вас есть модель страницы, в которой есть поля для полей, в которые затем можно вставлять материал с созданным содержимым. Пример, приведенный в документах Prince, является хорошим, потому что большая часть кривой обучения при переходе от Интернета к печати — понимание этой модели.
Q: Какие уроки или методы CSS для печатных СМИ могут быть легко перенесены обратно на дизайн веб-страниц?
Рейчел: Рабочая группа CSS работает над переписыванием модуля CSS Generated Content . Здесь вы можете использовать свойство content для вставки content в ваш документ из CSS.
В печати мы в значительной степени полагаемся на сгенерированный контент — это способ вставки контента в верхние и нижние колонтитулы, например, создание номеров страниц, динамическое добавление заголовка главы и т. Д. Эта заметка в блоге CSS WG гласит:
«Для тех, кто хочет поиграть с реализациями, большинство CSS-> PDF рендеров уже поддерживают значительное подмножество».
Может случиться так, что мы начнем иметь больший доступ к вещам из сгенерированного контента для спецификаций постраничного медиа, доступных в веб-контексте — конечно, при условии, что браузеры его поддерживают.
Вопрос: За прошедшие годы было предпринято несколько попыток внедрить CSS для печати, например , предложение Хакона о постраничных носителях для печати , которое отошло на второй план в пользу работы с более высоким приоритетом. Не могли бы вы немного рассказать о текущем подходе к CSS для улучшения печати и / или расширений на постраничных носителях?
Рэйчел: Я думаю, что есть множество интересных идей, большая часть проблемы в том, что для того, чтобы действительно использовать эти вещи, вам нужен конкретный UA , который отпугивает людей.
Недавно я играл с идеями в спецификации CSS-фигур Хакона , рассматривая, что было возможно с тем, что у нас есть или может быть в будущем .
Сама спецификация постраничного носителя определяет холст, над которым мы работаем. Другая полезная функциональность в текущем сгенерированном контенте для спецификаций постраничного медиа. Куда это пойдет в будущем, вероятно, зависит от спроса. Я чувствую, что было бы больше спроса, если бы авторы знали, что было возможно в этих специализированных пользовательских агентов. Они тоже хотели бы увидеть это в браузерах!
В: Есть ли у вас основные рекомендации по настройке страницы для печати?
Рейчел: Чтобы получить полный контроль над выводом на печать, вам нужно печатать через UA, который полностью поддерживает эти спецификации. Контроль, который вы имеете при печати непосредственно из браузера, очень ограничен.
Хорошая новость заключается в том, что работать с выделенным агентом пользователя для печати не сложнее, чем писать CSS для Интернета, когда вы выяснили другую модель страницы, с которой имеете дело. Хотя я в основном работал с книгами, также можно использовать Prince UA через API (напрямую, так как вы можете установить Prince на свой сервер или через сторонний сервис https://docraptor.com/ ). Поэтому, если вам нужно было отформатировать, например, PDF-файл с инвойсом или отчет, вы могли бы сделать это из реальных данных, фактически так же, как веб-страницы.
В: Сделав столько книг для SitePoint, сколько у вас сейчас, где вы чувствуете, что «CSS для печати» или инструментов для него по-прежнему не хватает?
Рейчел: Каждый раз, когда я делаю что-то конкретное, я придумываю что-то новое. Например, в книгах SitePoint у нас много кода, и я хотел вставить символ переноса кода, когда он ломается. Я закончил тем, что написал немного грубый JavaScript, чтобы справиться с этим. К счастью, Prince будет запускать JavaScript, чтобы вы могли делать что-то с вашим документом, используя скрипты, когда вы выходите за пределы возможностей UA.
Q: Похоже, что пользовательские агенты, такие как Prince, помогают поддерживать идею CSS для печати. Кажется, было бы очень стыдно, если стили печати исчезли. @rachelandrew — Есть ли у вас мысли о том, что может возродить интерес в этой области?
Рэйчел: Если мы хотим, чтобы браузеры лучше поддерживали этот материал, мы, как сообщество, должны запросить эту поддержку. Это верно для всего, что мы хотим видеть поддержку. Шуметь об этом!
Вы можете шуметь несколькими способами. Вы можете напрямую обратиться к браузерам за поддержкой, а также вы можете просто написать об этом. Покажите, что есть интерес к веб-сообществу и примеры использования для поддержки, так что когда возникнут эти темы и будет задан вопрос «Заботятся ли веб-разработчики об этом?», Ответ однозначно да. И если об этом написано, это можно легко продемонстрировать с помощью быстрого веб-поиска.
Q: Вы знаете о жизнеспособных альтернативах, которые являются менее дорогостоящими?
Рейчел: Все специальные инструменты имеют цену. Вы можете использовать технологию Prince через API в DocRaptor, который может работать лучше в зависимости от вашего варианта использования.
Что касается вывода в другие форматы, вам действительно нужны другие инструменты для них. Оказывается, что гораздо проще перевести HTML и CSS в формат EPUB или Mobi (Kindle), так как в любом случае эти форматы по сути являются HTML и CSS.
Чтобы добраться до EPUB, я использую Pandoc, а затем прибираюсь в Sigil . Затем я превращаю EPUB в Mobi с помощью инструмента Kindlegen .
В основном это стек командной строки, так что вы можете в значительной степени автоматизировать все эти вещи и просто выплевывать кучу версий книги из вашего документа. Если это просто что-то простое, это может быть все, что вам нужно сделать, в противном случае вы можете использовать их в качестве отправной точки для настройки.
Хочу больше?
Зайдите в наш раздел вопросов и ответов, чтобы увидеть разговор полностью! Рэйчел, возможно, ушла из разговора, но это не значит, что чат окончен. Войдите и продолжите обсуждение с нашими активными участниками сообщества!