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

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

6 ответов

Решение

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

/* 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 - это класс, который я использую, чтобы показать что-то на экране, но не в печати.

И я люблю отключать цвета ссылок.

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

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

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

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

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

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

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

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}

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

Суть в том, чтобы начать заново, явно установив границы и пометив / добавив значение 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;
    }

И иди оттуда.

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

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

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

Другие вопросы по тегам