Almeno due persone diverse hanno espresso il loro apprezzamento per come impagino le storie: tanto basta per farmi montare la testa e desiderare di rendere edotto il mondo che mi circonda.
Scherzi a parte, noto spesso errori grammaticali che si potrebbero facilmente evitare usando un programma di scrittura come Word (Office) o Writer (Libre Office), e questo mi porta a chiedermi quali strumenti siano stati usati per scrivere la storia.
So poi che alcuni passano molto tempo a trasformare il proprio testo in codice html, quando un testo semplice senza immagini o elementi grafici particolari può essere pubblicato in pochi e veloci passaggi.
Il succo di quel che voglio proporvi è questo:
- scrivere la storia con un programma di scrittura tipo Word o Writer;
- generare l'HTML utilizzando l'editor offerto da EFP;
- sistemare le parti "centrate" e poche altre cose;
- copiare l'HTML sulla pagina della vostra nuova storia;
- aggiungere le regole css (che una volta personalizzate a vostro piacere saranno sempre le stesse).
Questo articolo continua nei messaggi successivi, e qui vi propongo una tavola dei contenuti, così che possiate cercare e trovare direttamente quel che vi interessa:
- Passo 1 - Scrivere il capitolo
- Passo 2 - Convertire il testo in HTML
- Passo 3 - Riformattare tutto con il css
- Altri font (lista di font forniti dall'editor EFP)
- Campagna di sensibilizzazione a favore dei lettori
- Evitare il rientro della prima linea
- Elemento di divisione (con caratteri allineati al centro)
- Aggiungere una riga vuota
- Note a fondo pagina
- Linea di divisione (linee orizzontali in vari stili)
- Censura
- Evidenziare citazioni "nascoste"
Passo 1 - Scrivere il capitolo
Un paio di programmi li ho già nominati, io uso il secondo, ma sicuramente esistono anche altri editor di testi utilizzabili.
Per quando mi riguarda, uso una interlinea singola, e il ritorno a capo è sempre invio.
Non uso mai "shift + invio" per andare a capo perché fa casini mostruosi con il testo giustificato.
Altro consiglio che posso darvi è quello di definire nell'editor di testo uno stile simile a quello che volete ottenere nell'HTML. Nel mio caso si tratta di impostare:
- rientro prima riga 0,50 cm
- interlinee 1,15 righe
- allineamento giustificato
Passo 2 - Convertire il testo in HTML
Il testo va quindi copiato nell'
Editor di EFP
Qui bisogna però fare attenzione, perché alcune caratteristiche del testo originale vengono perse, mentre altre vengono mantenute.
Si mantengono:
- Grassetto
- Corsivo
- Sottolineato
- Barrato
- Apice e Pedice
Si perdono:
- Font particolari
- Allineamento al centro e a destra
- Testo giustificato
Nota: per il testo giustificato non ci dovrebbero essere problemi, dato che può essere facilmente impostato con il css.
Dopo aver apportato le correzioni sull'editor di EFP, basta cliccare su "Codice Sorgente" e copiare tutto.
Nota: qui bisogna assicurarsi che ogni paragrafo del testo sia racchiuso tra i tag HTML "p":
tag "p"
Lorem ipsum dolor sit amet, ... qui officia deserunt mollit anim id est laborum.
Altrimenti il css, per come lo propongo io, non potrà funzionare.
Nota: sull'editor di EFP, il testo non sarà degno di alcun apprezzamento, in particolare ci saranno distanze eccessive tra i paragrafi, ma questo va bene così e non va ritoccato perché sarà il css a apportare le correzioni.
Passo 3 - Riformattare tutto con il css
Si tratta semplicemente di aggiungere in testa all'HTML alcune righe di testo.
Quel che vi riporto qui sotto è ciò che uso attualmente, e ve lo propongo principalmente per darvi un'idea di cosa dovreste aggiungere in ogni capitolo.
Il mio css personale
<style>
/* Stile di default dei paragrafi */
p {
font-size: 1.5em;
text-align: justify;
line-height: 1.5;
padding-left: 3em;
padding-right: 3em;
text-indent: 2em;
margin: 0px;
}
/* Titolo 2 */
h2 {
padding-left: 3em;
padding-right: 3em;
}
/* Titolo 3 */
h3 {
padding-left: 3em;
padding-right: 3em;
font-size: 1.5em;
}
/* Citazione su singola riga, tipo la frase che si mette a inizio storia */
blockquote {
padding-left: 3em;
padding-right: 3em;
font-size: 1.5em;
text-align: justify;
line-height: 1.5;
font-style: italic;
}
</style>
Il testo della storia, con lo stile qui sopra riportato, è definito dalla regola "p" che viene applicata a tutti i paragrafi, ossia a tutto il contenuto dei tag HTML:
Lorem ipsum dolor sit amet, ... qui officia deserunt mollit anim id est laborum.
Per spiegarlo:
font-size: 1.5em; | ingrandisce del 50% la dimensione dei catatteri |
text-align: justify; | giustifica il testo |
line-height: 1.5; | imposta una interlinea un po' più... spaziosa |
padding-left: 3em; | impone un margine sinistro (che resta bianco) di 6 (2x3) caratteri |
padding-right: 3em; | come sopra, ma per il margine destro. |
text-indent: 2em; | fa rientrare la prima riga di 4 (2x2) caratteri |
margin: 0px; | margin e padding sono due cose diverse, ma spesso producono lo stesso risultato. Avendo deciso di usare solo il padding, ho fissato a 0 il margin |
Le altre regole vengono usate per definire i formati dei titoli ("Titolo 2" e "Titolo 3" per il programma di scrittura). Nulla vi vieta di definire e usare anche il "Titolo 1", ma io lo uso solo per l'intestazione di una storia con più capitoli, e quindi non lo faccio comparire su EFP (non nell'HTML di un capitolo, almeno).
"blockquote" è lo stile delle citazioni che compaiono prima del capitolo oppure di testi più lunghi (lettere, biglietti, targhe) citati dentro alla storia.
Va allineata al centro o a destra tramite l'editor di EFP, se è questo che desiderate, e dovrebbe risultare in un HTML di questo tipo (senza paragrafi "p"):
“Ci sono momenti che ci cambiano per sempre. Alcuni dolori non si dimenticano.”
(Adam)
Nota: Impostando come "citazione" una o più frasi del testo nell'editor di scrittura, l'editor EFP dovrebbe riconoscerle correttamente come citazioni e poi trasformarle in un HTML simile a quanto appena mostrato.
Posso consigliarvi di fare una prova usando il css che vi ho fornito, modificare qualcosina e generare l'anteprima finché non avrete il risultato che desiderate.
Una volta ottenuto un css di vostro gusto, potrete copiarlo pari pari in ogni vostro capitolo.
Altri font
Se intendete modificare il carattere di paragrafo, titoli, bockquote, eccetera, vi consiglio di utilizzare uno di questi valori come "font-family":
Arial | font-family: arial,helvetica,sans-serif |
Comic Sans MS | font-family:comic sans ms,cursive |
Courier | font-family:courier new,courier,monospace |
Georgia | font-family:georgia,serif |
Lucida | font-family:lucida sans unicode,lucida grande,sans-serif |
Tahoma | font-family:tahoma,geneva,sans-serif |
Times new roman | font-family:times new roman,times,serif |
Trebuchet MS | font-family:trebuchet ms,helvetica,sans-serif |
Verdana | font-family:verdana,geneva,sans-serif |
Questi sono quelli proposti dall'editor di EFP, pertanto potrete verificare lì come appaiono.
Per essere un po' più chiaro, se volete che la vostra storia sia scritta in "Comic Sans MS" (scelta forse discutibile...) doveste modificare il css in questo modo:
<style>
/* Stile di default dei paragrafi */
p {
font-size: 1.5em;
text-align: justify;
line-height: 1.5;
padding-left: 3em;
padding-right: 3em;
text-indent: 2em;
margin: 0px;
font-family:comic sans ms,cursive;
}
Campagna di sensibilizzazione a favore dei lettori
Non risparmiate sulla dimensione dei font ed evitate di usare dimensioni assolute come:
perché impediscono il funzionamento della funzione "aumenta carattere" del sito EFP.
"em" vi sareà più che sufficiente, ma se volete un riferimento completo delle unità di misura, allora potete vedere qui:
w3schools - css units
Evitante anche di usare colori particolari o font troppo arzigogolati.
Evitare il rientro della prima linea
Per evitare il rientro della prima riga, ad esempio nella parte delle note (perché magari sono solo due righe per paragrafo e il rientro risulta fastidioso):
Elemento di divisione
Quelli che uso io sono centrati e regolarmente mi ricordo di averli usati solo guardando l'anteprima. Tornare sull'editor di EFP, correggere e generare di nuovo l'HTML sarebbe una rottura di scatole... perciò li sistemo nella pagina di aggiunta/modica capitolo.
Oppure:
E certo potete anche mettere il carattere che volete voi al posto di
"***" o
"§".
Aggiungere una riga vuota
Anche questa è una necessità che può comparire guardando l'anteprima. Risolverla è banale, ma può creare davvero una bella confusione se non si capisce un "trucco".
Questo produce una riga vuota:
Dopo aver premuto il bottone "anteprima", scoprirete però che il codice è cambiato:
Qui dovete fare attenzione, perché il carattere bianco non è lo spazio normale creato dalla barra spaziatrice, ma qualcos'altro.
Se provaste a scriverlo voi di sana pianta, da tastiera e senza fare un copia & incolla, vi accorgereste che non ottenete lo stesso effetto nell'anteprima e potreste diventar pazzi prima di capirne il motivo. Perciò vi consiglio di scrivere la versione con
sapendo che poi diventerà uno "strano" spazio bianco che però funziona.
La spiegazione continua qualche post più sotto con "Altri elementi per palati raffinati" (linee di divisione decorate, note a fondo pagina con link di ritorno e anche un sistema di censura attivabile dal lettore).
Spero le mie indicazioni siano sufficienti. In caso di imprecisioni, passaggi incomprensibili, errori, o altro ancora, non esitante a segnalare o a chiedere. Io proverò a correggere e a rispondere.