A A
RSS

sIFR pour changer sa typographie sous Wordpress

Lundi 18 août, 2008

A la une, Wordpress


Il existe une solution pour modifier la typographie de votre thème Wordpress : sIFR (Scalable Inman Flash Replacement). Elle trouve ses origines dans les techniques de remplacement par une image, mais utilise de petites animations Flash à la place d’images GIF, JPEG ou PNG. Son intérêt réside dans le fait que le texte des animations Flash est de type vectoriel. Il est donc lisse, anticrénelé et redimensionnable avec la page. Grâce à une combinaison de CSS, Javascript et Flash, sIFR permet aux Webdesigners « d’insérer une typographie riche sous Wordpress sans sacrifier l’accessibilité, les bonnes relations avec les moteurs de recherche et la sémantique du balisage ». sIFR a été créé par Mike Davidson, qui est parti d’un concept original développé par Shaun Inman (le « i » de sIFR). Pour plus d’informations, visitez le site officiel concernant sIFR.

Aucun fichier ne sera modifié, excepté ceux téléchargés sur le site de sIFR. Donc n’ayez aucune inquiétude à avoir concernant l’édition de vos feuilles de styles, etc. Attention cependant, sIFR fonctionne uniquement sur serveur Web et non pas dans un environnement local (c. à d. votre ordinateur).

Télécharger sIFR

Avant de commencer, la première chose à faire est de télécharger la dernière version de sIFR disponible (sifr3-r*.zip). Une fois l’archive décompressée vous obtiendrez quatre dossiers et deux fichiers texte. Vous pouvez laisser de côté le dossier demo pour l’instant. Les trois autres dossiers, css, flash et js, contiennent les fichiers qui nous intéressent.

Remplacer la police de caractères

Si vous ne possédez pas Flash, il existe différentes façons pour générer vos fichiers .swf pour sIFR.

En embarquant une police de caractères dans un fichier Flash, sIFR permet l’utilisation de n’importe quelle police de votre choix. Pour ce faire vous devez ouvrir le gabarit Flash sIFR et créer un nouveau fichier .swf qui copie la police depuis votre ordinateur. C’est assez simple à réaliser. Ouvrez le fichier sifr.fla. Vous devriez voir un rectangle blanc (Fig. 1.1).
Capture d’écran à l’ouverture de sifr.fla

Figure 1-1 Ouverture du fichier sifr.fla

L’outil de sélection en main Icône outil sélection, double-cliquez sur le rectangle blanc pour le rendre actif. Sélectionnez le texte (celui qui dit « Bold Italic Normal Bold & Italic », Fig. 1-2), et remplacez-le par un seul caractère, n’importe lequel. Nous utilserons le « n », pour notre exemple.
Résultat après double-clique sur le rectangle blanc

Figure 1-2 Résultat après double-clique sur le rectangle blanc

Si vous souhaitez conserver la possibilité d’écrire en italique ou en gras vous devez saisir un caractère pour chaque option. En l’occurrence, si je souhaite écrire normalement, en italique et/ou en gras je dois saisir « n n n n » (Fig.1-3). Dans notre exemple, on obtient une variation de 25 Ko dans la taille du fichier selon que l’on choisisse toutes les options (40 Ko) ou une seule (15 Ko). A vous d’expérimenter ces différents réglages en fonction de la police que vous choisirez.
Capture d’écran après avoir tapé un caractère

Figure 1-3 Résultat après avoir saisi un caractère

Ajouter les caractères accentués à sIFR

Pour terminer choisissez la police que vous souhaitez utiliser, dans notre exemple nous utiliserons une police de P22 : Bayer Universal (Fig. 1.4).
Boîte de dialogue utilisée pour contrôler la typographie

Figure 1-4 Boîte de dialogue utilisée pour contrôler la typographie

Par défaut, les caractères accentués ne sont pas inclus dans sIFR. Pour ajouter les accents et autres caractères spéciaux, la solution consiste à cliquer sur le bouton « Intégrer » afin d’inclure le jeu de caractères utilisé selon la langue souhaitée. Pour le français nous devons rajouter le jeu de caractères Latin I (Fig.1-5) en plus de ceux déjà sélectionnés.
Boite de dialogue intégration de caractères

