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

227

Я недавно работал над таблицей стилей печати для веб-сайта, и я понял, что я был в недоумении за эффективные способы ее настройки. Это одна вещь, чтобы иметь цикл перезагрузки для работы на экране макета:Предложения для отладки таблиц стилей печати?

код изменения
командной вкладке
перезарядка

но весь процесс становится намного более трудным, когда вы пытаетесь напечатать:

изменение кода
команду
перезарядка
печать
косоглазие на печать предварительного просмотра изображения
открыть PDF в Preview для дальнейшей проверки

Есть ли инструменты я пропускаю здесь? Есть ли у инспектора WebKit флажок «притворяться, что это постраничный носитель»? Есть ли какая-то магия, что Firebug (shudder) может сделать?

источник

2010-03-16 Jim Puls

Как насчет функции «Предварительный просмотр» браузера, который ее поддерживает (например, Firefox)? Я (в основном точно) отлаживал некоторые веб-страницы для печати с ним. –

Возможный дубликат [Как отлаживать печатный CSS?] (Http://stackoverflow.com/questions/726825/how-do-you-debug-printable-css) – outis

В Firefox откройте «Панель инструментов разработчика» с помощью Shift + F2, введите «media emulate print» (или «emu» + Tab + «print»), Enter. –

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

источник

2010-03-16 07:44:35

+14

За исключением обычного режима просмотра страниц не существует, поэтому я понятия не имею, как будет проходить поток контента. Обычный режим просмотра имеет ширину определенного количества пикселей, а страница имеет ширину определенного количества дюймов или сантиметров. Существуют фундаментальные независимые от реализации различия между экраном и печатью. Отладка между ними - вот что мне нужно. –

На хром рендеринг совсем другой, используя это предложение в одиночку. Не получится. – tehgeekmeister

«Ширина страницы» не трудно прибить, это очень тяжелая высота. Оба браузера и принтеры будут играть роль в головной боли 11in. Веб-страницы имеют непрерывную длину. Без гарантии типа выходного устройства и браузера я не думаю, что вы когда-либо ударяете его по знаку каждый раз. Использование подхода HTML to PDF будет работать, но это выходит за рамки вашего вопроса. – Dawson

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

Современные браузеры могут дать вы быстро визуализируете, что произойдет во время печати, используя дюймы и pts в @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 ссылка на purusal: http://www.w3.org/TR/css3-mediaqueries/

источник

2011-02-23 05:04:15 Dawson

Просто хотел прокомментировать, что этот метод довольно умный. Намного легче слегка изменить размер окна, чтобы «переключить» стили печати, чем использовать функцию предварительного просмотра печати. Хотя вам по-прежнему приходится делать это иногда для совместимости с IE и т. Д., Это отлично подходит для начальной итерации стилей печати. – chucknelson

@ Chuck. Спасибо чувак. Эй, я понял, что моя демо была офф-лайн, поэтому я создал для нее скрипку. http://jsfiddle.net/dNEmT/ – Dawson

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

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

 $("#Print").click(function() { 
      var a = window.open('', '', 'scrollbars=yes,width=1024,height=768'); 
      a.document.open("text/html"); 
      a.document.write("<html><head>"); 
      a.document.write('<link rel="stylesheet" href="css/style.css" />'); 
      a.document.write('<link rel="stylesheet" href="css/print.css" />'); 
      a.document.write("</head><body>"); 
      a.document.write($('#Content').html()); 
      a.document.write('</body></html>'); 
      a.document.close(); 
      a.print(); 
     });

источник

2011-02-28 11:32:13 Blowsie

Проблема с этим подходом заключается в том, что если пользователь просто выбирает «Печать ...» в своем браузере, эта функция javascript никогда не будет вызвана. –

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

Это переработанное решение для чего-то, что браузер уже делает. Просто используйте экран 'media =" print "и' media = "" соответственно для своих таблиц стилей и просто используйте меню браузера или комбинации клавиш для вызова предварительного просмотра. (В этом случае это не что иное, как открытие всплывающего окна) И если вы просто отлаживаете, примените атрибут '' media = "" к вашим стилям печати до тех пор, пока вы не выполните отладку. – ORyan

-7

Я использую макросы для отправки нажатия клавиш и щелчков мыши несколько раз. Под Windows, AutoHotKey - отличное программное обеспечение, и в OS X вы можете прочитать о Automator сорта an alternative AHK for OsX.

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

источник

2011-02-28 19:30:39 FelipeAls

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

Используйте расширение Firefox + Web Developer.
В меню Web Developer, выберите CSS/Display CSS с помощью Media Type/Печать
Вернуться в меню Web Developer, выберите Параметры/Упорство Особенности

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

HTH.

источник

2011-02-28 20:46:43 Capsule

визуально отличается от предварительного просмотра. возможно, это причуда в моем css. в любом случае, это не решает проблему. Спасибо хоть. – tehgeekmeister

Да, совсем другое для меня тоже. Я следил за этим jsfiddle (http://jsfiddle.net/2wk6Q/3/), а в превью для печати отображаются страницы с красными полями, но это совсем другое. –

Должен сказать, что этот «обходной путь» работает лучше всего для меня.Возможно, мне повезло, и поэтому есть только небольшие различия между собственным экраном печати и экраном для веб-разработчиков, но он определенно помог мне узнать, почему появляются пробелы и что самое главное - я могу пройти через код с помощью firebug и посмотреть, что происходит на –

-1

enter image description here

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

источник

2011-03-01 16:41:32 Sam

хорошо знать, но для этого потребуется использовать другой механизм рендеринга, чем тот, для которого мы разрабатываем, и по-прежнему требует больше, чем перезагрузка. Спасибо хоть. – tehgeekmeister

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

-1

Как насчет этого варианта вашего цикла печати перегрузочного:

изменения кода
командной вкладка
перезарядки Alt + F, v (предварительный просмотр печати в Firefox на Windows)
ESČ (закрыть предварительный просмотр)

Повторите несколько раз, после чего сделайте реальную печать в Microsoft XPS Document Writer или simil ар.

источник

2011-03-01 20:00:24 jimmystormig

Вниз голосование без объяснения действительно плохо! – jimmystormig

Но сама идея интересна. voteup – easwee

Спасибо @easwee! Моя мысль заключалась в том, чтобы не бороться с тем, что экран и печать действительно разные медиа. – jimmystormig

314

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

Откройте DevTools инспектор (макинтош: Cmd + Сдвиг + C, окна: Ctrl + Сдвиг + C)
Нажмите на режим устройства Переключить значок , расположенный в верхнем левом углу панели DevTools. (Окна: Ctrl + Сдвиг + M, макинтош: Cmd + Сдвиг + M).
Нажмите на . Больше переопределений значок в правом верхнем углу окна просмотра браузера, чтобы открыть ящик devtools.
Затем выберите Media в ящике эмуляции и установите флажок CSS media.

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

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

Источник: Google DevTools page *

источник

2013-01-18 13:55:39

Спасибо, это то, что я искал, не смог найти:/Shortcut больше не работает. Я просто делаю значок шестерни F12 + в нижнем правом углу, затем настройка находится под вкладкой «Переопределения», – Aurelien

Merci Aurelien за то, что он указал на горячие клавиши. Просто исправлено –

Спасибо! Эмуляция css очень удобна. – Blazes

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

chrome print css emulation

источник

2015-02-12 17:05:32

Мне потребовалось немного времени, чтобы определить вкладку «Медиа». Я продолжал искать его на вкладке «Устройство». –

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

enter image description here

источник

2015-03-20 21:07:34 johntrepreneur

Спасибо за советы, я обновил свой ответ! –

В v53 он находится на вкладке «Рендеринг», а внизу находится флажок «Эмуляция носителя», который позволит выпадающий список, который вы можете выбрать «Печать», аналогично представленному скриншоту –

Chrome 48 вы можете отлаживать стили печати в пределах Rendering вкладку.

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

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

источник

2016-02-03 17:04:54 minlare

Chrome 49: * F12 * (консоль разработчика) -> * ESC * (консоль) -> Рендеринг -> Эмуляция печатных носителей – user1477388

UI Хрома отличается снова от V53.

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

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

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

источник

2017-02-16 21:02:56 TrophyGeek

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

ответ

Смежные вопросы