Ti è probabilmente successo. Copi un blocco ben stilizzato — una scheda titolo, un richiamo colorato — e lo incolli nell'editor di WeChat o in un CMS. A volte arriva esattamente giusto. Altre volte finisce come testo nudo con tutto il design tolto. Stessa azione, risultato diverso, e sembra casuale. Non lo è. La differenza sta nell'aver copiato o meno HTML in linea.
Capire questa singola idea rende l'incollare contenuti stilizzati prevedibile anziché una scommessa.
Cos'è davvero l'HTML in linea
Lo stile web può vivere in due posti. In un normale sito web, lo stile sta in un foglio di stile separato, e l'HTML lo referenzia solo per nome di classe: <div class="title-card">. Il div di per sé è privo di significato — il design vive in un file CSS da qualche altra parte.
L'HTML in linea mette lo stile dentro l'elemento stesso: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Tutto il necessario per renderizzare il blocco viaggia con il blocco. Non c'è alcun file esterno da cui dipendere.
Quella distinzione è tutta la storia del perché alcuni incollaggi mantengono il loro design e altri no. Quando incolli in un editor, l'editor non ottiene il foglio di stile del sito web sorgente. Se il design viveva in quel foglio di stile, è sparito — ottieni la struttura nuda, cioè testo dall'aspetto semplice. Se il design era in linea, viene con te, e il blocco si renderizza correttamente.
Perché WeChat e gli editor evoluti ne hanno bisogno
L'editor di WeChat è rigoroso. Rimuove i fogli di stile esterni e filtra molto stile. Un blocco che si affidava a una classe definita altrove non ha nulla su cui ripiegare una volta dentro WeChat. Molti editor di testo ricco e campi di incollaggio dei CMS si comportano allo stesso modo — sanificano ciò che incolli e mantengono solo gli attributi in linea.
Quindi il modo affidabile per spostare un blocco stilizzato in questi editor è copiarlo come HTML in linea, dove lo stile è autosufficiente. Allora anche un editor rigoroso ha tutto ciò che gli serve per mostrare il blocco come progettato.
Come funziona copiare un blocco "con la formattazione"
I browser moderni hanno un'API Clipboard che può mettere contenuto ricco — HTML con formattazione — negli appunti, non solo testo semplice. Quando uno strumento copia un blocco "come HTML in linea", sta usando quell'API per mettere il markup autosufficiente del blocco nei tuoi appunti. Poi incolli (Ctrl/Cmd+V) nell'editor e, poiché lo stile era in linea e gli appunti trasportavano l'HTML, il blocco compare stilizzato.
Due cose devono essere vere perché questo funzioni:
- Il markup deve avere lo stile in linea, così non serve alcun file esterno.
- Gli appunti devono trasportarlo come HTML, non come uno scarico di testo semplice di parentesi angolari.
Azzecca entrambe e l'incollaggio "funziona e basta". Sbaglia una delle due e ottieni testo semplice o un muro di codice visibile.
Farlo senza modificare il codice a mano
Potresti, in linea di principio, prendere un blocco stilizzato e mettere manualmente in linea ogni stile — spostare le regole di ogni classe in un attributo style="" su ogni elemento. Per qualsiasi cosa oltre un blocco banale, è tedioso e soggetto a errori, specialmente con le schede SVG dove lo stile è sparso su molti nodi.
Uno strumento che gestisce questo è più facile. L'Estrattore di moduli di layout di IMG.DIY estrae i blocchi stilizzati dal contenuto WeChat incollato e dà a ognuno un pulsante di copia che lo mette nei tuoi appunti come HTML in linea tramite l'API Clipboard. Clicchi copia, passi all'editor di WeChat (o al tuo CMS, o a un campo di testo ricco), incolli, e il blocco mantiene la sua formattazione. Nessuna messa in linea manuale, nessun markup rotto da sistemare.
Una rapida lista di controllo per l'incollaggio
Quando un incollaggio stilizzato va storto, scorri questa:
- Hai copiato HTML in linea, o uno screenshot/testo semplice? Solo l'HTML in linea si incolla come blocco stilizzato funzionante.
- Incolla nel corpo normale dell'editor, non in una modalità "codice sorgente" o "testo semplice", che può togliere o neutralizzare il markup.
- Controlla il blocco in anteprima. L'anteprima di WeChat mostra come il blocco si renderizzerà davvero su un telefono — conferma lì prima di pubblicare.
- Se i colori appaiono sbagliati, ricolora prima di copiare. Nell'estrattore puoi cliccare un colore e cambiarlo ovunque nel blocco, così lo copi già nei colori del tuo marchio.
Un limite onesto che vale la pena ripetere: uno strumento come questo copia e organizza blocchi — è un estrattore, non un progettista di modelli da zero, e non può recuperare un articolo da URL (i browser bloccano i recuperi cross-site delle pagine WeChat, quindi incolli il contenuto). Entro quei limiti, l'HTML in linea è ciò che permette a un blocco stilizzato di sopravvivere al viaggio da un editor all'altro con il suo design intatto.
Una volta che hai visto un blocco incollarsi perfettamente qualche volta, la casualità precedente ha senso: non è mai stata casuale. È sempre dipeso dal fatto che lo stile viaggiasse dentro il blocco.