Contactez-nous

1

Un titre tout doux

13 mars 2006
par ARNO*

[SPIP 1.9 et GD2] Voici un effet particulièrement à la mode : le texte et le fond peu contrastés, une légère lueur autour des caractères adoucissant encore la typo. On va dans ce qui suit réaliser l’effet suivant :

Afin de régler notre choix de couleur, et pour avoir une version de notre titre qui fonctionne même sans charger les images, commençons en mode texte.

Voici un style qui approche l’effet recherché, directement en CSS :

  1. body {
  2. background-color: #eeeeee;
  3. }
  4. h1 {
  5. font-size: 50px;
  6. color: #829891;
  7. text-shadow: 0px 0px 3px #999999;
  8. font-family:georgia, times, serif;
  9. font-weight: normal;
  10. }

Télécharger

À l’heure actuelle, à ma connaissance, seul Safari (MacOS) est capable d’afficher le style text-shadow, ce qui donne ceci :

Au pire, on obtient le texte dans la bonne couleur (#829891), sur le fond également de la bonne couleur (#eeeeee), et il manque le halo.

Nous allons maintenant réaliser notre effet avec la fonction image_typo de SPIP 1.9, ce qui nous laissera le choix de la police de caractères. Pour cette explication, j’ai utilisé la police « Migraine » de Stereo-Type.

Le principe est similaire à ce que nous avons déjà expliqué pour réaliser une ombre portée : nous allons réaliser deux versions (un titre net devant, une version floue pour créer le halo derrière) de notre titre, et les superposer.

Voici pour le titre net :

On voit que le simple choix des couleurs, peu contrastées, ne suffit pas à rendre l’effet de titre très doux : sans le halo grisé derrière les lettres (pourtant peu visible), le contraste est trop important.

Réalisons donc une deuxième version du titre, cette fois en appliquant un flou à un titre gris :

Notez que nous avons appliqué deux flous successifs (c’est-à-dire 3 + 3 pixels), au lieu d’un seul image_flou{6}, très long à calculer. Au pire, si PHP s’interrompt après le premier calcul (timeout), il aura sauvegardé le résultat, et pourra partir de là pour calculer le second ; avec le image_flou{6}, il n’y a pas de sauvegarde intermédiaire et, si le serveur ne peut pas réaliser le (gros) calcul dans le temps imparti, il ne le réalisera jamais.

Maintenant il nous suffit de placer le halo exactement sous le titre net. Puisque nous avons appliqué deux flous de 3 pixels, il faut décaler cette image de 3 pixels vers la haut et la gauche pour la « recentrer » (l’effet image_flou agrandit l’image).

Voici un code tout simple pour réaliser la superposition (on peut évidemment l’améliorer) :

  1. <div style="position: relative; height: 100px;">
  2. <div style="position: absolute; top:-3px; left:-3px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=999999}|image_flou|image_flou)]</div>
  3. <div style="position: absolute; top: 0px; left: 0px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=829891})]</div>
  4. </div>

Télécharger


On peut évidemment faire un autre choix de couleurs. Par exemple :

  1. <div style="position: relative; height: 150px;">
  2. <div style="position: absolutex; top:-3px; left:-3px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=829891}|image_flou|image_flou)]</div>
  3. <div style="position: absolutex; top: 0px; left: 0px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=ffffff})]</div>
  4. </div>

Télécharger


Voici une variante qui consiste à renforcer tout de même le contraste du halo, uniquement à l’immédiate proximité des lettres. Il ne s’agit pas de renforcer l’ensemble du halo, mais d’ajouter un peu de contraste juste autour des lettres.

On insère entre les deux « couches » précédentes un halo plus foncé, mais moins flou.

  1. <div style="position: relative; height: 150px;">
  2. <div style="position: absolute; top:-3px; left:-3px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=999999}|image_flou|image_flou)]</div>
  3. <div style="position: absolute; top:-1px; left:-1px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=666666}|image_flou{2})]</div>
  4. <div style="position: absolute; top: 0px; left: 0px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=829891})]</div>
  5. </div>
  6.  
  7. <div style="position: relative; height: 150px;">
  8. <div style="position: absolute; top:-3px; left:-3px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=829891}|image_flou|image_flou)]</div>
  9. <div style="position: absolute; top:-1px; left:-1px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=647f76}|image_flou{2})]</div>
  10. <div style="position: absolute; top: 0px; left: 0px;">[(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=ffffff})]</div>
  11. </div>

Télécharger

On obtient le résultat suivant :

On a assez nettement renforcé la lisibilité, mais le rendu est moins « doux ».

Il y a quelques années, avec un choix de couleurs plus vives — vert, blanc et fond noir — et une police de caractères de vieille machine à écrireTrixie, de LettError —, on réalisait très exactement selon ce principe, mais dans Photoshop, la typographie des premières saisons de X-Files :


