PAGED MEDIA (CSS3)

Com certeza você já deve ter tentado ler um livro ou uma apostila em algum site na web e preferiu imprimir o texto para ler off-line, no papel por ser mais confortável ou por ser mais prático quando não se está conectado. Existem vários motivos para que um leitor queira imprimir o conteúdo de um site, principalmente sites com textos longos e pesados. Durante muito tempo o principal motivo era que ler na tela do computador era cansativo. Hoje isso ainda é um problema, mas com o avanço das telas e do aparecimento das tablets no mercado, você consegue passar mais tempo na frente de uma tela lendo grandes quantidades de texto. O problema é que geralmente a organização de páginas e o conteúdo não é exatamente confortável para passarmos horas lendo.
Outro problema comum é que nós desenvolvedores não temos uma maneira fácil de formatar páginas. Na verdade temos, mas é um pouco de gambiarra e claro, não é maneira correta. A especificação de Paged Media traz nos possibilita formatar as páginas, transparências (aqueles “plásticos“ que usamos com retroprojetores) ou até mesmo páginas que serão vistas pelo monitor. Controlaremos suas medidas, tamanhos, margens, quebras de páginas e etc…
Nota: Para você não se confundir, quando digo páginas, quero dizer páginas físicas, de papel, não páginas web, ok? 😉

@page

Definiremos com CSS3 um modelo de página que especifica como o documento será formatado em uma área retangular, chamada de page box, com larguras e alturas limitadas. Nem sempre o page box tem referência correspondente para uma folha de papel física, como normalmente conhecemos em diversos formatos: folhas, transparências e etc. Esta especificação formata o page box, mas é o browser ou o meio de acesso que o usuário está utilizando que tem a responsabilidade de transferir o formato do page box para a folha de papel no momento da impressão.

O documento é transferido no modelo da página para um ou mais page boxes. O page box é uma caixa retangular que será sua área de impressão. Isso é como se fosse um viewport do browser. Como qualquer outro box, a page box tem margin, border, padding e outras áreas. O conteúdo e as áreas de margin do page box tem algumas funções especiais:
A área de conteúdo do page box é chamada de area da página ou page area. O conteúdo do documento flui na área de página. Os limites da área da página na primeira página estabelece o retângulo inicial que contém o bloco do documento.
A área da margem da page box é dividido em 16 caixas de margem ou margin boxes. Você pode definir para cada caixa de margem sua própria borda, margem, padding e áreas de conteúdo. Normalmente essas caixas de margem são usadas para definir headers e footers do documento. Confesso que o nome utilizado (caixas de margem) é meio estranho.
As propriedades do page box são determinadas pelas propriedades estabelecidas pelo page context, o qual é a regra de CSS @page. Para definir a largura e altura de uma page box não se usa as propriedades width e height. O tamanho da page box é especificada utilizando a propriedade size no page context.

Terminologia e Page Model (modelo de página)

O page box tem algumas áreas simples de se entender que facilitará a explicação. Veja abaixo uma imagem e uma explicação de suas respectivas áreas:

Page box

O page box é onde tudo acontece. Tenha em mente que o page box é o viewport das medias impressas. É lá que conterá as áreas de margem, padding, border e onde o texto será consumido.
A largura e altura do page box é determinada pela propriedade size. Em um caso simples, o page box tem a largura e a altura de uma folha. Entretanto em casos complexos onde page box difere das folhas de papel em valores e orientações já que você pode personalizar de acordo com sua necessidade.

Page area

A page area é a area de conteúdo (content area) do page box.

Margin box

Margin boxes contém boxes para header e footer. São conjunto de 16 boxes onde você pode inserir conteúdo útil como número da página, título do livro, etc, etc, etc. Essas áreas ficam fora do Page area. Cada um tem suas margins, paddings e bordas individuais. Veja o diagrama abaixo para visualizar melhor.

Page sheet

A folha, a página, a superfície que será impresso o conteúdo. A ilustração abaixo mostra a representação de uma folha.

Non-printable area – Área não impressa

A área de não impressão é a área onde o dispositivo de impressão não é capaz de imprimir. Esta área depende do dispositivo que você está utilizando. O page box fica dentro da área de impressão.

Área de impressão

A área impressa é onde o dispositivo de impressão é capaz de imprimir. A área de impressão é o tamanho da page sheet menos a área de não impressão. Como a área de não impressão, a área útil de impressão depende muito do dispositivo. O dispositivo pode ajustar o conteúdo para que seja impresso sem problemas nessa área. Cada dispositivo tem seu meio de ajuste.

Propriedade size

A propriedade size especifica o tamanho e a orientação da área do de conteúdo, o page box. O tamanho do page box pode ser definida com valores absolutos (px) ou relativos (%). Você pode usar três valores para definir a largura e a orientação do page box:

auto

O page box irá ter o tamanho e orientação do page sheet escolhido pelo usuário.

landscape

Define que a página será impressa em modo paisagem. O page box neste caso tem o mesmo tamanho da página, mas o lado maior é o horizontal. Se o tamanho da página não for definido, o tamanho é especificado pelo usuário e seu dispositivo.

portrait

Define que a página será impressa em modo retrato. O page box neste caso tem o mesmo tamanho da página, mas o lado maior é o vertical. Se o tamanho da página não for definido, o tamanho é especificado pelo usuário e seu dispositivo.

Veja um exemplo abaixo:

@page {
size: auto; /* auto is the valor padrão */
margin: 10%; /* margem */
}

Como nessa caso a margem é variável, ela está sendo relativa às dimensões da página. Logo se a página uma A4, com as dimensões: 210mm x 297mm, as margens serão 21mm e 29.7mm.

Outro exemplo:

@page {
size: 210mm 297mm; /* definem o page-sheet para um tamanho de A4 */
}

Page-size

O page-size pode ser especificado utilizando um dos media names abaixo. Isso é o equivalente a utilizar os valores escritos diretamente na propriedade size. Contudo é muito melhor utilizar o nome de um formato de formato de papel.

Formato Descrição
A5 A página deve ser definida para o tamanho ISO A5: 148mm x 210mm.
A4 A página deve ser definida para o tamanho ISO A4: 210 mm x 297 mm.
A3 A página deve ser definida para o tamanho ISO A3: 297mm x 420mm.
B5 A página deve ser definida para o tamanho ISO B3 media: 176mm x 250mm.
B4 A página deve ser definida para o tamanho ISO B4: 250mm x 353mm.
letter A página deve ser definida para o tamanho papel carta: 8.5 pol x 11 pol.

Abaixo veja um exemplo de aplicação:

@page {
size: A4 landscape;
}

O W3C tem uma especificação muito extensa que pode ser encontrada aqui:

http://www.w3.org/TR/css3-page/

É isso ai, até mais.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s