Da Word a HTML pulito

Cosa contengono davvero gli appunti

Quando copi in Word, gli appunti ricevono più versioni della tua selezione contemporaneamente. Una è testo semplice. Un’altra è HTML, ed è quella che prende l’editor di un sito web quando incolli.

L’HTML di Word descrive come appariva la pagina sul tuo schermo. Un solo paragrafo arriva così:

<p class="MsoNormal" style="margin-bottom:8.0pt;line-height:107%">
  <span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif">Hello<o:p></o:p></span>
</p>

A questo si aggiungono un foglio di stile di diverse centinaia di righe, commenti condizionali e tag del vocabolario proprio di Office. Google Docs è più breve ma non più pulito. Tutto sta dentro un contenitore con un identificativo docs-internal-guid, e il grassetto è uno span con font-weight:700. Una volta su un sito web, quegli stili inline vincono sul design del sito, ed è per questo che ogni articolo incollato appare un po’ diverso dal precedente.

Cosa si tiene, cosa si converte e cosa si scarta

I titoli seguono una regola. Il risultato usa solo i livelli da 2 a 4, perché sulla maggior parte dei siti il titolo della pagina occupa già il livello 1. Se il tuo documento contiene un Titolo 1 o un Titolo, ogni titolo scende di un gradino. Tutto ciò che è più profondo del livello 4 diventa livello 4.

Uno spazio non separabile sopravvive solo dove ha un compito: prima di ; : ! ? % o di un simbolo di valuta, e tra una cifra e quello che la segue. Tutti gli altri diventano spazi normali.

Come leggere il riepilogo

Dopo aver incollato, la prima riga indica la fonte che lo strumento ha riconosciuto dalle impronte nel codice (Word, Google Docs, LibreOffice o altro) e mostra la dimensione del codice prima e dopo. Una riduzione dall’80 al 95 per cento è normale per Word.

Sotto trovi il conteggio degli stili inline e delle classi rimossi, e dei finti elenchi ricostruiti. Due righe ti chiedono di fare qualcosa:

• Immagini rimosse. Un’immagine incollata da Word punta a un file temporaneo sul tuo computer, e una da Google Docs a un indirizzo che scade. I tuoi visitatori non vedrebbero né l’una né l’altra. Carica l’immagine nell’editor del tuo sito e scrivi lì il suo testo alternativo.
• Paragrafi interamente in grassetto. Un paragrafo breve (sotto i 90 caratteri) in grassetto dall’inizio alla fine è di solito un titolo che qualcuno ha scritto come testo in grassetto. Lo strumento non indovina il livello al posto tuo. Trasformalo in un vero titolo, così motori di ricerca e screen reader possono vedere la struttura.

Due modi per prendere il risultato

Copia per l’editor

Mette il contenuto pulito negli appunti come testo formattato. Incollalo nell’editor a blocchi di WordPress e ogni titolo, paragrafo, elenco e tabella diventa un blocco a sé. La maggior parte degli editor visuali si comporta allo stesso modo.

Codice HTML

Il sorgente, indentato e leggibile. Usalo in un blocco HTML personalizzato, nella vista codice di un servizio di newsletter o in un template.

Se gli appunti non contengono alcun HTML, per esempio testo copiato da un terminale o da un editor di testo semplice, le righe vuote diventano interruzioni di paragrafo e i singoli a capo diventano <br>.

Cosa si perde di proposito

Colori, evidenziazioni, allineamento, rientri, dimensioni dei caratteri e layout a colonne vengono buttati via. Lo stesso vale per commenti e caselle di testo. I link ai segnalibri interni al file Word, come i rimandi alle note a piè di pagina e le voci del sommario, perdono il link e mantengono il testo. Spariscono anche i bordi delle tabelle e la larghezza delle colonne, ed è il tuo sito a decidere l’aspetto delle tabelle. L’opzione facoltativa di tipografia è pensata per testi scritti in francese e va lasciata disattivata per le altre lingue.