Capolettera con testo o immagini

Capolettera nei tempi antichi

La pratica dei “capolettera” è una pratica che risale ai tempi in cui, preti di ordini particolari, chiusi in conventi e monasteri, copiavano a mano antichi testi, facendone delle coppie: gli amanuensi.
La tecnica era semplice, ma molto complessa da realizzare. La prima lettera del capitolo, veniva fatta più grande rispetto alle altre, e resa estremamente lavorata, con disegni e decorazioni davvero spettacolari.
Le rappresentazioni potevano essere di varia natura: da immagini sacre a semplici cornicette, ma molto elaborate nell’insieme.
Questa meraviglia pittorica, si perse poi con l’invenzione della stampa classica, dato ceh non era pensabile pe ogni lettera creare uno stampino elaborato ogni volta in modo differente.
Nella figura che accompagna questo scritto, vedete un semplice esempio di capolettera in stile medioevale.

Capolettera in tempi moderni

Ovviamente noi non andremo a ricreare un capolavoro simile, dato che si tratta di un’immagine e non di una lettera di semplice testo tipografico, ma ci limiteremo a fare capire come poter inserire una lettera dalle dimensioni notevoli, e far si che il testo, nelle due o tre righe a seguire, rimanga accostato a questa lettera come se fosse un margine.
Vedremo anche come inserire una immagine in diverse posizioni, rispetto al testo che la accompagna.

Capolettera di testo

Per prima cosa partiamo dalla lettera, da cui il nome di “capolettera”.
Creiamo una classe chiamata “capolettera” e inseriamo il seguente codice.

.capolettera {
    float         : left;
    color         : rgb(255, 0, 0);
    font-size     : 78px;
    line-height   : 62px;
    padding-top   : 2px;
    padding-right : 2px;
    font-family   : Georgia;
}

Assegnando questa classe alla prima lettera del paragrafo, avrete un simpatico effetto grafico.

Ovviamente i valori sono personalizzabili a seconda di cosa voglio ottenere.
Consiglio di usare “em” al posto di “px” per avere maggior dinamismo nelle risoluzioni mobili.
Usate inoltre caratteri “serif”, cioè “con grazie”, cosi da dare una certa estetica alla lettera ingrandita.
Per il colore potete usare indifferentemente valori “rgb” a tinte piene, oppure i valori “rgba” che sfruttano anche la possibilità di una trasparenza, oppure il formato esadecimale “#” tipico del web.

Capolettera con immagine

Vediamo come inserire un’immagine.
Un procedimento analogo a quello della semplice lettera, si può seguire per quello che riguarda le immagini.
A differenza pero di un capolettera “testuale” che viene posto sempre all’inizio di un nuovo paragrafo, e quindi caratterizza l’inizio del periodo, le immagini possono essere posizionate in punti diversi, a seconda della necessita.
Ci occorre quindi di far si che l’immagine, non appaia solo affiancata dal testo, ma spesso ne sia avvolta.
Contrariamente a quanto si possa pensare, le normali proprietà di allineamento non sono adatte.
Con gli allineamenti “baseline, top, button, middle” e alcuni altri, l’immagine non viene allineata al testo intero, ma solo alla prima linea del paragrafo, causando cosi uno scompenso antiestetico nella pagina.

.posizioneImg{
      float : left;
      margin : 10px; 
      /* facoltative - da usare se si vuole ridurre l'immagine */
      display : inline;
      width: 30%; 
      height: 30%;}

Gli attributi “display”, “width” ed “height” sono facoltativi inquanto, display è “inline” di default, width ed height se non specificati, consentono al programma di acquisire le reali dimansioni dell’immagine.