Uma ficha técnica da web fica legível em A4 quando a folha de impressão dá prioridade à identificação da peça, ao desenho e às especificações. Use @media print para recompor o conteúdo e @page para propor tamanho e margens. Depois, confira o resultado no diálogo de impressão e em uma folha real. A ficha precisa servir tanto a quem salva um PDF quanto a quem leva o papel até uma bancada.

O que uma ficha precisa dizer fora do site?

Imagine a ficha de uma luminária de parede. Na tela, o visitante reconhece o modelo pela foto principal e chega ao desenho de instalação por uma aba. No papel, quem recebe a segunda página precisa identificar o modelo mesmo que a primeira esteja em outra mesa. Coloque o nome do produto, o código da variante e a revisão em uma posição previsível. Para a primeira página, mantenha essa identificação no próprio conteúdo HTML.

Escolha a imagem pela informação que transmite. Uma fotografia em perspectiva ajuda a reconhecer a peça. Um desenho frontal com cotas mostra a distância entre furos e informa onde medir. Em uma ficha de instalação, esse desenho merece mais espaço do que a fotografia. Se a unidade for milímetro, declare a unidade junto ao desenho e escreva as dimensões no texto sempre que elas forem indispensáveis para a tarefa.

Faça uma lista das perguntas que a folha precisa responder em ordem de consulta. Para a luminária, elas podem ser qual peça tenho em mãos, quais são suas medidas e onde encontro o diagrama. Use a ordem das respostas para organizar os blocos. Reserve o começo para a informação que permite distinguir duas variantes visualmente parecidas.

Como definir o A4 e aproveitar a área útil?

Comece com uma regra @page com size: A4 portrait e uma margem de referência, como 15 mm. Uma folha A4 mede 210 por 297 mm. Com essa margem dos dois lados, o projeto parte de uma largura teórica de 180 mm. O diálogo de impressão e a área imprimível do equipamento podem afetar o resultado. Por isso, confira a prévia em tamanho real antes de decidir quanto espaço cada bloco recebe.

Na folha de estilo para impressão, converta os painéis laterais em uma sequência que faça sentido de cima para baixo. Dê à tabela a largura disponível quando houver descrições extensas. Para uma ficha curta, experimente colocar o desenho e as medidas lado a lado apenas se ambos couberem em tamanho confortável. O rascunho do módulo CSS Paged Media do W3C descreve a caixa da página e as caixas de margem que cercam a área do conteúdo.

Marque no arquivo de teste o maior comprimento de código que o sistema aceita. Inclua a variante com o nome mais comprido e uma observação com duas linhas. São esses casos que revelam se uma coluna de medidas tem espaço suficiente. Se precisar reduzir algo, comece pelos ornamentos e pelo espaço que o layout de tela usa para separar cartões.

Onde deixar a página quebrar?

Mantenha juntos o desenho e sua legenda quando o conjunto couber confortavelmente na área útil. Em CSS, break-inside: avoid pode pedir que o navegador evite fragmentar esse grupo. Para um subtítulo que anuncia uma tabela curta, experimente break-after: avoid. Confira a prévia após cada mudança porque as regras de quebra convivem com a altura disponível e com o tamanho real do conteúdo.

Evite aplicar a primeira regra à ficha inteira. Em um documento que cresce com o número de componentes, impedir a divisão de todos os blocos tende a produzir vazios desnecessários. Deixe uma tabela longa continuar na página seguinte. Use cabeçalhos de coluna em thead e confirme se eles reaparecem no navegador escolhido. Se a tabela exigir leitura em sequência, revise também se uma linha com descrição longa fica inteligível quando está próxima da virada.

Distribua a informação pela função de cada página. Em uma ficha de duas páginas, a primeira pode reunir identificação, desenho e medidas gerais. A segunda pode acomodar instruções detalhadas. Faça essa divisão quando o material realmente tiver duas unidades de leitura. Uma quebra forçada antes das instruções gera uma segunda folha quase vazia quando o texto tem apenas um parágrafo.

Que informações cabem nas margens?

Use as margens para informações curtas, como a numeração, quando o ambiente de impressão der suporte. A documentação do Chrome para caixas de margem na impressão mostra como @bottom-right pode receber counter(page). Para um documento com várias páginas, vale conferir a convivência dessa numeração com o cabeçalho e o rodapé automáticos do navegador, que podem aparecer conforme as opções do diálogo.

O nome da peça e a revisão devem continuar disponíveis no corpo do documento. Assim, a folha preserva seus dados básicos mesmo quando um navegador ignora o rodapé personalizado. Se o material físico precisa apontar para a versão digital, reserve espaço para uma referência explícita e teste seu uso em papel. O guia da IV Criativa sobre QR Code em materiais impressos desenvolve essa decisão para peças que circulam fora da tela.

Como revisar contraste, imagens e texto?

Faça uma prévia com gráficos de plano de fundo desativados. Procure textos claros que perdem contraste quando a cor do cartão desaparece, além de alertas que dependem exclusivamente de um fundo. Uma borda escura e um rótulo visível preservam o sentido de uma observação. Na tabela, um alinhamento consistente das medidas e divisórias discretas facilitam acompanhar a linha em preto e branco.

Para cotas e ilustrações de contorno, use uma origem que preserve os traços no tamanho final. Verifique se as setas ainda se distinguem das linhas auxiliares e se o texto da legenda continua legível sem ampliação. Para revisar o ritmo dos blocos de leitura, o guia da IV Criativa sobre espaçamento de texto e testes de legibilidade na web oferece critérios para observar como o conteúdo reage a mudanças de espaço.

Abra o PDF e procure pelo código do produto com a busca do leitor. Se o código só aparece dentro de uma imagem, inclua-o como texto no corpo da ficha. Aproveite para selecionar uma medida e copiar para um editor simples. Esse teste ajuda a encontrar exportações em que a leitura visual parece correta, mas a informação é difícil de recuperar ou reaproveitar.

Como aprovar a ficha antes de publicar?

Gere uma prévia da ficha mais curta e outra da mais longa. Use o navegador principal do projeto e um segundo navegador adotado pelo público. Compare a sequência das seções, os limites das tabelas, a presença das unidades e a identificação da variante. Depois salve uma cópia em PDF e imprima pelo menos a página com o desenho mais exigente no equipamento que estiver disponível para a revisão.

Leia a folha como alguém que nunca viu a página original. Localize o código, encontre uma medida específica e confirme onde ela está indicada no desenho. Se houver uma segunda folha, separe-a da primeira e verifique quais informações ainda fazem sentido. Quando a ficha incluir um molde em escala, trate essa versão como um requisito próprio e meça uma referência na impressão física com as opções previstas para o usuário.

Registre o tamanho de papel, o navegador e as opções de impressão usados na aprovação. Guarde também os exemplos curto e longo para repetir a prova quando a página ganhar outra tabela ou mudar de fonte. A ficha está pronta quando é possível identificar a peça, localizar as medidas e seguir a leitura entre páginas usando apenas o material impresso.