Os Novos Estilos de Impressão do ALA

À medida que as coisas se foram juntando para o lançamento do ALA 4.0 entendemos que os estilos de impressão não estavam ao nível que necessitávamos. Devido a comportamentos malucos de alguns navegadores, os artigos eram impressos parcialmente ou com um arranjo grandemente alterado. Não era só num navegador. Isto era algo que necessitava de tempo e energia para ser tratado e todo o nosso tempo e energia estava a ser dirigido para um lançamento tão suave quanto possível. Mas podíamos efectuar o lançamento sem estilos de impressão? Após alguma discussão decidimos que a resposta era positiva. Dada a baixa consciência da existência de estilos de impressão e de a maior parte das pessoas não estar inclinada para a impressão de páginas web, achamos que podíamos esperar para depois do lançamento para corrigir e lançar os estilos de impressão, com pouco impacto nem ninguém se aperceber. Bem, estávamos errados. Os tempos são de mudança! De facto a grande questão era se os estilos de impressão eram ou não realmente úteis, não se eram de facto usados por alguém. Claro que aqui no ALA já usamos estilos de impressão à bastante tempo e o meu artigo no ALA «Ir Para Impressão» teve alguma atenção. Concedemos-lhe isso. Mesmo assim, ficamos surpreendidos com o número de pessoas que nos perguntavam pelos estilos de impressão. Algumas das pessoas pouco faltava para os exigirem. Os tempos mudaram de facto. Na semana passada, passámos a ter estilos de impressão para os nossos artigos. Aqui, desejava dar uma visão panorâmica de como os estilos de impressão foram organizados e revelar como é que uma pequena omissão provocou uma série de problemas e vários navegadores.

Os estilos que são importantes retirar

O primeiro passo era o mais fácil: «desligar» os elementos de apresentação que eram inúteis ou confusos impressos. Por exemplo, a barra lateral está perto de ser inútil impressa. Também a barra de navegação no topo da página. Deixa-las imprimir significa desperdiçar papel, tinta e tempo do leitor. Igualmente, não há necessidade real para as peças relativas à discussão da página. E finalmente, decidimos poupar um pouco mais de tinta para despachar o logótipo do ALA no canto superior esquerdo do documento. Tudo isto foi facilmente atingido com uma só regra:

#masthead, #navbar, #sidebar,
#metastuff b,
#metastuff .discuss,
div.discuss { display: none !important;}

