Хорошие правила настройки печати css?

Я ищу любые предложения/правила/руководства по созданию достойного css для печати при печати веб-страницы. У вас есть что предложить?


css printing
person Bryan Denny    schedule 30.12.2008    source источник

Ответы (6)


arrow_upward
26
arrow_downward

Вот некоторые общие стили печати, которые можно использовать для получения более качественных распечаток:

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

Верхний предотвращает разрывы страниц внутри строки таблицы.

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

NoPrint — это класс, который я использую для отображения чего-либо на экране, но не для печати.

И мне нравится отключать цвета ссылок.

person slolife    schedule 30.12.2008
comment
+1 полезный ответ и для меня - person Jitendra Vyas; 05.03.2010
comment
.NoPrint может быть удобным, но он смешивает презентацию с вашим HTML, что не идеально. Лучше иметь блок «без печати» в файле CSS для печати и использовать сгруппированный селектор для добавления к нему элементов по их существующим классам, именам элементов и идентификаторам. - person Ben Hull; 02.06.2011

arrow_upward
10
arrow_downward

Сначала прочитайте эту статью из A List Apart (http://www.alistapart.com/articles/goingtoprint/< /а>). Они охватывают множество основ, которые вы ищете (расширенные ссылки, побелка и т. д.).

Не полагайтесь на предварительный просмотр перед печатью, обязательно пройдите весь процесс при тестировании макета для печати. Чтобы сэкономить бумагу, установите SnagIt или используйте средство записи документов Microsoft XPS. Вы можете печатать прямо на изображение и не тратить бумагу впустую.

Также для длинных статей рассмотрите возможность изменения шрифта на с засечками. Статьи в Интернете легче всего читать без засечек (Arial, Verdana), но в печатном виде попробуйте Times New Roman или Georgia.

person Mike Robinson    schedule 30.12.2008
comment
хороший совет со шрифтами - это то, что я всегда упускал из виду! - person nickf; 06.01.2009

arrow_upward
10
arrow_downward

Одна вещь, которую я обязательно добавляю в свою таблицу стилей печати:

a[href^="http://"]:after{
    content: " (" attr(href) ") ";
}

Это записывает фактическую ссылку рядом с текстом ссылки, чтобы люди, распечатывающие документ, знали, куда должна идти ссылка.

Я также сделал свой основной текст более читабельным для печати:

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}
person Tim Knight    schedule 30.12.2008
comment
Вероятно, лучше использовать `a[href^=http]`, чтобы печатались https и http hrefs. В любом случае спасибо за подсказку! - person ; 27.08.2016

arrow_upward
4
arrow_downward

У вас есть эта старая, но все еще актуальная статья Эрика Мейера в отдельном списке.

Суть в том, чтобы начать заново, явно установив границы и поля / отступы на 0, белый фон и «не отображать» для любых несущественных элементов для печати (например, некоторых меню).

<link rel="stylesheet"
   type="text/css"
   media="print" href="print.css" />

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

И идите оттуда.

person VonC    schedule 30.12.2008

arrow_upward
2
arrow_downward

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

  • Установите поля в сантиметрах (дюймах) и размеры шрифта в пунктах (точно так же, как в OpenOffice).
  • Создайте класс, например screen или noprint, чтобы иметь возможность легко удалять ненужные материалы.
  • Забудьте о причудливом цветном тексте. Черный текст на белом фоне.
  • Подумайте об удалении лишних изображений — они могут выглядеть не так хорошо в черно-белом режиме.
  • Удалите подчеркивание из ссылок и сделайте ссылки с нормальным текстом. Глупо читать «проверьте эту страницу», где «это» подчеркнуто. Или, если вы поместите href ссылки после подчеркнутого текста, это может быть более полезным, но выглядит не так красиво, ИМХО.
person bandi    schedule 30.12.2008

arrow_upward
1
arrow_downward

Обратите внимание на фоновые изображения и цвета. Я думаю, что IE по умолчанию не распечатывает фоновые изображения или цвета.

person JoshBerke    schedule 30.12.2008