maidireJoomla.it

Mentre realizzavo un sito web con Joomla 1.6 mi sono imbattuto in un piccolo ma rognoso problema: chi aveva realizzato il file .psd contenente l'immagine dei template (uno per la home e uno per le pagine internet) aveva usato dei caratteri con effetto ombra.
Niente di più facile, mi sono detto, visto che il linguaggio CSS3 prevede la possibilità di usare la proprietà text-shadow per realizzare l'effetto ombra sui caratteri di testo. Questo va bene se parliamo di browser come Firefox, Chrome, Opera e Safari ma non per... indovinate? Internet Explorer naturalmente!

Già lo sappiamo che IE ci da non pochi problemi nella realizzazione di un template per Joomla visto che non "digerisce" molte delle specifiche degli Style Sheet.

Dopo vane e ardue ricerche in rete ho trovato alcune soluzioni ma nessuna che si avvicinasse all'effetto ombra che si vedeva con Firefox.

Teoricamente avrei potuto usare i filtri che mamma Microsoft mette a disposizione, ovvero: filter:progid:DXImageTransform.Microsoft.Shadow(sProperties) solo che l'effetto sul font era pessimo, l'ombra c'era ma il font si deteriorava presentando delle scalettature.

Questo è l'effetto shadow con Firefox usando la proprietà text-shadow

e questo l'effetto shadow usando il filter shadow di microsoft

Questo sostanzialmente è dovuto al fatto che in IE la proprietà ClearType del browser è disattivata per default e questo impedisce a IE di effettuare al meglio il rendering del font.

A questo aggiungiamo il fatto che stavo usando dei font personalizzati ed evidentemente non adatti a queste operazioni. Sembra infatti che con i font standard questo non accada, ma non ne sarei tanto sicuro.

Comunque, alla fine il girovagare per la rete ha dato i suoi frutti. Ho infatti trovato un javascript che sfrutta jQuery per realizzare un effetto che si avvicina molto a quello del css3.

Lo script si chiama jquery.textshadow.js e lo potete scaricare da questo link. Il link per scaricare jquery lo trovate in fondo a questo articolo.

Come si usa

Nel foglio di stile del template aggiungete la proprietà text-shadow per quelle classi che dovranno formattare il testo con l'effetto ombra, questo serve affinchè gli altri browser visualizzino l'effetto ombra sui caratteri.

Esempio

h1 { 
 text-shadow: 1px 1px 2px #777; 
}

Scaricate lo script jquery.textshadow.js e lo script jquery.js e metteterli dentro una cartella (ad esempio chiamata js) all'interno della cartella del template.

Nel file index.php del template inserite il codice qui sotto riportato, possibilmente in fondo al file prima del tag </body>. In genere tutti gli script javascript andrebbero inseriti in fondo alla pagina.

<!--[if gte IE 6]>
 <script type="text/javascript" src="/templates//js/jquery.js"></script>
 <script type="text/javascript" src="/templates//js/jquery.textshadow.js"></script>

 <script type="text/javascript">
 $(document).ready(function(){
 var option = {
 x:      0.5, 
 y:      0.5, 
 radius: 2,
 color:  "#d3d3d3"
 }
 $("#topmenu li a").textShadow( option );
 $("div.module_menu h3").textShadow( option );
 $(".moduletable h3").textShadow( option );
 $(".item-page h2").textShadow( option );
 })
 </script>  
<![endif]-->     

Come vedete lo script è condizionato per essere caricato solo se si usa il browser Internet Explorer dalla versione 6 in poi.

Le prime due righe collegano i due script al file index.php, da notare che il path viene generato da Joomla stesso.

Nella porzione di javascript che usa la funzione .TextShadow contenuta nello script jquery.textshadow.js dobbiamo, a nostro piacimento, modificare i valori x e y per determinare la posizione dell'ombra rispetto al carattere (il valore può essere sia positivo che negativo ed è espresso in pixel), il valore del raggio di espansione dell'ombra e il suo colore.

La funzione che realizza l'effetto ombra ha la seguente sintassi:

$("nome_classe").textShadow( option );

dove "nome_classe" è la classe del foglio di stile, applicata ad un determinato tag del nostro template, a cui vogliamo applicare l'effetto ombra.

Ad esempio la classe .moduletable h3 formatta il titolo dei moduli, quindi scrivere $(".moduletable h3").textShadow( option ); significa dire allo script di applicare l'effetto ombra ai titolo dei moduli.

Cercate di usare questo script con parsimonia applicando al numero minore di classi di stile altrimenti rischiate di rallentare la visualizzazione della pagina.

Noterete infatti che, quando la pagina viene caricata con IE, questa prima viene visulizzata con i font normali e solo dopo compare l'effetto ombra.

Link utili

jQuery download

Font personalizzati con Joomla

Introduction to CSS3

CSS Wikipedia

Microsoft MSDN Library - Font Shadow