+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [RaphaelJS] Taille en em et accessibilité (/showthread.php?tid=6087)
[RaphaelJS] Taille en em et accessibilité - Ter Rowan - 17-04-2012
Bonjour, j'ai démarré des petites choses en RaphaelJS et j'aurais besoin d'aide sur deux sujets.
Mon contexte : le système doit obligatoirement marcher (et être accessible) sur FF11, IE8 et IE6 (et oui....)
J'essaie d'afficher un cercle de couleur, avec éventuellement du texte à l'intérieur :
paper =Raphael( this, 20, 20)
paper.circle(10,10,9).attr({fill: color, title : def})
if (text)
paper.text(10,10, def);
color contient la couleur
def contient systématiquement la description alternative (pour accessibilité) et potentiellement la donnée à afficher
text (booléen) est à true si il faut afficher un texte (en fait une lettre/chiffre)
j'ai deux sujets:
le premier accessibilité :
Avant d'ennuyer mon jaws'men pour lui demander si il "lit" la description alternative (il est chef de projet, pas dv) je voudrais m'assurer que le title est bien pris tant par ie6 et 8 que par ff. Dans firebug le svg généré me donne cela :
<svg height="20" version="1.1" width="20" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.4px; top: -0.68335px;">
<desc>Created with Raphaël 2.1.0</desc>
<defs>
<a title="n">
<circle cx="10" cy="10" r="9" fill="#ff8800" stroke="#000" style="">
</a>
<text style="text-anchor: middle; font: 10px "Arial";" x="10" y="10" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#000000">
<tspan dy="3.583984375">n</tspan>
</text>
</svg>
(dans le cas où text est à false, le noeud text disparait, ce qui est ce que je veux)
L'affichage correspond à ce que je veux mais j'ai des doutes concernant le title : pourquoi ne me l'a t il pas mis dans une balise <title> ? pourquoi ce <a title> ?
Du coup en SVG je ne sais pas si je suis propre, en IE6 je ne sais pas du tout ce qu'il fait.
Quelqu'un peut il me confirmer si tout est ok de ce point de vue ou si il faut changer quelque chose ?
Deuxième point dimensionner l'image en em :
j'aimerais pouvoir modifier la taille du dessin en fonction de la taille des caractères (passer de px en em) Je ne sais pas comment faire. Avez vous une diée ?
Le problème est que mon poste est avec un écran à haute résolution, alors que lorsque je projette, je suis obligé de passer en 800 par 600 qui me fait un effet loupe catastrophique.. Du coup je corrige la faible définition par une taille réduite sous IE 6 (affichage -> taille du texte) je sais c'est très crade mais ce sont mes contraintes.
Est ce que raphael permet de régler ces éléments en em ? pas trouvé dans la doc, il ne positionne que des nombres, sans unités
merci de votre aide (même si pas de rapport avec les jeux sur le coup, quoique si j'arrive à progresser la dedans je m'en servirais peut être)
RE: [RaphaelJS]taille en em et accessibilité - Maks - 17-04-2012
Tu peux tester avec les normes IE7 sous IE9. Pour IE6 il faudrait télécharger IE Tester.
C'est une perte de temps de s'intéresser à IE7 et IE6, qui représentent 3% et 1% respectivement du marché français.
Je suppose que c'est un pré-requis que l'on t'as imposé. Il faudrait leur expliquer le gain de productivité induit en passant moins de temps à mettre à jour les solutions informatiques qu'à essayer de rendre l'application compatible sur ces vieux navigateurs.
J'y connais pas grand chose en SVG mais selon le site officiel c'est ok pour IE6, autant leur faire confiance non ? ^^
Et pendant qu'on y est, point de JS horrible :o
var paper = Raphael(this, 20, 20);
paper.circle(10,10,9).attr({fill: color, title : def});
if (text) {
paper.text(10,10, def);
}
Ton deuxième problème je comprends pas trop. SVG c'est censé être vectoriel. Là où t'as du texte, tu as
Code :
style="text-anchor: middle; font: 10px "Arial";"Il faut que tu changes la valeur 10px.
RE: [RaphaelJS] Taille en em et accessibilité - Ter Rowan - 17-04-2012
merci pour ta réponse
le sujet n'est pas ie6 ou non : dans mon marché, à savoir mon entreprise, ça représente encore 60% de la boîte et 100% de ma propre équipe, donc c'est une contrainte et pas un choix. La migration viendra, mais elle met du temps et je ne peux pas me permettre d'attendre.
Pour IE tester, est ce que ça affiche le dom généré ? de ce que j'ai vu (rapidement) ça ne présente que l'affichage, ce qui ne m'apporterait alors rien. En effet, ce qui m'intéresse, c'est de savoir si le code généré par raphaeljs (que ce soit du svg ou une alternative) est correctement interprétable par des outils type jaws.
Pour l'em, je cherche si raphaeljs, qui génère le code que tu vois, peut être piloté avec cet instrument de mesure d'autant que ce n'est pas la fonte qui m'intéresse mais bien tout le dessin (et je m'attends donc que grâce au vectoriel, si j'augmente/réduis la taille du dessin, la fonte associée au svg évolue aussi)
PS; Au temps pour moi pour le var, par contre éviter les {} pour une seule instruction n'est pas forcément "horrible" ou bien faut abandonner tous les langages sans accolades
RE: [RaphaelJS] Taille en em et accessibilité - Maks - 17-04-2012
Si ta font est en pixels, alors elle va forcément pixelliser lorsque tu vas agrandir
Je ne vois que deux solutions :
- Dans l'API t'as une méthode qui va permettre de spécifier précisément la font
- Ajouter une font SVG : http://damienalexandre.fr/post/2010/07/02/Utiliser-des-fontes-SVG-avec-Raphaeljs
Pour IE Tester, je viens de vérifier ça s'affiche correctement. Il y a moyen de voir le code source. Mais le DOM généré je ne pense pas :/
Si tu as un doute sur ton SVG, tu dois pouvoir le faire valider par le W3C ?
NB : Pour les {} je faisais comme toi avant mais je trouve ça moins lisible. Au moins colle ta condition au traitement plutôt que de l'indenter sans accolade, sinon si tu rajoutes quelques choses en dessous tu vas plus t'y retrouver. Après chacun fais comme il veut pour les conventions ^^
Mais pour l'oublie des "var" et ";" c'est impardonnable :p
RE: [RaphaelJS] Taille en em et accessibilité - niahoo - 17-04-2012
tu peux mettre dans ton code source l'appel a firebug [1], il devrait pouvoir se charger dans IE Tester sur iE 6 (et il criera probablement « tuez-moi ! » mais c'est un autre problème), ce qui te permettrait d'inspecter ton DOM
[1] http://getfirebug.com/firebuglite#Stable => Stable live link
tiens ça veut plus marcher sur mon PC là .. peut être le « Stable local link » fonctionnera mieux ou bien est-ce le channel Stable qui est tout mouru …