Porquê fazer a declaração !important? Porque, é importante que esses elementos não apareçam impressos. Eu sou conhecido por dizer que deixar !important numa folha de estilo distribuída publicamente era normalmente um sinal de preguiça, mas gostaria de aqui oferecer uma alteração a esta máxima. Passei a acreditar que é verdade num determinado meio; isto é, se estiver a deixar directivas !important em estilos para o ecrã para ultrapassar outros estilos de ecrã então é provável que esteja a ser preguiçoso. (Claro, que há excepções, mas são raras.) Quando mistura media, contudo, o uso de !important torna-se mais defensável. Tome os estilos ALA: todos os estilos usados num navegador da rede vêm através de um único elemento link e esses estilos são aplicados a todos os media. Em artigos, por exemplo, temos isto: <link rel="”stylesheet”"> <link rel="”stylesheet”">href=”/css/article.css”Type=”text/css” media=”all” /> Isto foi feito de forma a que o arranjo geral do ALA fosse transportado para media tais como os media impressos. A alternativa seria restringir estes estilos ao ecrã, e depois recriar parte ou todos eles para impressão. A aproximação que tomei foi muito mais eficiente, em termos de autoria de folha de estilo. Agora, era de facto verdadeiramente necessário usar !important nos estilos de impressão? Não, poderia levantar a especificidade de cada selector na regra e ter quase a certeza que teriam o efeito pretendido. A regra seria algo semelhante a: html #mastehead, html #navbar, html #sidebar, html #metastuff b, html #metastuff .discuss, html div.discuss { display: none;} Melhor? Não, nem necessariamente pior. Somente diferente, mas, para o meu olhar, menos eficiente, para não mencionar menos legível. Assim fiquem com !important. (E sim, o utilizador pode estabelecer uma folha de estilos de utilizador com as suas próprias directivas !important para fazer reaparecer esses elementos. A questão importante é, quantas pessoas se iram preocupar em o fazer, e porque é que me devo preocupar se o fizerem? Derrubar as colunas Outro lugar onde usei !important foi na regra imediatamente seguinte na folha de estilo: body, #main, #content, .column, #articletext, #footer { width: auto !important; margin: 0 !important; padding: 0 !important;} O objectivo aqui era fazer com que os componentes do arranjo que persistem se tornassem tão largos como a área de impressão da página. No arranjo de ecrã, o conteúdo da coluna tem uma largura específica. Essa largura pode ser mais estreita ou larga do que a área onde se pode imprimir na página. Para me assegurar do que sucederia, coloquei a zero as margens e o enchimento (padding) dos elementos em questão. Depois estabeleci que as larguras seriam auto. Porquê não 100%? Porque ao longo dos anos, fiquei com medo de indicar como largura de um elemento 100%. Porque a forma como o algoritmo de arranjo do CSS está escrito me parecer sempre que estou a jogar na lotaria um pouco com a width: 100%;. Neste caso, se a margem e o enchimento de alguma forma deslizarem para dentro, então um elemento pode facilmente tornar-se mais largo do que a área de impressão. Ao declarar expressamente auto neste caso, estou a dizer “fique com todo o espaço disponível sem empurrar o elemento para fora da área de impressão, mesmo se houver de alguma forma margens e enchimento. Dados os estilos que temos aqui, o resultado final de usar 100% ou auto é o mesmo. auto é ligeiramente mais à prova do futuro, e assim ficámos com ele. Um erro de número novamente produzido Quando voltei ao topo da primeira página enfrentei algumas escolhas interessantes. O número do magazine, por exemplo, é criado usando texto com estilo XHTML sobre a imagem de fundo. Como muitos de vocês sabem, por omissão os navegadores não imprimem fundos, e não há nenhuma forma do autor os activar. No final, a solução foi voltar a reestilizar o número do magazine e a data de publicação e colocá-los nos “cantos superiores” do documento. Pode parecer simples, mas levou a que alguns estilos que parecem, à primeira vista, ser, a não simples. html body #ish {position: Static; width: auto; height: auto; margin: 1em 0 0; padding: 0; border-top: none; Font-size: 0.9em; text-align: Right; Background: none;} html body #ish a:link, html body #ish a:visited, html body #ish a em { Position: static; display: inline; font-size: 1em; font-weight: normal; width: auto; height: auto; margin: 0; padding: 0; background: none; color: #555;} O que é isto tudo? A maior porte é desfazer o que os estilos para todos os media estão a fazer. Vejamos os estilos #ish da base.css. #ish {position: relative; z-index: 10; border-top: 1px solid #666; font: bold 10px Arial, sans-serif; letter-spacing: 1px;} #ish a:link, #ish a:visited {position: absolute; top: -33px; left: 150px; width: 65px; height: 52px; padding-top: 13px; text-align; center; background: url(/pix/ishbug.gif) top left no-repeat; color: #FFF;} #ish a:hover {background-position: bottom right;} #ish a em {display: block; margin-top: -0.2em; font: 2.33em Georgia, Times, serif; letter-spacing: 0;} Há uma série de posicionamento e dimensionação que tem que ser ultrapassada para criar um número de magazine que seja simples e não obstrutivo. Eis aqui os estilos de impressão novamente, excepto de desta vez enfatizei as partes que existem principalmente ou totalmente para desfazer os estilos para todos os media. html body #ish {position: static; width: auto; height: auto; margin: 1em 0 0; padding: 0; border-top: none; font-size: 0.9em; text-align: right; background: none;} html body #ish a:link, html body #ish a:visited, html body #ish a em { position: static; display: inline; font-size: 1em; font-weight: normal; width: auto; height: auto; margin: 0; padding: 0; background: none; color: #555;} Além destes, os estilos são muito simples. Alinhar o número do magazine à direita, tornar o seu tipo de letra um pouco mais pequeno do que o do seu parente e aligeirar a cor do texto. É mais ou menos isto. Trabalhar novamente a data Depois disto, o estilo da data de publicação do número é praticamente trivial. Como o número do magazine foi colocada à direita a data é colocada à esquerda. Para os colocar na “mesma linha”, falando visualmente, simplesmente subi a data 1.5em. Uma margem de fundo de 2.0em assegurou que o conteúdo após a data fosse empurrado suficientemente para baixo e está tudo preparado. html body #content .ishinfo {padding: 0 0 0.5em; margin: -1.5em 0 2em; text-align; left; background: none; position: relative;} A única coisa que destoa aqui é position: relative. Incluí isto porque o IE/Win tem a tendência de fazer desaparecer elementos se os puxar para cima como ali especificado. A cura é posicioná-los, que suspeito dispare a bandeira hasLayout. Não tenho a pretensão de compreender todas as nuances de hasLayout, mas informação recente da Microsoft e de terceiros deitou alguma luz sobre o assunto – parece que alguns dos problemas com arranjos que nos confundem no IE/Win são o resultado de um elemento não ter hasLayout. Limpeza variada Tendo tratado do problema do número e da data, tudo o que falta é fazer uma limpeza de vários bocadinhos aqui e ali. Por exemplo, a linha «metastuff» no início de cada artigo necessita de perder o seu fundo, e o limite da secção "Learn More" tem que ser ligeiramente ajustada porque já não é seguida da caixa "Discuss". html body #metastuff {background: none;} html body #learnmore {border-top: 0; border-bottom: 1px dashed #999;} Igualmente, o rodapé necessita de ser novamente trabalhado. A frase “From pixels to prose, coding to content” foi de facto deita como uma imagem de fundo de maneira a preservar a tipografia, e assim sabemos que não será impressa por praticamente ninguém. Para ter a certeza, deixei-a cair e mudei o parágrafo do rodapé de forma a preencher completamente a toda a largura do rodapé e não deixei um limite. Neste momento, centrar o texto parece uma boa medida também. html body #footer {background: none;} html body #footer p {border-left: none; margin-left: 0; text-align: center;} Finalmente, adicionei alguns estilos para auto-inserir os URL das ligações que aparecem no texto do artigo, uma nota biográfica do autor e o próprio rodapé. #articletext a[href]:after, #authorbio a[href]:after, #footer a[href]:after { content: “ (“ attr(href) “) “; font-size: 90%;} #articletext a[href^=”/”]:after, #authorbio a[href^=”/”]:after, #footer a[href^=”/”]:after { content: “ (http://alisapart.com” attr(href) “) “;} Em vez de tentar explicar isto tudo aqui, permitam-me remete-los para o meu artigo «Ir Para Impressão», o qual tem uma explicação detalhada. A chave para a iluminação Tudo isto está bem e recomenda-se, e funciona bem em artigos curtos. Se um artigo atingir mais do que três páginas, contudo, as margens nas páginas quatro e seguintes ficam malucas em Firefox. Normalmente o conteúdo só terá cerca de um terço da largura da área de impressão da página, e o terço ocupado irá mudar de página para página. Para minha frustração, o IE/Win não imprimia o rodapé de todo em vários casos. Com um conjunto de experiências, consegui que o rodapé reaparece-se em IE/Win usando alguns limites e posicionamento, mas o problema do Firefox não desaparecia. Frustrado, coloquei uma chamada no meu sítio da rede e Dan Wilkinson apresentou-se com a resposta. Um só acrescento resolveu ambos os problemas: body, #main, #content, .column, #articletext, #footer { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;} Tão simples e contudo tão poderoso. Eu tinha negligenciado fazer com que o conteúdo que resta não flutuasse, e tal estava a provocar todos os problemas. Uma vez tendo adicionado essa declaração, pude remover os truques para o IE/Win relativos ao rodapé e o Firefox deixou de enlouquecer o arranjo das página quatro e seguintes. Deixe que o meu erro seja uma lição para todos: Em impressão, todos os elementos grandes ou que podem crescer devem sempre ser não flutuantes, em especial elementos que contenham coisas como texto de artigos. Como regra geral, quando um flutuante cobre várias páginas, está a pedir chatices. Ignore esta regra se desejar correr o risco. (E julgo que o Safari também não estava livre de erros de impressão. A única razão para os não colocar neste artigo é que os seus erros só ocorreram em estilos que foram deitados fora à medida que refinávamos o design de impressão. Por outras palavras, teve sorte.) Colação É esta a última palavra sobre estilos de impressão do ALA? Não inteiramente. Em primeiro lugar, podemos ajustar um pouco os estilos de impressão ao longo do tempo. Em segundo lugar, estes estilos de impressão só são usados em artigos, que são as páginas que são mais provavelmente impressas. Outras páginas, como a página de entrada ou outras páginas de alto nível não têm presentemente estilos de impressão. Virão a ter É uma questão interessante…e uma que podemos levar em linha de conta algum dia. Por agora, espero que os estilos de impressão para o ALA 4.0 vão de encontro aos objectivos de design que o ALA tem e também tornar o processo de impressão de um artigo mais agradável. Obrigado a todos os que nos deram feedback sobre a falta de estilos de impressão – demonstrou de forma viva que as coisas mudaram nos últimos anos e que o estilo de impressão é algo valioso e importante no design da web. O original deste artigo encontra-se aqui em AlistAPart e é de Eric Meyer