Figure 1-5 Boite de dialogue intégration de caractères

Dès que vous avez terminé et que vous avez choisi la police appropriée, allez dans Fichiers > Paramètres de publications. Dans cette boîte de dialogue assurez-vous que les options suivantes sont identiques à celles indiquées ci-dessous (Fig. 1-6).
Boite de dialogue paramètres de publication

Figure 1-6 Boite de dialogue paramètres de publication

Sous l’onglet format choisissez Flash (.swf) et utilisez le nom de votre police comme nom de fichier (.swf). Ce nom doit être écrit sans espaces, utilisez l’underscore à la place du tiret. Ensuite cliquez sur « Publier » afin de créer votre fichier (votre fichier devrait apparaître dans le même dossier que votre fichier sIFR.fla). Vous voilà à présent prêt pour télécharger les fichiers sur votre serveur web.

Télécharger les fichiers sur votre serveur

Pour faire fonctionner correctement sIFR les fichiers suivants doivent être présents sur votre serveur Web :

  • css/sifr.css
  • js/sifr-config.js
  • js/sifr.js
  • flash /votrepolice.swf

Remplacez votrepolice.swf par le nom de la police précédemment créée. Nous placerons donc le fichier Bayer_Universal.swf sur notre serveur.
Ensuite il faut lier correctement les fichiers CSS et javascript. On s’occupera de Flash à la prochaine étape. Ajoutez simplement les lignes de code 4 à 6 suivantes dans le fichier d’en-tête (header.php) de votre thème Wordpress :

<html>
<head>
…
<link rel="stylesheet" href="/chemin/vers_le/fichier/sifr.css" type="text/css" media="all" />
<script type="text/javascript" src="/chemin/vers_le/fichier/sifr.js"></script>
<script type="text/javascript" src="/chemin/vers_le/fichier/sifr-config.js"></script>
…
</head>
<body>
…

Prenez bien soin d’inclure ces trois lignes ente les balises head de votre fichier header.php. Et n’oubliez pas de modifier le code /chemin/vers_le/fichier/ par le chemin qui mène à ces fichiers sur votre serveur. Par exemple :

<html>
<head>
…
<link rel="stylesheet" href="http://www.exemple.com/css/sifr.css" type="text/css" media="all" />
<script type="text/javascript" src="http://www.exemple.com/js/sifr.js"></script>
<script type="text/javascript" src="http://www.exemple.com/js/sifr-config.js"></script>
…
</head>
<body>
…

Initialiser sIRF

C’est ici qu’on appelle le fichier .swf pour lui dire quel texte remplacer. Dans notre exemple, nous remplacerons tous les titres de niveaux 2 ayant pour classe sIFR3 (h2.sIFR3). Le fichier qui s’occupe du remplacement de texte est sifr-config.js. Pour illustrer nos propos nous prendrons comme exemple deux articles balisés comme suit :

<h2 class="sIFR3">Un titre quelconque</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed mauris. Nulla magna neque, viverra sit amet, feugiat non, porttitor eu, ante. Aenean eleifend. Nunc tincidunt diam eu augue. Sed condimentum urna id nisl. Vivamus luctus, felis vitae scelerisque placerat, orci nunc dictum purus, vitae   condimentum arcu felis vel dolor.</p>
<h2 class="sIFR3">Un autre titre discutable</h2>
<p>Sed convallis mauris vitae turpis. Ut auctor, magna a pharetra laoreet, massa augue pretium elit, quis faucibus sem purus ac lectus. Fusce cursus enim et tellus rhoncus viverra. Phasellus eu velit nec velit tempor consequat. Curabitur ut lacus et lectus euismod pulvinar. Suspendisse quam. Mauris lamcorper molestie arcu.</p>

Ayant pour feuille de style :

h2.sIFR3 {
     margin: 12px 0 7px 0 ;
     padding-bottom: 5px ;
     font-family: Georgia, "Times new Roman", serif;
     font-size: 24px;
     font-weight: normal;
     color: #9f0000;
     border-bottom: 1px solid #ccc;
}

