Une police design pour les titres de boite

A lire avant tout !

Ce que nous présentons ici est en phase de test, et si globalement tout se passe bien, il y a encore pas mal de choses à traiter, et notament la gestion avec la feuille de style et l'affichage selon les navigateurs. Toute aide, remarque, etc. est bien sûr la bienvenue !

Problématique

Nous avions demandé à une graphiste de nous faire une charte graphique pour un site. Elle nous sert un superbe boulot, et la maquette sous photoshop est un régal. Et pour les tites de boite (menus, et autres boites), pour le champ "recherche"... elle a intégré une police très design, adaptée au projet.

Comment faire pour l'intégrer sur le site sans qu'elle soit automatiquement remplacée par les polices habituelles lors de la lecture de la page chez l'utilisateur ?

Une solution technique

Après recherches, on décide de générer des images avec un script php qui utilise les librairies gd pour générer l'image, et les librairies ttf pour prendre en charge notre police choisie.

Tof à mis au point une fonction qui reçoit en paramètres :

• une image,
• un texte à y inclure,
• le nom d'une police ttf,
• sa taille,
• sa couleur,
• son positionnement,
• l'angle d'écriture,

et qui renvoie l'image générée correspondante.

On intègre cela dans le template.php pour faire en sorte que yacs génère automatiquement des images à partir des textes qu'il génère déjà pour les titres de boite et autres menus. Les modifications dans le css permettrons de gérer l'affichage de l'image et les textes de remplacement.

En résumé : les titres de boite sont automatiquement appelés par yacs, puis ce texte est converti en image avec la police choisie, et l'image ira se positionner à la place du titre habituel.

On vous a préparé un kit de test pour que vous vous rendiez compte de ce que ça peut donner.
Vous trouverez ci-dessous un zip des fichiers nécessaires. Décompressez le fichier et lisez le readme.txt.

Les limites

Toute technique a ces limites, et l'on échappe pas à la règle ici.

Images et accessibilité

Images et accessibilité ne font pas bon ménage traditionnellement. Il faut prendre un soin tout particulier à demeurer "lisible" pour ceux qui auront soit des difficultés à voir, tout simplement, soit ne pourront pas charger l'image - par exemple pour cause inhérente à leur navigateur.

Il est donc impératif de renseigner l'attribut de l'image "alt" avec un texte valide en remplacement de l'image.

Gérer l'affichage de remplacement

Il faudra également être vigilant sur le texte de remplacement, qui doit quand même apparaître si, pour une raison ou une autre, l'image n'apparaît pas.

Bernard a donné une solution pour modifier le css dans ce sens, le principe est le suivant :

• faire générer une balise comme d'habitude
• par CSS, masquer le texte affiché par la balise
• par CSS encore, faire afficher une image de fond qui contient le motif souhaité

Ainsi, les navigateurs ne comprenant rien à CSS ont un texte affiché, tandis que les navigateurs avancés ont le rendu final souhaité.

Exemple : Attention. Le code ci-dessous comporte des espaces après la balise ouvrante < pour des raisons d'affichage. Cet espace n'existe bien sûr pas dans votre css !.

Balise générée :
span class="expired flag"> span> (expiré) /span> /span>

L'affichage brut est le texte ' (expiré) '

Règles CSS pour afficher une image à la place :

.expired { /* display a neat image to flag expired pages */
}

.expired span { /* mask default text */
}

La manipulation est double. Il faut donc avoir une classe ou un identifiant CSS sur la balise cible, et il faut aussi encadrer le texte à masquer par un span>... /span>.

YACS identifie de lui-même les boîtes de navigation, etc, et il est donc possible de les repérer assez facilement.

Affaire à suivre donc.

Vous l'avez testé ?

Donnez-nous votre avis, ça fera avancer le schmilblick