Você provavelmente já passou por isso. Você copia um bloco bem estilizado — um cartão de título, um destaque colorido — e cola no editor do WeChat ou em um CMS. Às vezes ele chega com a aparência exatamente certa. Outras vezes cai como texto pelado, com todo o design removido. Mesma ação, resultado diferente, e parece aleatório. Não é. A diferença é se você copiou HTML inline.
Entender essa única ideia torna colar conteúdo estilizado previsível em vez de uma aposta.
O que o HTML inline realmente é
A estilização web pode viver em dois lugares. Em um site normal, a estilização fica em uma folha de estilos separada, e o HTML apenas a referencia pelo nome da classe: <div class="title-card">. A div não tem significado sozinha — o design vive em um arquivo CSS em outro lugar.
O HTML inline coloca a estilização dentro do próprio elemento: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Tudo o que é necessário para renderizar o bloco viaja com o bloco. Não há arquivo externo do qual depender.
Essa distinção é a história inteira de por que algumas colagens mantêm o design e outras não. Quando você cola em um editor, o editor não recebe a folha de estilos do site de origem. Se o design vivia naquela folha de estilos, ele se foi — você fica com a estrutura pelada, ou seja, texto de aparência simples. Se o design era inline, ele vem junto, e o bloco renderiza corretamente.
Por que o WeChat e os editores ricos precisam disso
O editor do WeChat é rígido. Ele remove folhas de estilo externas e filtra muita estilização. Um bloco que dependia de uma classe definida em outro lugar não tem nada a que recorrer uma vez dentro do WeChat. Muitos editores de texto rico e campos de colagem de CMS se comportam do mesmo jeito — eles sanitizam o que você cola e mantêm só os atributos inline.
Então o jeito confiável de mover um bloco estilizado para esses editores é copiá-lo como HTML inline, onde a estilização é autossuficiente. Aí, até um editor rígido tem tudo o que precisa para mostrar o bloco como projetado.
Como copiar um bloco "com formatação" funciona
Os navegadores modernos têm uma Clipboard API que consegue colocar conteúdo rico — HTML com formatação — na área de transferência, não só texto simples. Quando uma ferramenta copia um bloco "como HTML inline", ela está usando essa API para pôr a marcação autossuficiente do bloco na sua área de transferência. Você então cola (Ctrl/Cmd+V) no editor e, como a estilização era inline e a área de transferência carregava o HTML, o bloco aparece estilizado.
Duas coisas têm de ser verdade para isso funcionar:
- A marcação deve ter estilo inline, então nenhum arquivo externo é necessário.
- A área de transferência deve carregá-la como HTML, não como um despejo de texto simples de sinais de menor e maior.
Acerte os dois e a colagem "simplesmente funciona". Erre qualquer um e você fica com texto simples ou uma parede de código visível.
Fazendo sem editar código à mão
Você poderia, em princípio, pegar um bloco estilizado e colocar cada estilo inline manualmente — mover as regras de cada classe para um atributo style="" em cada elemento. Para qualquer coisa além de um bloco trivial, isso é tedioso e propenso a erros, especialmente com cartões SVG onde a estilização está espalhada por muitos nós.
Uma ferramenta que lida com isso é mais fácil. O Extrator de Módulos de Layout do IMG.DIY extrai blocos estilizados de conteúdo colado do WeChat e dá a cada um um botão de copiar que o coloca na sua área de transferência como HTML inline via a Clipboard API. Você clica em copiar, muda para o editor do WeChat (ou seu CMS, ou um campo de texto rico), cola, e o bloco mantém sua formatação. Sem colocar estilos inline à mão, sem consertar marcação quebrada.
Uma lista de verificação rápida de colagem
Quando uma colagem estilizada dá errado, passe por isto:
- Você copiou HTML inline, ou uma captura de tela/texto simples? Só o HTML inline cola como um bloco estilizado funcional.
- Cole no corpo normal do editor, não em um modo de "código-fonte" ou "texto simples", que pode remover ou escapar a marcação.
- Confira o bloco na prévia. A própria prévia do WeChat mostra como o bloco vai realmente renderizar num celular — confirme ali antes de publicar.
- Se as cores parecerem erradas, recoloreie antes de copiar. No extrator, você pode clicar em uma cor e mudá-la em todo o bloco, para copiá-lo já nas cores da sua marca.
Um limite honesto que vale repetir: uma ferramenta como esta copia e organiza blocos — é um extrator, não um designer de modelos do zero, e não consegue buscar um artigo por URL (os navegadores bloqueiam buscas entre sites de páginas do WeChat, então você cola o conteúdo). Dentro desses limites, o HTML inline é o que permite a um bloco estilizado sobreviver à viagem de um editor para outro com o design intacto.
Uma vez que você viu um bloco colar perfeitamente algumas vezes, a aleatoriedade anterior faz sentido: nunca foi aleatória. Sempre foi sobre se a estilização viajava dentro do bloco.