p {
     padding-bottom: 11px;
     font-family: Verdana, Helvetica, Arial, sans-serif;
     font-size: 13px;
     line-height: 22px;
}

Ce qui donne le résultat suivant :
Exemple d’articles

Figure 1-7 Exemple d’articles

Pour commencer, ouvrez le fichier sifr-config.js et ajoutez le code suivant :

var votrepolice = {
     src: '/chemin/vers_le/fichier/votrepolice.swf'
};
sIFR.activate (votrepolice);
sIFR.replace (votrepolice, {
     selector: 'h2.sIFR3',
     wmode: 'transparent'
});

La ligne 6 spécifie le choix du sélecteur, h2.sIFR3 dans notre cas. Remplacez votrepolice (lignes 1, 2, 4 et 5) par le nom de la police précédemment choisie, Bayer_Universal dans notre exemple. Le nom de votre fichier ne doit pas comporter d’espaces et être écrit en un seul mot, utilisez de préférence le cadratin ( _ ) plutôt que le tiret ( - ), si ce n’est pas le cas recommencez l’étape précédente. Modifiez également le chemin d’accès à votre fichier .swf (ligne 2). Ce qui devrait donner quelque chose comme :

var Bayer_Universal = {
     src: 'http://www.exemple.com/flash/Bayer_Universal.swf'
};
sIFR.activate (Bayer_Universal);
sIFR.replace (Bayer_Universal, {
     selector: 'h2.sIFR3',
     wmode: 'transparent'
});

Ce qui a pour effet d’activer le fichier .swf que l’on a créé et remplace nos titres par le texte sIFR. Notez correctement le chemin qui mène à votre fichier .swf car une erreur est si vite arrivée !

Inclure les style CSS

A présent que notre texte est remplacé il nous faut lui donner du style. Ce qui prête à confusion avec sIFR c’est que l’édition des style se fait dans un fichier javascript (sifr-config.js) et non dans une feuille de style. Néanmoins ce formatage est réalisé, la plupart du temps, à l’aide de règles CSS habituelles.
Les styles CSS seront insérés grâce à .sIFR-root (ligne 4). Ce qui, en gros, veut dire : « Tous les styles qui sont là doivent s’appliquer au nouveau texte sIFR ».

sIFR.replace(votrepolice, {
     selector: 'h2.sIFR3',
     css: [
     '.sIFR-root { REGLES CSS PRINCIPALES }'
     ],
     wmode: 'transparent'
});

Donc, afin de styler votre texte, il suffit d’ajouter vos styles à cet endroit comme vous le feriez avec une feuille de style classique. Ce qui, pour notre exemple, donne :

sIFR.replace(Bayer_Universal, {
     selector: 'h2.sIFR3',
     css: [
     '.sIFR-root { font-size: 24px; font-weight: normal; color: #9f0000;}'
     ],
     wmode: 'transparent'
});

Comparons le texte normal (colonne de gauche) avec le texte sIFR (colonne de droite), Fig. 1.8.
 A droite le texte sIFR, à gauche le texte normal

Figure 1-8 A gauche le texte normal, à droite le texte sIFR

Il est vrai que cela entraine des problèmes d’espace quand le texte est remplacé. Heureusement, ces problèmes sont facilement résolus grâce aux options Javascript avancées de sIFR. Mais laissons cela de côté pour plus tard.

Ajouter des styles alternatifs

Vous avez la possibilité d’ajouter des styles optionnels au balisage de vos titres. Si vous désirez utiliser les balises em et strong à l’intérieur de vos titres ajoutez les lignes de code suivantes (lignes 6 et 7).

...
sIFR.replace(Bayer_Universal, {
     selector: 'h2.titre_sifr',
     css: [
     '.sIFR-root { font-size: 24px; font-weight: normal; color: #9f0000;}'
     'em { font-style: italic; }'
     'strong { font-weight: bold; color: #333; }'
     ],
     wmode: 'transparent'
});

A présent, modifions le titre h2 de notre exemple et ajoutons une balise strong :

