[spip-dev] Image typographique

Bonjour bonjour,

Je suis admin du site www.blogotheque.net
Je me permets de poster ici pour vous faire un retour sur le filtre image typo car nous lui trouvons quelques limites alors que nous souhaitons vraiment l’utiliser.

Aujourd’hui nous utilisons pas mal sur notre site le script SiFR qui permet de remplacer à la volée des textes par un typo spécifique (en l’occurence l’impact). SiFR permet d’avoir une typo lissé et d’appliquer tous les styles CSS sur les caractères générés. Et c’est pour cette raison que nous avons utilisé cette méthode plutôt que celle des images typographiques de SPIP.

Malheureusement SiFR n’est pas un script parfait : il est en flash, le clique droit est impossible, l’ouverture dans un nouvel onglet est impossible. Mais le plus “lourd” c’est que si on l’utilise trop sur une page, le temps de chargement est énorme. Et pour finir il fait planter certains navigateurs (mais aléatoirement, ce n’est pas systématique).

Je vais donc devoir revenir sur un script d’image typographique mais le filtre de spip est limité :

  • on ne peut pas jouer sur l’espacement des lettres
  • on dois impérativement écrire dans l’interface de rédaction mon texte en majuscule si je veux que l’uppercase soit pris en compte pour le filtre d’image typographique.

Qui plus est le filtre ne semble pas imperpréter le fichier de police comme SiFR ce qui fait qu’à un taille a peut près égale, la typo ne réagit pas du tout de la même façon. Vous pourrez vous en rendre compte ici :

Est ce que vous voyez comment nous pourrions optimiser ce filtre ?

Par avance merci de vos retours.

Je reste bien évidemment dispo pour préciser certaines choses si besoin !

Mathieu Genelle a écrit :

Bonjour bonjour,

Je suis admin du site www.blogotheque.net <http://www.blogotheque.net>
Je me permets de poster ici pour vous faire un retour sur le filtre image typo car nous lui trouvons quelques limites alors que nous souhaitons vraiment l'utiliser.

Aujourd'hui nous utilisons pas mal sur notre site le script SiFR qui permet de remplacer à la volée des textes par un typo spécifique (en l'occurence l'impact). SiFR permet d'avoir une typo lissé et d'appliquer tous les styles CSS sur les caractères générés. Et c'est pour cette raison que nous avons utilisé cette méthode plutôt que celle des images typographiques de SPIP.

