Хорошие правила настройки print css?[закрыто]

StackOverflow https://stackoverflow.com/questions/401623

  •  03-07-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

/* 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[href^="http://"]:after{
    content: " (" attr(href) ") ";
}

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

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

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

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

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

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

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

Суть в том, чтобы начать заново, явно установив границы и marging / padding равными 0, белый фон и "display none" для любых несущественных элементов для печати (например, для определенных меню)

<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", чтобы иметь возможность легко удалять ненужные материалы .
  • Забудьте о причудливом цветном тексте.Черный текст на белом фоне.
  • Подумайте об удалении лишних изображений - они могут не так хорошо смотреться в черно-белом варианте
  • Уберите подчеркивание со ссылок и придайте ссылкам нормальный текст.Выглядит глупо читать "проверьте эту страницу", где "это" подчеркнуто.Или, если вы поместите href ссылки после подчеркнутого текста, то это может быть более полезным, но выглядит не так красиво, ИМХО.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top