MathML et WebKit

Philippe49Philippe49 Membre
avril 2010 modifié dans API AppKit #1
Réponse partielle :
MathML peut se traiter par une feuille de style, confère le stress-test et le dernier article du W3C à  ce sujet que j'ai pu trouver.

Quelques bémols qui sont quasiment des accidents :
  • La feuille de style utilisée dans le Lykt-Info n'est pas celle du W3C
  • Celle du W3C ne marche pas sur Safari, ni Firefox, Ni Opera sur Mac
  • La feuille de style utilisée dans le Lykt-Info, visible sur cette page, marche mal quand on met en place la page Web en local (en rappatriant le site)


Question 1 : Pourtant ces feuilles de style ne contiennent que des instructions banales ?

Question 2 : J'arrive à  reproduire sur une WebView mais seulement en utilisant une page dans les ressources et loadRequest: . Comment faire fonctionner loadHTMLString: baseURL: , sachant que la page contient une ligne faisant référence à  la feuille de style.


[code]
NSString * path=[[NSBundle mainBundle] pathForResource:@mozilla ofType:@css];
NSString * essai=[NSString stringWithString:
@<?xml version=\1.0\" encoding=\"utf-8\"?>"
"<?xml-stylesheet type=\"text/css\" href=\"mozilla.css\"?>"
....
];
webView mainFrame] loadHTMLString:essai baseURL:nil]; <br />[/code]<br /><br /><br />[EDIT] <br />Pareil avec <br /> [[webView mainFrame] loadHTMLString:essai baseURL:[NSURL URLWithString:[path stringByDeletingLastPathComponent];

[EDIT]
idem avec
NSString * resourcePath=[[NSBundle mainBundle] resourcePath];
NSURL * baseURL=[NSURL fileURLWithPath:resourcePath];
[[webView mainFrame] loadHTMLString:essai baseURL:baseURL];

Réponses

  • Philippe49Philippe49 Membre
    19:47 modifié #2
    Je ne comprends pas comment fonctionne ce style

    <br />background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABgElEQVR42q2TMUjDQBhGG5EQkCq4SB20WVwcXYTs4lCk0K5CZ%2Bno4pghmbJk7eIgZCsE2kFC03RVRHEoQUERClaxiEVpq2DP78IVoqXhJPnhQej9eTSPJEUISfGAEbj2OETz4AC0wWosIWYP%2BIAwXDD3byFmC3hUkslkepVK5dw0zWsmPeIWYtbACfhOp9NDTdPOPM8btVotQikWi7c4%2BwLbkULMItDBQBTFcblcvnRdt89EDlBAu9lsDmRZ7mPvDizNeLog%2BLMgCKRQKPiO43SZ6ArsTBZxvQk%2B6vV6R5Ikeqc1S0gURenUarV7JnoA%2B2AqPn4r0R3DMG5Yz9KU0LIsn4lewSGQoqLj%2FJju5%2FP5RwjfwcYvIQ6HwADLPC8u9hZoTzQeZrPZTwgvgBgWrvN%2BLX972rbdZT0N7i8lQhr01HW9A%2BEY7MYShnvmcrk3CJ%2FASlxh0LPRaIzQk%2F7L01jCcM9qtdoLesYVhnuqqvqSiDDcM0lh0DMx4aRnokLKD0gmJM1mPGUFAAAAAElFTkSuQmCC&quot;)<br />
    


    Il y a une référence à  image/png , qui se trouve effectivement sur le site , ou le data c'est ce qui suit ?
  • AliGatorAliGator Membre, Modérateur
    avril 2010 modifié #3
    Une URL de type "data:MIMETYPE,DATA" permet d'encapsuler directement des données, c'est une pseudo-URL-scheme en fait.
    C'est ce qu'utilise entre autres AcidTest pour générer des morceaux de l'image du smiley.

    Ici "MIMETYPE" est image/png;base64, donc les données "iVBORw0Kgo..." sont en fait l'encodage base64 des données d'une image PNG (copies ces données à  partir de "iVBOR..." jusqu'à  la fin de la pseudo-URL, colle-les dans un fichier, passes-le à  la moulinette du décodage base64, et sauves le résultat décodé dans un fichier PNG, tu auras ton image)


    Donc justement, ça permet en utilisant ça de rendre le CSS auto-suffisant, ça évite d'avoir à  te trimbaler les images en plus du CSS : si tu veux utiliser cette CSS pour faire le rendu de tes formules MathML, tu n'as besoin que de ce CSS, tu n'as pas à  copier le CSS d'un côté, les images qu'il utiliserait de l'autre, et t'assurer que tu as bien mis ces images dans le bon répertoire (respecter les chemins relatifs qui seraient utilisés dans le CSS), ... puisque là  les images sont encapsulées dans le CSS encodées directement en dur dedans ;)
  • Philippe49Philippe49 Membre
    19:47 modifié #4
    dans 1271665992:

    Une URL de type "data:MIMETYPE,DATA" permet d'encapsuler directement des données, c'est une pseudo-URL-scheme en fait.

    Merci pour l'info, reçu 5/5. C'est le mot url( ..) qui me perturbait.
  • AliGatorAliGator Membre, Modérateur
    19:47 modifié #5
  • Philippe49Philippe49 Membre
    19:47 modifié #6
    Bon, il me semble comprendre mon problème.

    • La méthode [  loadHTMLString: baseURL: ] n'interprète pas le CSS, elle prend en brut la page HTML et en fait un rendu graphique pour la WebFrameView?
    • La méthode  [ loadRequest: ]  met en route le serveur , qui lui fait l'interprétation du CSS pour fournir un nouveau HTML, dont le rendu graphique est ensuite transmis à  la WebFrameView

    Am I right ?


    Bon, maintenant ma question est "Est-il possible de mettre en route le serveur à  partir de mon programme, i.e sans créer un fichier en dur ?" soit "Le traitement des feuilles de style css est-il prévu dans un des framework Cocoa, ou une librairie ad-hoc ?"
    If anyone ...
  • Philippe49Philippe49 Membre
    19:47 modifié #7
    Evidemment, il y a bien la solution d'inclure la feuille de style dans le HTML.  :D  :o
  • AliGatorAliGator Membre, Modérateur
    19:47 modifié #8
    Heu j'ai déjà  utilisé du loadHTMLString:baseURL: avec une chaà®ne contenant du HTML qui fait référence justement à  du CSS externe, je n'ai pas eu de soucis.
    Le tout étant bien évidemment de fournir la bonne baseURL pour qu'il puisse résoudre correctement les liens relatifs vers le CSS quand il évalue le HTML.
  • Philippe49Philippe49 Membre
    19:47 modifié #9
    dans 1271755703:

    Heu j'ai déjà  utilisé du loadHTMLString:baseURL: avec une chaà®ne contenant du HTML qui fait référence justement à  du CSS externe, je n'ai pas eu de soucis.
    Le tout étant bien évidemment de fournir la bonne baseURL pour qu'il puisse résoudre correctement les liens relatifs vers le CSS quand il évalue le HTML.


    En local, la baseURL c'est bien le path du répertoire, traduit par fileURLWithPath: ,  dans lequel se trouve le fichier .css ?
    Dès lors le href est-il obtenu par : <?xml-stylesheet type=\"text/css\" href="mozilla.css"?>
    et sans doute par <?xml-stylesheet type=\"text/css\" href="./mozilla.css"?> 


    Quand à  ce que je disais au post précédent au sujet du prétraitement , moi cela me semble bizarre aussi parce que on ne voit pas pourquoi cette méthode demanderait la baseURL si elle ne sait pas l'utiliser pour résoudre les liens relatifs ?
  • 19:47 modifié #10
    Si ton CSS se trouve dans ton bundle, et donc dans le dossier resources, il faut simplement utiliser un baseURL: égal à  [NSURL fileURLWithPath:NSBundle mainBundle] resourcesPath; et donc tu pourras simplement utiliser <?xml-stylesheet type=\"text/css\" href="mozilla.css"?>
  • 0x5A0x5A Membre
    avril 2010 modifié #11
    dans 1271664012:
    La feuille de style utilisée dans le Lykt-Info, visible sur cette page, marche mal quand on met en place la page Web en local (en rappatriant le site)


    Salut,

    Je pense que ça vient du fait que ton HTMLString n'a pas le bon MIME-type, il faut qu'il soit "application/xml" et pas "text/html" (je pense que c'est ça par défaut). J'ai fait comme ça et tout s'affiche bien :

    //NSData* data = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@&quot;index&quot; ofType:@&quot;mml&quot;]];<br />//NSData* data = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@&quot;index&quot; ofType:@&quot;xhtml&quot;]];<br />NSData* data = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@&quot;stress&quot; ofType:@&quot;xhtml&quot;]];<br />NSURL* baseUrl = [NSURL fileURLWithPath:[[NSBundle mainBundle] resourcePath]];<br /><br />[[webView mainFrame] loadData:data MIMEType:@&quot;application/xml&quot; textEncodingName:@&quot;utf-8&quot; baseURL:baseUrl];
    


    J'ai donc 4 ressources :
    • index.mml : un fichier XML qui ne peut contenir qu'une seul balise math
    • index.xhtml : le fichier index.mml mais integré dans du XHTML (plusieurs balise math possible)
    • stress.xhtml : la page de Lykt-Info mais sans le CSS mis dans les balises style
    • style.css : le CSS complet de Lykt-Info (mini/safari.css + ce qu'il y avait dans les balises style) minifié avec YUI :P


    index.mml et index.xhtml sont juste des pages tests ... J'ai exactement la même représentation que Lykt-Info tant que je ne change pas le DOCTYPE. Si je le change (en mettant MathML 2.0), la seule différence que j'ai remarqué c'est que les équations n'ont plus de numéro : (X) et l'équation (4) est plus espacée/alignée ...

    screenshot20100423at450.png



    Voila, je vais aller tester avec le simulateur iPhone mais je pense que ça devrait marcher aussi. Voila les 4 fichiers : http://www.mediafire.com/?nijyty3ny2w

    En espérant que ce soit mieux que ce que t'obtenais :D.
  • Philippe49Philippe49 Membre
    19:47 modifié #12
    Merci 90 pour ton apport  , je vais creuser de ce côté là .

Connectez-vous ou Inscrivez-vous pour répondre.