Malheureusement SiFR n'est pas un script parfait : il est en flash, le clique droit est impossible, l'ouverture dans un nouvel onglet est impossible. Mais le plus "lourd" c'est que si on l'utilise trop sur une page, le temps de chargement est énorme. Et pour finir il fait planter certains navigateurs (mais aléatoirement, ce n'est pas systématique).

Sans compter qu'a l'impression les titres disparaissent ...

Je vais donc devoir revenir sur un script d'image typographique mais le filtre de spip est limité :
- on ne peut pas jouer sur l'espacement des lettres
- on dois impérativement écrire dans l'interface de rédaction mon texte en majuscule si je veux que l'uppercase soit pris en compte pour le filtre d'image typographique.

Qui plus est le filtre ne semble pas imperpréter le fichier de police comme SiFR ce qui fait qu'à un taille a peut près égale, la typo ne réagit pas du tout de la même façon. Vous pourrez vous en rendre compte ici :

    * avec le filtre d'image typo :
      http://blogotheque.hback.net/-Concerts-a-emporter-?var_mode=recalcul
      (regardez findlay brown)
    * avec SiFR :
      http://blogotheque.net/-Concerts-a-emporter-?var_mode=recalcul
      (regardez findlay brown)
    * et sur un site de font la typo réagit très bien :
      http://www.fonts.com/findfonts/_tryfont.htm?Pid=205890&ProductNo=015333113OPN&ProductID=99231&SiteID=ODBS&SourceFoundry=Monotype%20Imaging&productname=Impact™
      <http://www.fonts.com/findfonts/_tryfont.htm?Pid=205890&ProductNo=015333113OPN&ProductID=99231&SiteID=ODBS&SourceFoundry=Monotype%20Imaging&productname=Impact™&gt;

Est ce que vous voyez comment nous pourrions optimiser ce filtre ?

J'ai aussi constaté des problemes sur les variations de tailles de police sur certaines polices en truetype, et sur certains serveurs : il semble que certaines tailles sont bien rendues, mais les tailles intermédiaires sont mal interpolées. J'ai du utiliser image_typo avec la taille de fonte qui rend bien, puis faire dessus du image_reduire puis image_renforcement, mais c'est pas génial.

il faut chercher du cote de gd2 qui est utilisé pour ces fonctions, toute amélioration sera la bienvenue.
Cédric

Mathieu Genelle a écrit :

- on dois impérativement écrire dans l'interface de rédaction mon texte en majuscule si je veux que l'uppercase soit pris en compte pour le filtre d'image typographique.

Ah ? Est-ce que ça veut dire que #TITRE|strtoupper|image_typo ne fonctionne pas ?

MM.

Avec de l'UTF8, strtoupper ne fonctionne pas correctement. De mon côté, je le fais avec mb_strtoupper.

Le seul hic, c'est que ça me remplace les &nbsp; par &NBSP;. Du coup, il suffit de balancer ça dans une fonciton (mes_fonctions), qui fait le mb_strtoupper puis un replace de &NBSP; en &nbsp;. Et éventuellement d'autres caractères spéciaux, mais à ma connaissance &nbsp; est le seul caractère spécial inséré par la fonction typo de SPIP (de mémoire).

Pour le rendu des tailles, ben il suffit de choisir une taille qui va bien. Ca ne me semble pas méchant de changer de taille.

Comme l'indique Cédric, l'idéal est de calculer les images deux fois plus grandes (taille=38) puis de réduire par 2, de façon à forcer un lissage plus propre que ce que fait GD2 en natif. Perso je n'utilise pas d'image_renforcement sur les polices ainsi rendues, mais pourquoi pas.

Pour ce qui est du réglage de la chasse (espace entre les lettres), je n'ai jamais trouvé. On utilise la fonction imageftbbox de PHP:
http://fr3.php.net/manual/en/function.imageftbbox.php
laquelle contient éventuellement des réglages dans «extrainfo». Sauf que je ne trouve nulle part de documentation pour ce extrainfo. Peut-être y a-t-il là-dedans des choses sympa pour contrôler le rendu, mais ça n'est pas documenté. Si quelqu'un a une doc sur cette variable, je suis évidemment preneur.

Arnaud

Pour ce qui est du réglage de la chasse (espace entre les lettres), je n'ai jamais trouvé. On utilise la fonction imageftbbox de PHP:
http://fr3.php.net/manual/en/function.imageftbbox.php
laquelle contient éventuellement des réglages dans «extrainfo». Sauf que je ne trouve nulle part de documentation pour ce extrainfo. Peut- être y a-t-il là-dedans des choses sympa pour contrôler le rendu, mais ça n'est pas documenté. Si quelqu'un a une doc sur cette variable, je suis évidemment preneur.

Arnaud

Super, j'ai trouvè quelque chose http://greyworld.net/software/php-gd-freetype2/
et ça semble tres utile.

je vais tester ça.

Renato

Renato Formato ha scritto:

Pour ce qui est du réglage de la chasse (espace entre les lettres), je n'ai jamais trouvé. On utilise la fonction imageftbbox de PHP:
http://fr3.php.net/manual/en/function.imageftbbox.php
laquelle contient éventuellement des réglages dans «extrainfo». Sauf que je ne trouve nulle part de documentation pour ce extrainfo. Peut- être y a-t-il là-dedans des choses sympa pour contrôler le rendu, mais ça n'est pas documenté. Si quelqu'un a une doc sur cette variable, je suis évidemment preneur.

Arnaud

Super, j'ai trouvè quelque chose http://greyworld.net/software/php-gd-freetype2/
et ça semble tres utile.

je vais tester ça.

Renato

Ops, cette parametre a ete ajoute par l'auteur du article, le parametres officielles sont la Short Term Loans | Boutell.co.uk | Borrow £50 - £2500 Instantly

Il y a plus de parametre pour le chasse, mais quand meme il faut comprendre comment utiliser celle qui sont dans la liste

Renato