Pour terminer, remarquons que, tel que fourni ici, le code insère le titre en double ou en triple dans les alt des images. De fait, dans un affichage en mode texte, on obtiendrait l’équivalent de ceci :

Une solution consiste à vider l’attribut alt des images du dessous, pour ne conserver que celui de l’image supérieure. On peut utiliser le filtre inserer_attribut pour cela. Les deux paramètres qu’on va lui passer sont :
— l’attribut qu’on souhaite insérer (alt) ;
— la valeur de cet attribut (' ', c’est-à-dire le caractère « espace »).

  1. [(#TITRE|image_typo{taille=42,police=migraine_serif.ttf,couleur=999999,largeur=1000}|image_flou|image_flou|inserer_attribut{alt,' '})]

On pourrait de plus objecter que la solution « propre » à cette difficulté consisterait, tout simplement, à faire afficher le halo comme image de fond (background-image) et non comme image réelle (img). Mais comme nos caractères sont en PNG 24 et qu’on exploite la transparence par couche alpha de ce format, nous avons besoin d’intégrer ces images typographiques dans un img pour pouvoir les afficher correctement dans Microsoft Explorer.

  • Marc VALLETEAU de MOULLIAC
    Août 2006

    Très très intéressant, mais j’ai plusieurs questions :

    1. Le filtre image_typo est-il standard dans un spip 1.9 récent (il y a une semaine) ainsi que les autres filtres utilisés ?
    2. Le filtre fonctionne-t-il avec la balise #DESCRIPTIF_SITE_SPIP ?
    3. Où dois-je mettre la typo suggérée (migraine.tff) ? Je suppose dans le répertoire polices (j’en ai copié un dans mon répertoire squelettes) ?

    En effet, lorsque je reprends ton code, j’ai juste un effet bleuté, mais pas la police ...

    Merci pour toutes ces bonnes idées ...

    Marc

  • juliche
    Mai 2007

    Bonjour, j’utilise le filtre |image_typo, mais je rencontre des problèmes avec les accents et je vois que toi non. Existe-il un filtre spip "magique" ou ne pourrais-je régler mon problème qu’en changeant de police (et d’ailleurs comment savoir si elle prendra bien en compte les accents ?). Merci pour tes conseils.

  • Mai 2007

    @juliche

    — D’abord, je travaille systèmatiquement avec des sites passés intégralement en UTF-8. J’ignore comment se comporte le filtre image_typo si l’on reste en ISO-Latin.

    — Ensuite, cela peut provenir de l’encodage de la police. Il faudrait essayer avec d’autres polices. Il m’arrive de ré-encoder une police avec Fontlab, mais ça n’est tout de même pas un logiciel grand public...

  • Septembre 2007

    Merci pour ce joli travail ; Il fonctionne bien, bravo.

    Je n’ai pas trouvé sur le net de lien pour travailler les textes sur ces images : verticaliser par exemple, ou centrer le texte.

    Si tu as des liens à me donner stp.

    Une autre chose qui m’a travaillé et que je ne vois pas comment réaliser c’est comment récupérer les

    ( donc les <h3 class="spip"></h3> pour en faire des images en exergue dans le texte. Si ça peut te donner une idée pour un tuto de plus :-)

  • Septembre 2007

    Je me réponds...désolé : les filtres (dont la rotation) proposés par Arno* pour spip sont là ...désolé pour le bruit :-)

  • Septembre 2007

    Et je finis mes commentaires par le filtre "match" de spip pour extraire le <h3 class="spip"> :

    Je cite :

    - match utilise une expression régulière (cf. preg_match()) pour extraire un motif dans le texte si il est présent, ne retourne rien sinon. Par exemple pour récupérer le premier mot du titre [(#TITRE|match^\w+)]. Ce peut être un texte simple, afficher "toto" si dans le titre : [(#TITRE|matchtoto)]

    Comme quoi au lieu de chercher via google dans GD2 et php j’aurais encore une fois mieux fait de RTFM :-)

    Pour le détail de preg_match() (pour les neuneus comme moi) c’est par ici

  • gilles de lyon
    Mai 2009

    Vu la date du dernier message, j’ai bien peur que personne ne passe plus par ici ... sourires.

    Je tente quand même ma chance. Je voudrais faire exactement ce qui est décrit au dessus, à savoir : transformer tout les

    intertitre

    (qui deviennent des des balises h3 dans le code généré par Spip) en image (pour pouvoir utiliser une typo et des effets particuliers).

    J’avais que la piste du filtre "match" ne me sert pas à résoudre ce casse-tête... Si quelqu’un sait comment faire, un grand merci à lui.

    gilles

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.