Supporto volontario e collaborativo per Joomla!® in italiano

Come allineare il testo ad un'immagine diagonale

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Codice
Vi è mai capitato di dover allineare del testo ad un'immagine diagonale? Un'esigenza forse rara, ma vediamo in questo articolo come soddisfarla...

In questo esempio il testo dev'essere allineato a sinistra e l'immagine a destra. La vera sfida è che il testo non deve sovrapporsi all'immagine. Il risultato che vogliamo è il seguente:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lectus fringilla, rutrum tortor at, pharetra nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ac leo elit. Sed fermentum, sem eget condimentum maximus, odio lectus pharetra felis, sit amet accumsan magna orci vel velit. Suspendisse potenti. Ut eleifend bibendum pharetra. Sed at dui nulla. Vivamus eget feugiat erat. Cras venenatis, erat et finibus euismod, augue velit lacinia sem, ac iaculis nisl massa eget dolor. Vivamus ipsum quam, placerat ac malesuada vel, lobortis id lorem. Duis sodales nulla ac ex malesuada iaculis. Praesent quis efficitur arcu, ac maximus mauris.

Morbi ultrices risus mi, vitae pellentesque massa condimentum vitae. Vivamus sed gravida nisl. Aliquam rhoncus libero vel nisi consectetur imperdiet. Aenean dapibus suscipit ipsum, vel pulvinar leo consectetur vitae. Maecenas ac consectetur neque. Nulla elit odio, rhoncus eu sapien in, aliquam rhoncus ante. Quisque et pellentesque leo. Integer a tellus nec enim rhoncus viverra. Etiam eget lorem vel felis rutrum imperdiet vitae et augue. Aliquam a commodo nisi. Donec euismod tellus in lacus tincidunt ultrices. Duis convallis ut augue sed sollicitudin. Duis faucibus dignissim nulla nec molestie. Pellentesque viverra erat suscipit nunc imperdiet, vel cursus enim sodales. Morbi blandit, risus a congue aliquet, nunc mi viverra sem, sit amet volutpat turpis leo nec augue.

 

SOLUZIONE

Possiamo aggiungere dei div vuoti con float a destra con valori di larghezza dinamici per forzare il testo a non sovrapporsi all'immagine.
Nota: in questo esempio l'immagine PNG ha dimensioni 300x300 pixel, per metà è trasparente e viene aggiunta come sfondo con il CSS.

L'HTML

L'HTML per questo esempio appare in questo modo:

<div id="container">
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <div class="spacing"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

Da notare i molteplici div vuoti con il class spacing. Questi elementi in combinazione con alcuni CSS generano la spaziatura tra il testo e l'immagine.
Il numero di div con lo psacing è uguale al numero di linee di testo richieste per riempire l'altezza dell'immagine. In questo esempio l'immagine dev'essere coperta da 14 linee.

IL CSS

Abbiamo suddiviso il CSS in parti per una spiegazione migliore.

#container {
  background-image: url(bg.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 300px auto;
  min-height: 300px;
}

La classe #container fa riferimento al testo. E' molto importante definire il font-size e il line-height per calcolare successivamente i valori di altre proprietà.

.spacing {
  float: right;
  clear: right;
  height: 22px;
}

Questa proprietà indica ai div vuoti di flottare a destra. Nota: il valore dell'altezza è lo stesso che usiamo per il line-height dei paragrafi.

.spacing:nth-child(1) {
  width: 305px;
}
.spacing:nth-child(2) {
  width: 283px;
}
.spacing:nth-child(3) {
  width: 261px;
}
.spacing:nth-child(4) {
  width: 239px;
}
.spacing:nth-child(5) {
  width: 217px;
}
.spacing:nth-child(6) {
  width: 195px;
}
.spacing:nth-child(7) {
  width: 173px;
}
.spacing:nth-child(8) {
  width: 151px;
}
.spacing:nth-child(9) {
  width: 129px;
}
.spacing:nth-child(10) {
  width: 107px;
}
.spacing:nth-child(11) {
  width: 85px;
}
.spacing:nth-child(12) {
  width: 63px;
}
.spacing:nth-child(13) {
  width: 41px;
}
.spacing:nth-child(14) {
  width: 19px;
}

Il codice di cui sopra è la parte più divertente e potremmo aver bisogno della calcolatrice.

Il valore dell'ampiezza scelto per .spacing: nth-child (1) si applicherà al primo div con il class spacing, allo stesso modo .spacing: nth-child (2) definisce una larghezza leggermente più piccola e così via fino a raggiungere l'elemento distanziatore n. 14.

Questo per definire valori dal più alto al più basso per ciascun div vuoto a destra e rendere possibile l'allineamento del testo a sinistra senza sovrapporsi all'immagine.

Detto questo, come possiamo calcolare la larghezza di ciascun div vuoto? La risposta richiede una piccola formula basata sui valori di:
- line-height per il testo (22px nell'esempio)
- background-size (300px nell'esempio)

La larghezza del primo div vuoto è 305 px, che è il valore della larghezza dello sfondo definito + 5 pixel extra che abbiamo incluso per evitare che il testo sia troppo vicino al bordo dell'immagine.

BONUS: LESS

Un'alternativa è utilizzare il LESS. E' possibile generare lo stesso risultato utilizzando LESS per creare dinamicamente i valori delle larghezze di ciascun div con classe spacing, senza preoccuparsi della matematica.

Decidi l'altezza per il testo e la larghezza dello sfondo tramite le variabili:

@textHeight: 22px;
@backgroundWidth: 300px;
@extraSpacing: 5px;
@initialWidth: @backgroundWidth + @extraSpacing;
@textLines: @backgroundWidth / @textHeight;</code>


Le proprietà del container:
#container {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: @backgroundWidth auto;
    min-height: @backgroundWidth;
}

Il testo e le proprietà della spaziatura calcolate dinamicamente in base ad alcune variabili:
#container p {
    line-height: @textHeight;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: @textHeight - 8;
}
 
.spacing {
    float: right;
    clear: right;
    height: @textHeight;
}


Loop che genera l'ampiezza dinamica per tutti i div vuoti:
.generate-spacing(@i, @end) when (@i <= @end) {
    .spacing:nth-child(@{i}) {
        width: @initialWidth - ((@i - 1) * @textHeight);
    }
    .generate-spacing((@i + 1), @end);
}
 .generate-spacing(1, @textLines);

 



Articolo tratto da: How to Align Text With a Diagonal Image di OSTraining

CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.7.0 Stabile Italiana
Data di rilascio: 25 Aprile 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: