Accueil > Carnet > Rendu de texte avec Javascript

Après plus de 14 années de présence sur le web, je continue encore aujourd'hui cette incroyable aventure qu'est la découverte du virtuel. Lampe torche, sac à dos, planche de surf et bien sûr ce calepin indispensable pour mémoire.

#362 Rendu de texte avec Javascript - 11 Mars 2009

Design Javascript css

Attention, il est important de considérer que cet article est une archive, son contenu est probablement obsolète!

Typeface

Lorsque l'on réalise un site internet à partir de linux, de mac os x, ou de windows nous avons un problème considérable qui se dégage lorsqu'il faut tester sous les différents environnements : les fonts utilisées dans la présentation n'existent pas systématiquement (voir la liste).

L'autre problème qui s'ajoute à ces fonts inexistantes est leur lissage. ClearType activé ou non, la méthode utilisée par Redmond pour Windows n'est que très peu satisfaisante quant au rendu souhaité.

De ces constats, plusieurs méthodes de remplacement de texte ont alors vu le jour : le remplacement du texte par une image ou encore par un fichier flash. A l'heure actuelle, ce sont les seules transformations viables.

Néanmoins, à ces solutions un projet s'ajoute : typeface de neocracy. Leur réponse à ce problème d'écriture se base sur plusieurs technologies (javascript, vml et canvas) et fonctionne sur tous les navigateurs du marché (IE6 compris).

Via leur site web ou directement depuis le script fourni en PERL, il est possible d'augmenter la liste des fonts disponibles en encodant ses propres écritures.

Les plus de cette méthode

  • Les fonts proposées par défauts sont suffisantes pour compléter la liste d'écritures déjà présentes sous les OS
  • Le lissage est assez réussi
  • Pas besoin d'inclure de fichier flash ou image

Les moins de cette méthode

  • Les fonts personnelles encodées par leur système (perl) ne rend pas toujours bien
  • Impossible de sélectionner le texte pour le copier / coller (possible sous flash)

Commentaires

Marin 11 Mars 2009

Je ne suis toujours pas vraiment convaincu par ces techniques de remplacement de police. Elles prennent de la ressource cpu soit du coté du client soit du server. Perso, je recommande d'encore attendre un peu (beaucoup) que le @font-face soit compris par une majorité de navigateurs...

Reply

Xethorn 11 Mars 2009

@Marin : @font-face ne pourra être utilisée qu'avec des écritures libres de droits. Ce n'est pas le cas de toutes les fonts. Tant que ce problème ne sera pas résolu, il faudra attendre encore avant d'avoir une solution légale et technique.

Aussi, pour les techniques de remplacements de polices, elles permettent de lisser les écritures. Windows a encore énormément de mal (même dans Vista) à leur donner une allure digne de ce nom.

La technique la plus légère pour faire du remplacement reste l'utilisation de l'image. Le texte peut être sélectionné (via l'attribut alt) et il n'y a pas de ralentissement.

Reply

Marin 11 Mars 2009

Il y a des initiatives pour promouvoir les fontes open source cf: http://www.theleagueofmoveabletype.com/

Peut-être que ca poussera les fonderies à employer un autre système de rétribution (par site/domaine avec des limitations same-origin - comme on en a sur FF3.1).

Je recommande de toute façon aux designer de limiter au maximum l'emploi de fontes folkloriques.
A l'image de ce blog, tu peux avoir de bons rendus sans employer de typos spécifiques (mix de sérif et sans-sérif, et changement de corps pour les différents titrages).

Reply

xethorn 11 Mars 2009

@Marin : merci pour le projet, je ne connaissais pas du tout. En tout cas, heureux de voir que d'autres projets (autre que dafont) commencent à apparaître sur la toile et à faire valoir le pouvoir des écritures libres !

Sinon, pour le fait qu'un designer devrait se contenter de fonts standards, je ne suis pas vraiment d'accord. Les fonts ont une richesse et font la richesse d'un design. Prends le cas d'un journal intime, l'écriture n'est ni serif, ni sans-serif, c'est une écriture manuscrite. Elle n'existe pas dans la "norme".

Donc quelque part, je trouverai dommage que nos designs (qui sont déjà très limités à cause des CSS) soient encore plus limités sur la partie choix et possibilités d'écriture. Mais sur ces points, c'est un avis purement personnel.

Reply

Marin 12 Mars 2009

Encore quelques fontes open-sources:
http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding

Avec ça, on n'a plus qu'à attendre IE9 ^^

Reply

Xethorn 12 Mars 2009

Sans oublier la nouvelle mouture de Windows pour avoir un lissage à peu près convenable.

Note : pour faire des liens, il te suffit de mettre ton adresse entre crochets :)

Reply

Thomas Poblete 13 Mars 2009

Mwé, le générateur de TypeFace a quand même ses limites. D'une part, seul les typos TrueType sont autorisées, d'autre part, un certain nombre de polices commerciales sont refusées, à commencer par la MyriadPro :

"Error: This font's vendor has indicated that it is not permissible to embed this font."

De toute façon, ils nous avaient prévenus :

"Please, please, be aware that you must assure for yourself that you have the right to embed any fonts you convert using this utility. Many font vendors specifically prohibit redistribution and embedding of their fonts. This tool attempts to honor those restrictions, but the final responsibility is yours to make sure that you act in compliance with your local copyright and trademark laws."

Pourtant, je suis propriétaire des droits d'utilisation de cette font; dommage.
Ceci étant, ça marche vraiment pas mal et c'est simple à mettre en place. Attention quand même à ne pas trop en abuser; entre le poids du TypeFace.js, celui du maTypo.js et le poids à l'exécution, parfois de simple image sont un choix plus judicieux.

Reply

xethorn 13 Mars 2009

@Thomas : « Pourtant, je suis propriétaire des droits d'utilisation de cette font; dommage. », le droit d'utilisation n'inclut pas systématiquement le droit de reproduction, de redistribution et de commercialisation.

Parfois de simple image sont un choix plus judicieux. : c'est pour le moment le seul système qui fonctionne partout et qui s'avère léger.

Reply

Ajouter un commentaire