Qui

Fev

2007

20:27

Páginas para impressão

(17 votos, média 4.2 de 5)

Escrito por vovó Vicki

Nível intermediário Muitos sites oferecem nas suas páginas a opção de transformá-las em páginas próprias para impressão, onde não há menus, propaganda, etc. Será que estes sites fazem duas páginas diferentes, uma para navegação web e outra para impressão? Sim e não sorriso

O truque

O truque está em gerar o mesmo conteúdo usando scripts CSS diferentes. Ao definir ou incluir um ou vários scripts, pode-se determinar o valor da propriedade media. Se houver um script com media: screen, o estilo é aplicado quando a saída for a tela do monitor; se houver um com media: print, o estilo é aplicado quando a saída for para a impressora.

Os valores da propriedade media são vários:

media="all"          para todos os tipos de mídia.
media="aural"        para voz sintetizada gerenciada por computador.
media="braille"      para aparelhos que produzem escrita Braille (para cegos).
media="embossed"     para impressoras Braille.
media="handheld"     para handhelds.
media="print"        para impressoras.
media="projection"   para projeção de dados (data show).
media="screen"       para a tela do monitor.
media="tty"          para mídia não gráfica (teletipo ou browser Lynx).
media="tv"           para dispositivos de saída semelhantes a TV.

Como inserir um script CSS

Há várias maneiras de se inserir um script CSS.

A tradicional é colocar o script na área head da página:

<html>
  <head>
    <title>Exemplo</title>
    <style type="text/css">
      ... aqui vão as elementos: propriedades ...
    </style>
  </head>
  <body>
    ...

Outra forma clássica é criar um arquivo próprio para o script e incluí-lo na página:

<html>
  <head>
    <title>Exemplo</title>
    <link rel="stylesheet" type="text/css" href="formatos.css">
    <style type="text/css">
      ... aqui vão as elementos: propriedades ...
    </style>
  </head>
  <body>
    ...

Como mostrado acima, um método não exclui o outro. Além disto, mais de um script externo pode ser incluído, para o mesmo tipo de saída ou para saídas diferentes:

<html>
  <head>
    <title>Exemplo</title>
    <link rel="stylesheet" media="screen" href="website.css">
    <link rel="stylesheet" media="print, embossed" href="imprimir.css">
    <link rel="stylesheet" media="aural" href="voz.css">
  </head>
  <body>
    ...

Apenas os navegadores mais recentes aceitam o método @import e, com exceção do Internet Explorer, aceitam associar @import com o tipo de mídia:

<html>
  <head>
    <title>Exemplo</title>
    <style type="text/css">
      @import url(imprimir.css) print, embossed;
      @import url(pocketPC.css) handheld;
      @import url(normal.css) screen;
    </style>
  </head>
  <body>
    ...

Há ainda o método @media que pode ser usado para definir propriedades de seletores para diversas saídas:

<html>
  <head>
    <title>Exemplo</title>
    <style type="text/css">
      @media print {
        seletor { propriedade: valor; }
      }
      @media screen, handheld {
        seletor { propriedade: valor; }
      }
    </style>
  </head>
  <body>
    ...

Existem algumas dicas para se criar um script CSS de impressão. Se você quiser que o estilo seja totalmente preservado, então use media: all ou media: screen, print. Por outro lado, se você quiser disponibilizar a chamada página print-friendly, dê uma olhada neste roteiro:

Criando um script para a tela

Antes de mais nada, crie um script completo para a apresentação na tela do monitor. Como exemplo, vou usar o script do tutorial Dê adeus às tabelas:

