Pubblicato il 11/04/17 - aggiornato il  | Nessun commento :

Come usare il capolettera in Word, LibreOffice, Blogger e Wordpress.

Come aggiungere manualmente o automaticamente un capolettera (prima lettera gigante) nei documenti di Word e LibreOffice e nei post di Blogger e Wordpress.
Il capolettera è il primo carattere di un capitolo di un libro mostrato molto più grande degli altri. Diversi secoli fa il capolettera veniva riccamente adornato dagli amanuensi con bellissime realizzazioni artistiche. Anche in epoca moderna il capolettera è utilizzato per edizioni di libri di gran pregio.

Pure alcuni quotidiani cartacei utilizzano ancora il capolettera. In questo post vedremo come creare un documento Word e Writer di LibreOffice con capolettera e come pubblicare post su Blogger e Wordpress con la prima lettera in formato gigante.


Nel web possiamo risolvere facilmente il problema utilizzando i CSS che possono essere inline per mostrare il capolettera solo in determinati post oppure possiamo realizzare un CSS da inserire nel Tema che permetta di mostrare il Capolettera all'inizio di tutti i post.






AGGIUNGERE I CAPILETTERA CON I CSS


Chi non avesse alcuna conoscenza del linguaggio CSS può scaricare gratuitamente il mio ebook "Guida all'HTML e al CSS".  Vediamo alcune possibili opzioni di inserimento.

1) Aggiungere i capilettera manualmente con un CSS inline 






In una pagina web possiamo incollare questo codice

<span style="float:left; color: #222; font-size:72px; line-height:40px; padding-top:2px; padding-right:2px; padding-bottom:0px; font-family: Georgia;">P</span>rime parole del post. Lorem ipsum dolor sit ....

che produce questo risultato.

capolettera

I colori, le dimensioni e la famiglia di font possono ovviamente essere personalizzati. Bisogna fare solo attenzione a mettere solo la prima lettera tra i due tag <span...> e </span>.






2) Aggiungere i Capilettera automaticamente a tutte le lettere iniziali del primo paragrafo

Se in una pagina web incolliamo questo codice

<style>
p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}
</style>
<p>Capolettera. Lorem ipsum dolor sit amet, ...</p>

visualizzeremo il capolettera all'inizio del primo paragrafo in questo modo.

capolettera-automatico


AGGIUNGERE AUTOMATICAMENTE I CAPILETTERA A BLOGGER


Se abbiamo un blog su Blogger o su Wordpress possiamo usare i precedenti codici da incollare in Modalità HTML  per mostrare i capilettera. Per automatizzare l'inserimento si aggiunge il CSS nel Tema. Si va su Bacheca -> Tema -> Modifica HTML, si cerca la riga ]]></b:skin> e subito sopra  si incolla questo codice

.iniziale {
float:left;
color: #222;
font-size:72px;
line-height:40px;
padding-top:2px;
padding-right:2px;
padding-bottom:0px;
font-family: Georgia;
}

quindi si Salva il Tema. All'inizio di ogni post si deve isolare il primo carattere in Modalità HTML

<span class="iniziale">P</span>rime parole del post

In questo modo alla prima lettera saranno applicate le regole della classe .iniziale.

Si può rendere tutto automatico se invece si incolla sempre sopra a ]]></b:skin>  quest'altro codice

p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

Per visualizzare il capolettera dovremo però aggiungere il tag <p> all'inizio di ogni post. Questo è automatico se per esempio si usa il software Open Live Writer. Il risultato sarà il seguente

capolettera-blogger


COME AGGIUNGERE I CAPILETTERA A WORDPRESS


Su Wordpress ci sono plugin specifici per aggiungere in modo manuale o automatico i capilettera e per personalizzarli. Un plugin che funziona bene è Simple Drop Cap che ha una versione gratuita e una a pagamento. Con questo plugin si può trasformare la prima lettera di tutti i post in un capolettera.

Con l'ultima versione del plugin Simple Drop Cap si può personalizzare il colore del capolettera e creare uno stile personalizzato con i CSS per modificare anche dimensioni e altri parametri. Naturalmente anche su Wordpress sono funzionanti i codici CSS mostrati all'inizio di questo post.

COME AGGIUNGERE I CAPILETTERA A UN DOCUMENTO DI WORD


Per aggiungere un capolettera a un documento di Word si inserisce il cursore prima della lettera iniziale quindi si clicca sulla scheda Inserisci e si sceglie Capolettera che può essere esterno o interno

capolettera-word

Andando su Opzioni capolettera si aprirà una finestra in personalizzare il capolettera (altezza e distanza dal testo). Su Word si può anche usare una immagine come capolettera. Si va su Inserisci -> Immagini online

capolettera-immagini

Nella casella di ricerca di Bing si digita drop cap alphabet seguito dal carattere capolettera. Dopo aver selezionato l'immagine che ci piace si va su Inserisci. Successivamente con le maniglie si ridimensiona e ci si clicca sopra con il destro del mouse per scegliere una posizione del layout che riteniamo esteticamente più valida

capolettera-immagine-testo


CAPILETTERA SU LIBRE OFFICE


libreoffice-capilettera

I capilettera possono essere aggiunti anche con Libre Office. Si clicca con il destro del mouse nel paragrafo in cui aggiungere il capolettera e si sceglie Modifica Stile. Si aprirà un finestra di configurazione in cui scegliere la scheda Capolettere per poi personalizzarne l'aspetto. Si mette la spunta su Mostra capolettere quindi si va su Applica. Il capolettera verrà mostrato in tutti i paragrafi con quello stile quindi sarà necessario creare uno stile di paragrafo utilizzabile solo per il capolettera.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.