Предложения для отладки таблиц стилей печати?

В инспекторе Chrome есть опция.

1. Откройте инспектор DevTools (mac: Cmd + Shift + C , windows: Ctrl + Shift + C )
2. Нажмите значок режима « Переключить устройство» , расположенный в верхнем левом углу панели DevTools. (windows: Ctrl + Shift + M , mac: Cmd + Shift + M ).
3. Нажмите « Больше переопределений» в правом верхнем углу windows просмотра браузера, чтобы открыть ящик devtools.

4. Затем выберите Media в ящике эмуляции и установите флажок CSS media .

   

Это должно сделать трюк.

Обновление: меню были изменены в DevTools. Теперь его можно найти, щелкнув меню «трех точек» в верхнем правом углу> «Дополнительные инструменты»> «Настройки рендеринга»> «Эмуляция носителя»> «Печать».

Источник: страница Google DevTools *

Я предполагаю, что вы хотите как можно больше контролировать печатное окно, не используя подход HTML to PDF … Используйте экран @media для отладки – @media print для окончательного css

Современные браузеры могут дать вам быстрый обзор того, что произойдет во время печати с использованием дюймов и точек в @media query .

 @media screen and (max-width:8.5in) { /* resize your window until the event is triggered */ html { width:8.5in; } body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */ ... } 

Как только ваш браузер отобразит «дюймы», вы сможете лучше понять, чего ожидать. Этот подход должен полностью закончить метод предварительного просмотра печати. Все принтеры будут работать с pt и in единицах, и использование технологии @media позволит вам быстро увидеть, что произойдет и соответствующим образом скорректировать. Firebug (или эквивалент) полностью ускорит этот процесс. Когда вы добавили изменения в @media, у вас есть весь код, который вам нужен для связанного файла CSS, используя атрибут media = "print" – просто скопируйте / вставьте правила экрана @media в указанный файл.

Удачи. Интернет не был создан для печати. Создание решения, которое предоставляет весь ваш контент, стили, равные тому, что видно в браузере, иногда могут быть невозможны. Например, жидкая компоновка для аудитории с преобладанием 1280 x 1024 не всегда легко переносится на красивую и аккуратную 8,5 x 11 лазерную печать.

Ссылка W3C на пустые страницы: http://www.w3.org/TR/css3-mediaqueries/

В Chrome v41 он есть, но в немного другом месте.

Chrome 48 можно отлаживать стили печати на вкладке Rendering .

Нажмите на значок меню вверху справа от инспектора и Параметры рендеринга .

редактировать
Для Chrome 58 местоположение изменилось на веб-инспектор> Меню> Дополнительные инструменты> Рендеринг

Существует простой способ отладки таблицы стилей печати без переключения какого-либо медиа-атрибута в ваш HTML-код (конечно, как указано, он не решает проблему ширины / страниц):

• Используйте расширение Firefox + Web Developer.
• В меню «Веб-разработчик» выберите «CSS / Display CSS» по типу / печати мультимедиа
• Вернитесь в меню веб-разработчика, выберите Функции / Функции Persist

Теперь вы просматриваете печатный CSS, и вы можете повторно загрузить свою страницу на неопределенный срок. Как только вы закончите, снимите флажок «Персистентные функции» и перезагрузите, вы снова получите экран CSS.

НТН.

Интерфейс Chrome отличается от версии v53.

Мне не нужно часто использовать эту функцию, но всякий раз, когда я это делаю, мне навсегда нужно знать, где команда Chrome переместила ее с тех пор, как я в последний раз сжигал циклы, пытаясь отследить ее.

Обратите внимание, что это меню … в панели инструментов Dev Tools не … в панели Chrome Browser.

Теперь прокрутите вниз в разделе «Рендеринг». Это часто ниже складки.

После ответа rflnogueira текущие настройки Chrome (40.0. *) Будут выглядеть следующим образом:

Просто покажите таблицу стилей печати в своем браузере, используя media="screen" во время отладки. В представлении предварительного просмотра используется тот же механизм рендеринга, что и обычный режим просмотра, поэтому вы можете получить точные результаты с помощью этого.

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

Вот пример того, как это можно сделать с помощью JavaScript / jquery

  $("#Print").click(function () { var a = window.open('', '', 'scrollbars=yes,width=1024,height=768'); a.document.open("text/html"); a.document.write(""); a.document.write(''); a.document.write(''); a.document.write(""); a.document.write($('#Content').html()); a.document.write(''); a.document.close(); a.print(); }); 

В DreamWeaver есть панель инструментов, которая показывает практически любой вариант рендеринга, который вы хотите: экран, печать, карманные носители, проекционный экран, телевизионные носители, таблицы времени времени desitn и т. Д. Это то, что я использую, особенно потому, что оно: мгновенно показывает предварительный просмотр с 1 одним нажатием кнопки.

Я использую macros для повторного нажатия клавиш и кликов мыши. В Windows, AutoHotKey – отличное программное обеспечение, и в OS X вы можете прочитать о Automator как альтернативе AHK для OsX .

Под Windows (замените Ctrl на Cmd под OS X) «Ctrl-s / переключиться на Fx-окно, где бы он ни находился в списке открываемых окон / Ctrl-r», привязанных к одному неиспользованному ключу, позволяет избежать разочарования от неинтересных задач и в конечном итоге сохранить мои руки из RSI 🙂