sIFR 3 Mise en évidence et crénage

Question

J'essaie de faire fonctionner l'avance et le crénage sur certains types de sIFR 3 sur un site sur lequel je travaille (comme décrit dans le wiki) : http://wiki.novemberborn.net/sifr3/Styling ), mais ces deux paramètres semblent n'avoir aucun effet, quoi que je fasse.

Je n'utilise pas les nombres entiers (pas de 'px' ni de 'em'), comme il se doit. J'ai également essayé plusieurs fichiers swf de polices différentes, juste pour m'assurer que ce n'est pas la police. Je ne sais pas pourquoi cela ne fonctionne pas. Tous les autres paramètres css que j'attribue à .sIFR-Root fonctionnent parfaitement. Voici un exemple de mon code utilisant "leading".

Dans sifr_config.js :

sIFR.replace(snl, {
    selector: '.section-title h1',
    css: ['.sIFR-root { color: #FFFFFF; text-align: center; leading:2; }'],
    wmode: 'transparent'
});

Dans le document HTML :

<div class="section-title">
    <h1>sIFR Text</h1>
</div>

(J'ai également essayé le code css avec et sans les crochets, car j'ai vu les deux façons de faire. Cela ne semble pas faire de différence).

Qu'est-ce que je fais de mal ? Toute aide serait grandement appréciée ; merci !

Answer 1

ETA : J'ai trouvé une solution moins compliquée : line-height semble fonctionner lorsqu'il est ajouté au CSS de l'élément remplacé (dans mon exemple, ce serait : .sIFR-active .section-title h1). J'ai donc pu utiliser la bonne vieille hauteur de ligne pour simuler une marge.

---

Très bien, puisque cette fois-ci tout le monde est resté sans voix, voici ce que j'ai découvert :

À l'origine, de nombreuses suggestions ont été faites pour remplacer les options margin-top et padding-top par leading, qui ne fonctionnent pas avec sIFR. C'est pour cela que j'ai essayé de l'utiliser. J'avais une seule ligne de texte et j'avais besoin de lui donner un peu d'espace en haut, donc j'ai essayé de le faire en augmentant l'interlignage (hauteur de la ligne), sans succès. Je pense que cela a fonctionné à un moment donné, mais en regardant les journaux de modifications de toutes les révisions de sIFR, j'ai trouvé une note sur une "correction" de l'interlignage. Apparemment, le développeur considérait comme un bogue le fait que l'interlignage soit reconnu sur un texte d'une seule ligne, et l'a donc "corrigé" pour que l'interlignage ne soit appliqué que lorsque le texte comporte plusieurs lignes. J'ai testé en mettant un saut de ligne avant mon texte, et bien sûr, l'interlignage a commencé à fonctionner !

Il semble donc que maintenant, pour obtenir une marge supérieure sur mon en-tête sIFR, je doive ajouter du code inutile d'une manière ou d'une autre - en l'enveloppant dans un div ou un span avec une marge supérieure, ou en ajoutant un saut de ligne et en utilisant une avance négative.

Je n'ai toujours aucune idée du crénage, mais l'espacement des lettres semble fonctionner, donc

Si quelqu'un a des informations supplémentaires à offrir, je suis tout ouïe !

Answer 2

Voici ce qui fonctionne pour moi, en utilisant sIFR 3 pour obtenir un h2 avec la police Serifa en rouge avec un minimum d'espacement des lettres et d'avance. Le swf sIFR actuel n'a rien de spécial, il est simplement créé selon la documentation sIFR. Comme mentionné ci-dessus, offsetTop et tuneHeight fonctionnent également pour ajuster le positionnement (montrés ci-dessous, bien que je ne les ai pas utilisés, donc réglés à 0).

Dans sifr.css

.sIFR-active h2.replace {
    color: #FF0000;
    visibility: hidden;
    font-family: arial,helvetica,clean,sans-serif;
    font-size: 2.5em;
    text-transform:uppercase;
  }

dans sifr-config.js

sIFR.replace(serifa, {
    selector: 'h2.replace',
    css: ['.sIFR-root { letter-spacing: -2; leading: -15; kerning:true; color:#FF0000; text-transform:uppercase; font-size:2.5em; }' ], 
    tuneWidth: '0' , tuneHeight: '0' , offsetTop: '0' });

Dans une page html (par exemple) :

<div class="column grid_4">
    <h2 class="replace">Title here</h2>
</div>