<h2 class="titre_sifr">Un <strong>très long</strong> titre quelconque</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed mauris. Nulla magna neque, viverra sit amet, feugiat non, porttitor eu, ante. Aenean eleifend. Nunc tincidunt diam eu augue. Sed condimentum urna id nisl. Vivamus luctus, felis vitae scelerisque placerat, orci nunc dictum purus, vitae condimentum arcu felis vel dolor.</p>
...

Et observons le résultat :
Une partie d’un titre d’article en gras

Figure 1-9 Une partie d’un titre d’article en gras

La touche finale

Pour terminer nous allons ajouter une dernière règle au fichier sifr.css qui cache le texte par défaut pendant que sIFR effectue son calcul, évitant ainsi l’apparition puis la disparition du texte durant le chargement du texte de remplacement. Ouvrez le fichier sifr.css (dans le répertoire css), faites le défiler jusqu’en bas :

  @media screen {
    /* Example:
    .sIFR-active h1 {
       font-family: Verdana;
       visibility: hidden;
    }
    */
  }

Supprimez les lignes de commentaires (lignes 2 et 7) pour rendre la règle active. Ensuite remplacez le sélecteur h1 par le sélecteur h2.sIFR3 (ligne 3). Vous obtiendrez le résultat suivant :

  @media screen {
    .sIFR-active h2.sIFR3 {
       font-family: Verdana;
       visibility: hidden;
    }
  }

Quand sIFR est actif le texte est invisible, s’il est désactivé le texte normal demeure visible grâce à la classe .sIFR-active placée devant h2.sIFR3.
Et voilà le travail ! A présent SIFR va remplacer tous les titres de niveau h2.sIFR3 sur vos pages en Bayer Universal, sans que vous ayez à lever le petit doigt.

Bien utiliser sIFR

sIFR est parfait pour les changements qui nécessitent une police unique. Cependant il ne possède pas la souplesse de l’image de remplacement. Vous ne pouvez pas déformer le texte, ajouter d’image d’arrière-plan, ni faire de changement radicaux au texte au-delà de ce que Flash peut normalement accomplir.
L’autre inconvénient de sIFR est qu’il peut être un peu gourmand en ressource. Si vous avez plusieurs titres de remplacement en Flash sur votre page, le temps de calcul peut alourdir le chargement de la page et affecter la réactivité de l’interface. Pour cette raison, c’est une bonne idée à utiliser avec modération et de ne pas l’appliquer à de grandes dalles de corps du texte.
SIFR peut également remplacer les liens, mais vous perdrez certaines fonctionnalités naturelles du lien, dû simplement à la nature de Flash. Un clic droit sur un lien Flash n’affichera pas le menu contextuel dans le navigateur. Positionner la souris sur le lien n’indiquera pas où il mène. Donc, comme dans tout ce qui a un impact sur l’utilisation, sIFR doit être employé en connaissance de cause.

Pour en savoir davantage sur sIFR

Toutes les règles CSS ne s’appliquent pas à sIFR. Vous devez consulter la documentation de sIFR pour vous assurer de la compatibilité (tout particulièrement la section concernant le style).
Maintenant que vous avez à votre disposition une multitude de police de caractères vous allez trouver que maintenir votre thème Wordpress est devenu juste un peu plus difficile ! Jetez donc un œil sur l’article d’I Love Typography, sur le choix de la typo (en anglais).
De plus si vous êtes coincé Joyent dispose d’un fo rum dédié à sIFR (en anglais).
Ce tutoriel est une traduction librement adaptée d’un article de David Yeiser dont la version originale est visible sur le site Design Intellection. N’hésitez pas à aller y jeter un œil.

  • FaceBook
  • Delicious
  • Stumbleupon cet article !

Tags : ,

