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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

И иди оттуда.

Ответ 5

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

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

Ответ 6

Следите за фоновыми изображениями и цветами. Я думаю, что поведение по умолчанию IE - это не распечатка фоновых изображений или цветов.