Boas regras para a criação de css de impressão? [fechadas]

Question

Eu estou procurando qualquer sugestão / regras / guias sobre como fazer uma css print decente para quando uma página é impressa. Você tem alguma a oferecer?

Answer 1

Aqui estão alguns estilos de impressão gerais para começar a usar saídas melhor impressão:

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

A página Top One impede quebra dentro de uma linha da tabela

O estilo thead faz quaisquer linhas na tag thead de repetição para cada página que os vãos mesa em frente.

noprint é uma classe que eu uso para mostrar algo na tela, mas não na impressão.

E, eu gosto de desligar cores da ligação.

Answer 2

Uma coisa que eu certifique-se de colocar na minha folha de estilo de impressão é:

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

Este escreve a ligação efectiva ao lado de texto do link para que as pessoas que imprimem o documento vai saber eram a ligação é suposto ir.

Eu também definir o meu corpo de texto para ser um pouco mais legível para impressão:

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

Answer 3

Primeiro ler este artigo de A List Apart ( http://www.alistapart.com/articles/ goingtoprint / ). Eles cobrem um monte dos princípios que você está procurando (links expandidas, whitewashing, etc).

Não confie na visualização de impressão, certifique-se de passar por todo o processo ao testar um layout de impressão. Para economizar papel instalar SnagIt ou usar o escritor documento do Microsoft XPS. Você pode imprimir diretamente a uma imagem e não perder qualquer papel.

Também para artigos longos, considere alterar o tipo de letra para serif. Artigos na web são mais fáceis de ler em sans-serif (Arial, Verdana), mas na tentativa de impressão Times New Roman ou a Geórgia.

Answer 4

Você tem essa idade, mas ainda relevante artigo de Eric Meyer em uma lista à parte.

O ponto principal é começar de novo, definindo explicitamente as fronteiras e marging / estofo para 0, fundo branco, e "nenhuma indicação" de quaisquer elementos não essenciais para a impressão (como certos menus)

<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;
    }

E de lá ir.

Answer 5

Quando você está definindo o estilo de impressão, você tem que pensar em um papel e em unidades físicas.

• Definir as margens em centímetros (polegadas) e os tamanhos de fonte em pontos (assim como em OpenOffice).
• Criar uma classe como 'tela' ou 'noprint' para ser capaz de remover facilmente indesejado material.
• Esqueça texto colorido fantasia. texto em preto sobre fundo branco.
• Pense sobre a remoção de imagens supérfluas - eles podem não parecer tão bom em preto e branco
• Remover sublinhando a partir de links, e fazer ligações têm texto sã. Parece bobagem para ler "verificar esta página", onde "isto" é sublinhado. Ou se você colocar o href do link após o texto sublinhado, então ele pode ser mais útil, mas não parece tão bom IMHO.

Answer 6

Cuidado com as imagens e cores de fundo. Eu acho que o comportamento padrão do IE não é para imagens de fundo impressão ou cores.