body {
  margin: 0;
  padding: 0;
  font-size: 85%;
  font-family: arial, helvetica, sans-serif;
  text-align: center;
  color: #333;
  background-color: #D6D6D6;
  background-image: url(/sua_url/img_39.gif);
}
a:link { color: #B52C07; }
a:visited { color: #600; }
a:hover, a:active {
  color: #fff;
  background-color: #B52C07;
}
h2 {
  color: #B52C07;
  font: 120% georgia, times, "times new roman", serif;
  font-weight: bold;
  margin: 0 0 2px 0;
}
h2 a { text-decoration: none; }
h3 {
  color: #5B5E0E;
  font: 106% georgia, times, "times new roman", serif;
  font-weight: bold;
  margin-top: 0;
  border: none;
}
#principal {
  margin: 1em auto;
  width: 650px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #676767;
}
#cabeca {
  height: 45px;
  background-image: url(/sua_url/header.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  border-bottom: 1px solid #fff;
  position: relative;
}
#cabeca h1 {
  font-size: 1px;
  text-align: right;
  color: #fff;
  margin: 0;
  padding: 0;
}
#navega {
  background-color: #9FA41D;
  color: #272900;
  padding: 2px 0;
  margin-bottom: 22px;
}
#navega ul {
  margin: 0 0 0 20px;
  padding: 0;
  list-style-type: none;
  border-left: 1px solid #C4C769;
}
#navega li {
  display: inline;
  padding: 0 10px;
  border-right: 1px solid #C4C769;
  background-image: none;
}
#navega li a {
  text-decoration: none;
  color: #272900;
}
#navega li a:hover {
  text-decoration: none;
  color: #fff;
  background-color: #272900;
}
#meu_menu {
  float: right;
  width: 165px;
  border-left: 1px solid #C5C877;
  padding-left: 15px;
}
#meu_menu ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
  line-height: 165%;
}
#texto { margin: 0 200px 40px 20px; }
#texto p { line-height: 165%; }
.imagefloat {
  float: right;
  padding: 2px;
  border: 1px solid #9FA41D;
  margin: 0 0 10px 10px;
}
.ref { border-bottom: 1px solid #C5C877; }
.ref ul {
  list-style-type: none;
  text-align: right;
  margin: 1em 0;
  padding: 0;
  font-size: 95%;
}
.ref li {
  display: inline;
  padding: 0 0 0 7px;
  background-image: none;
}
#rodape {
  clear: both;
  color: #272900;
  background-color: #9FA41D;
  text-align: right;
  padding: 5px;
  font-size: 90%;
}

Como fazer as alterações

Coloque o script CSS num arquivo próprio e dê-lhe o nome, por exemplo, de tela.css. Faça uma cópia deste arquivo e dê-lhe o nome de imprime.css. Se o script estiver no código da página, retire-o. Faça a seguinte inclusão:

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

A partir deste ponto, vamos trabalhar no script imprime.css até obtermos o layout desejado para uma página de impressão. Inicialmente a saída ainda será para a tela para facilitar o trabalho de depuração. Seguem algumas sugestões do que e de como fazer algumas alterações:

Esconder áreas desnecessárias usando display: none;
Mudar todas as cores para preto ou escala de cinza
Alterar os links para a { text decoration: none; }
Remover tamanho de fonte deixando esta tarefa para o navegador
Colocar margens na página, alguma coisa como body { margin: 2em; }

A página para a tela

Como imprime.css ainda não foi alterado, a página de exemplo tem a seguinte aparência:

Textos

Arquivo

Título aqui

Quinta, 1 de Fevereiro de 2007

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

A página para impressão

Se alterarmos o script imprime.css para

body {
  margin: 2em;
  padding: 0;
  font: 100% arial, helvetica, sans-serif;
  color: #000;
  background-color: #fff;
}
a { color: #000; text-decoration: none;}
#cabeca {
  border-bottom: 1px solid #999;
}
#cabeca h1 {
  color: #000;
}
#navega {
  display: none;
}
#meu_menu {
  display: none;
}
#texto p { line-height: 165%; }
.ref { border-bottom: 1px solid #999; }
.ref ul {
  list-style-type: none;
  text-align: right;
  margin: 1em 0;
  padding: 0;
  font-size: 95%;
}
.ref li {
  display: inline;
  padding: 0 0 0 7px;
}
.imagefloat {
  display: none;
}
#rodape {
  clear: both;
  color: #000;
  text-align: right;
  padding: 5px;
  font-size: 90%;
  border-top: 1px solid #999;
  margin-top: 2em;
}

o resultado é:

Nome do Site

Título aqui

Quinta, 1 de Fevereiro de 2007

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Botando pra jambrar

Antes dos finalmentes, uma pequena observação: no compartimento do cabeçalho coloca-se o texto

<div id="cabeca"><h1>Nome do Site</h1></div>

Como no script tela.css o seletor font-size de #cabeca está com a propriedade de 1px, o texto não aparece e não se sobrepõe ao gráfico sorriso Já no script imprime.css, esta propriedade foi eliminada e o browser usa o tamanho de fonte padrão para mostrar o texto.

Uma vez satisfeito com o resultado, basta incluir as duas versões de CSS na(s) página(s), cuidando para que o tipo de mídia esteja correto:

<html>
  <head>
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="tela.css" media="screen">
    <link rel="stylesheet" type="text/css" href="imprime.css" media="print">
  </head>
  ...