11 Commentaire(s) Pour cet Article

  1. Eric P dit :

    Bravo pour ces explications très bien faites !

  2. Geoffrey dit :

    Merci pour ce super tutoriel ! Bon, j’ai mis 3 fois avant de bien réussir mais j’ai réussi ! Et là, j’ai un problème, le style de mon texte est bleu et souligné et ferré à gauche (le texte par défaut je pense), je n’arrive pas à lui donner une couleur css en hover (comme je fais dans ma feuille de style en faisant a:hover par exemple) bien que j’ai quand même réussi à lui régler sa taille dans le fichier sifr-config.js…

  3. Jean-Baptiste dit :

    Je n’y arrive toujours pas, même après avoir bouffé pleins de tutos, ça ne veut pas marcher…

  4. Roland dit :

    Réussi, grace à toi !
    Merci
    Pour ce qui est du a:hover, j’ai trouvé une solution. Si ca interesse qqn !

  5. qzdbdx dit :

    Super tuo, mais il faut panser à mettre à jour, car il n’y a plus 2 fichier css mais 1, et le fichier JS, ne fait plus 0 Mo, car il y a des explication dedans.

    En tous cas, super tuto merci beaucoup

  6. Janguee dit :

    Mise à jour effectuée ! Elle prend en compte la dernière révision en date à ce jour : sifr3-r436

  7. seoelite dit :

    Thank you. I read herelots of valuable sentences. Greetings from Poland.

  8. Tominator dit :

    Très bon articles, merci beaucoup !

  9. Jamel dit :

    j’ai bien arriver a afficher le texte avec la police voulu mé ca marche juste sur mon pc!! par contre si j’ouvre ma page sur un autre pc ca m’affiche la police par defaut !!
    qu’il k’un a une idée ???

  10. pixeline dit :

    c’est moi ou il y a une erreur à l’étape “Ajouter des styles alternatifs”:

    le paramètre css, prend un Array. Donc chaque élément de l’array doit etre séparé par une virgule. Non?

    donc au lieu de:

    sIFR.replace(Bayer_Universal, {
    selector: ‘h2.titre_sifr’,
    css: [
    '.sIFR-root { font-size: 24px; font-weight: normal; color: #9f0000;}'
    'em { font-style: italic; }'
    'strong { font-weight: bold; color: #333; }'
    ],
    wmode: ‘transparent’
    });

    il faudrait:

    sIFR.replace(Bayer_Universal, {
    selector: ‘h2.titre_sifr’,
    css: [
    '.sIFR-root { font-size: 24px; font-weight: normal; color: #9f0000;}',
    'em { font-style: italic; }',
    'strong { font-weight: bold; color: #333; }'
    ],
    wmode: ‘transparent’
    });

  11. Raspberry Design dit :

    Bonjour,

    Merci pour le tuto, il est vraiment utile. Cependant, j’ai un petit problème, lorsque je met le wmode transparent, j’ai un background noir. Quelqu’un sait-il d’où ça peut venir ? (Il n’y a pas de background noir défini dans mon css).

    Merci.

1 Rétroliens Pour Cet Article

  1. sIFR : la boîte à outils | ReservoirTags dit :

    [...] incorporer la police de votre choix. En outre vous devez posséder le logiciel Flash d’Adobe pour créer un fichier sIFR embarquant la police choisie. Du moins, cela était un inconvénient jusqu’à l’apparition de sIFR Generator qui permet [...]

Quelque chose à Dire ?

Miscélanées
  • Après MagMyPic.com, un site américain qui vous permet d’utiliser un de vos photos perso sur la couverture d’un magazine, c’est au tour de Relay de reprendre l’idée pour un adaptation à la française : Faiteslacouv.com vous permet de faire la “Une” de l’Express, Closer, Entrevue, Marianne, etc.

  • Si vous connaissez déjà les papertoys, vous allez adorer les Nanibird, une création de McKibillo, alias Josh McKible. Faites un tour sur le site www.nanibird.com où vous pourrez télécharger, imprimer, découper et designer votre propre Nanibird en papier.

  • Pour retoucher facilement vos photos essayez donc magmypic.com, photofunia.com ou moonjee.com. Transférez une photo, sélectionnez un effet, quelques secondes plus tard, vous obtenez une photo truquée !

Espace publicitaire
Dernières textures sur Flickr
Textureold-photo-backGraffiti in soft plasterThe Dead Marshesunaciertamirada textures 28DoriathSkyblue_Cloudwhite_2991Skyblue_Cloudwhite_2993Skyblue_Cloudwhite__MG_2997.jpg