Lezione 30: CSS: Unicode Range.

Impariamo a costruire un sito Web

Lezione 30: CSS: Unicode Range.

Benché dubiti che ci sia qualcuno che, pur magari avendo seguito lo svolgersi del corso, ricordi che avevamo promesso di riprendere dettagliatamente un argomento, mantengo ugualmente la promessa.

L’argomento, è ovvio, è quello riportato nel titolo e la lezione in cui lo abbiamo anticipato rimandando ad una descrizione maggiormente esaustiva è la lez. 24.

[ad code=5 align=center]

In quella lezione, per chi vuole rivedere l’argomento, avevamo introdotto la descrizione della proprietà @font-face alla quale possiamo appunto applicare il descrittore Unicode Range.

Il descrittore unicode-range è stato progettato per aiutare quando si utilizza un font di caratteri che non ha tutti i caratteri che dobbiamo utilizzare in una pagina. Aggiungendo questo descrittore alla proprietà @font-face in un CSS possiamo specificare il range di caratteri che il font deve coprire.

Ad esempio se scriviamo:

@font-face {
    font-family: Journal;
    src: url("fonts/Journal.ttf");
    unicode-range: U+00-FF;
}

copriamo il range dal codice non stampabile U+00 (Control) sino a U+FF (ÿ)

Questa proprietà dice per quali caratteri va usato il font a cui è applicata la proprietà, per cui prevedendo font diversi per range limitati di caratteri possiamo in realtà costruirci quasi un font nuovo mischiando font diversi per diversi caratteri.

Vediamo un esempio di utilizzo di questa regola. Supponiamo di voler utilizzare come segno di paragrafo quello del font Sansation che ovviamente l’utente che ci leggerà facilmente non avrà installato sul proprio computer. Teniamo presente che il codice Unicode del segno § è U+A7 (Alt + 245 in Windows per chi non lo avesse sulla tastiera).

Dunque scriviamo nel CSS:

@font-face {
   font-family: Sansation;
   src: url("fonts/Sansation.ttf");
   unicode-range: U+A7;
}

Quello che abbiamo fatto è assegnare un nome al font che vogliamo utilizzare, indicare l’URL del font che naturalmente non è detto che debba essere locale, ma può anche essere su internet ed infine limitare il range di caratteri al solo carattere §.

Possiamo poi aggiungere, sempre nel nostro CSS, una dichiarazione del tipo:

h3 {
   font-family: Sansation, Arial, sans-serif;
}

che dice di usare per le intestazioni di tipo h3 il font Sansation come principale ed in mancanza di questo in ordine di preferenza, Arial e sans-serif. Naturalmente il nostro Sansation avendo un solo carattere potrà essere usato solo per quello e per gli altri caratteri si userà Arial, se disponibile ecc.

A questo punto possiamo usarlo nella nostra pagina web ad esempio nel modo seguente:

<h3>§1. Questo è il primo paragrafo.</h3>

Sin qui tutto facile e magari anche utile in determinate circostanze, ma come al solito arrivano le solite difficoltà dovute al non uniforme comportamento dei browsers. Così mentre per i browsers basati su webkit (Chrome e Safari) non esiste problema perché supportano pienamente la proprietà, così non è per Firefox e le versioni meno recenti di IE.

Il comportamento dei browser che non supportano una determinata proprietà, vale la pena di ricordarlo, è quello semplicemente di ignorare la proprietà. Se questo è accettabile per proprietà tipo box-shadow o border-radius perché se il browser non le supporta al massimo l’utente vedrà il box senza ombra o con gli angoli quadrati anziché arrotondati, questo non è invece accettabile nel caso di
unicode-range perché se questa proprietà non viene riconosciuta il font di riferimento verrà applicato a tutti i caratteri anziché a quello a cui lo volevamo limitato. Quindi dobbiamo trovare una soluzione che ci permetta di risolvere questo problema.

Sappiamo che se un browser trova in un CSS due dichiarazioni della stessa proprietà, la seconda sovrascrive la prima. Quindi se scriviamo:

@font-face {
   font-family: Sansation;
   src: url("fonts/Sansation.ttf"), url("fonts/Sansation.eot");
   unicode-range: U+A7;
}

@font-face {
   font-family: Sansation;
   src: local("Arial");
}

Intanto notiamo che la forma local (“Nome-del-Font”) dice al browser che il font va trovato sul computer dell’utente.

Poi facciamo notare che abbiamo aggiunto ub URL alla prima dichiarazione di @font-face perché come avevamo accennato nella lezione 24 IE riconosce il formato di font eot e non ttf. Oltre all dichiarazione, è evidente dobbiamo disporre di tale versione del font.

Infine abbiamo ripetuto la dichiarazione @font-face con lo stesso nome di font, ma mettendo come source il font locale Arial. In questo modo i browsers che riconoscono la proprietà unicode-range la applicheranno correttamente in quanto questa proprietà non è sovrascritta e gli altri useranno Arial.

Tutto a posto? In realtà non ancora perché le precedenti versioni di Firefox stranamente non si comportano come dovrebbero e continuano ad usare Sansation per tutto il set di caratteri (onestamente non so se adesso è stato corretto, ma ha poca importanza perché comunque ci dobbiamo occupare degli eventuali utenti che ancora staranno usando versioni non aggiornate del loro browser.

Per sistemare anche quest’ultimo problema si può usare il trucchetto di aggiungere una proprietà
unicode-range alla seconda dichiarazione di @font-face avendo l’accortezza di restringere il range a caratteri che non verranno mai usati tipo U+FB50 (è un carattere arabo). In questo modo i browsers che riconoscono la proprietà useranno il nostro font Sansation per il caratter § e non si troveranno mai ad usare il carattere indicato con U+FB50, Arial per gli altri caratteri. Anche Firefox non sbaglierà più perché l’ultima dichiarazione che incontra che avrà la priorità è quellacontiene la proprietà che Firefox ignora, ma stranamente usa per tutto il set di caratteri ed in questo caso sarà Arial.

Per la cronaca lo smile qui sotto si ottiene semplicemendo inserendo una riga così:

<p style=”font-size:96px; font-weight:bold; color:red;”> &#9786;</p>

 ☺

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.