Post to Facebook
Tweet about this
Share at LinkedIn
Invite participants
Reference this page
Bernard - Pour faire ceci en CSS, le principe est le suivant :
- faire générer une balise comme d'habitude
- par CSS, masquer le texte affiché par la balise
- par CSS encore, faire afficher une image de fond qui contient le motif souhaité
Ainsi, les navigateurs ne comprenant rien à CSS ont un texte affiché, tandis que les navigateurs avancés ont le rendu final souhaité.
Exemple :
Balise générée
<span class="expired flag"><span> (expiré) </span> </span>L'affichage brut est le texte ' (expiré) '
Règles CSS pour afficher une image à la place :
.expired { /* display a neat image to flag expired pages */
padding-right: 16px;
margin-right: 2px;
background: url("icons/expired.gif") right no-repeat;
}
.expired span { /* mask default text */
display: none;
}
La manipulation est double. Il faut donc avoir une classe ou un identifiant CSS sur la balise cible, et il faut aussi encadrer le texte à masquer par un
<span>...</span>.YACS identifie de lui-même les boîtes de navigation, etc, et il est donc possible de les repérer assea facilement.
Pour l'ajout du
<span>...</span>, nous pourrions l'intégrer en standard dans tous les titres de boîte.
Agnès - Bernard : Merci bÔcoup pour ces précieuses infos. Je continue mon boulot et je vous tiens tous au courant.
PS : on va tenter de générer des images avec un script php qui utilise les librairies gd pour générer l'image, et les librairies ttf pour prendre en charge notre police choisie. C'est un truc qui à l'air drôlement intéressant.
En gros, on tape le texte choisi, on fait tourner la moulinette, et ça renvoie une image de ce texte dans la bonne police. On automatise tout ça et après y'a plus qu'à le mettre au bon endroit en gérant l'affichage d'après tes infos.
Si ça fonctionne bien (ben ça devrait, non ?), ce serait un très bon plan pour la gestion des chartes graphiques (enfin, au moins pour ceux qui utilisent des navigateurs avancés).
donc on bidouille et on rappelle.
Heu... re PS : à ton avis, est-ce que ça aurait des conséquences sur l'accessibilité ?
Agnès
Il n'y a pas de problème, que des solutions.
Agnès
Il n'y a pas de problèmes, que des solutions.
Bernard - Agnès: images et accessibilité ne font pas bon ménage habituellement. Au minimum, vérifie que l'attribut de l'image
alt contient un texte valide en remplacement de l'image. Tof - Bonjour, premier post de Tof, supporté chaque jour par Agnès... Donc, après tests et auto-formation sur gd, j'ai mis au point une fonction qui reçoit en parametres une image, un texte à y inclure, le nom d'une police ttf, sa taille, sa couleur, son positionnement, l'angle d'écriture, et qui renvoie l'image générée correspondante. A très bientôt.
Tof Téléchargez le fichier
Christophe Battarel - Société altairis -
Agnès - Bernard : je tente de faire un article au sujet de ce fil, mais je suis dans l'impossibilité de relater ton post puisque je ne peut pas afficher les span avec le formattage : ils disparaissent dès que j'enregistre.
J'ai essayé d'entourer le texte avec diverses balises de codes yacs, mais rien n'y fait.
Quel astuce utiliser pour que les codes dans le texte ne disparaissent pas ?
Agnès
Il n'y a pas de problème, que des solutions.
Agnès
Il n'y a pas de problèmes, que des solutions.
Agnès - Agnès : Je me réponds à moi-même : j'ai squizé en remplaçant les balises < et > par ( et ).
Mais je maintiens ma question : y'at'il moyen via les codes yacs de faire ressortir les bonnes balises sans qu'elles soient traitées ? Une balise qui dirait : ceci est un exemple... par exemple.
Agnès
Il n'y a pas de problème, que des solutions.
Agnès
Il n'y a pas de problèmes, que des solutions.
GnapZ - Agnès : La réponse est dans ta question. Jusqu'à maintenant nous ne pouvions utiliser les "Inférieur à" (le "Supérieur à" fonctionnait). Hors, au vu de ton post, les deux s'affichent très bien. Donc, dans les balises habituelles (Code, Php, etc) on doit pouvoir se servir des
< et >. Bernard a fait des "travaux" dans les codes Yacs et ce problème doit y être réglé aparemment.PS: Merci Bernard !
Tof - GnapZ :
en fait ce sont les balises html qui sont refusées pas les signes < et >.
de mémoire, les balises autorisées sont définies lors de la création de la page dans les options avancées. Bernard confirmera ou infirmera je suppose.
Tof
Christophe Battarel - Société altairis -
Agnès - Tof : J'm'en retourne au début donc : ce que je cherche à faire, c'est des lignes encadrées par des balises qui les mettraient en valeurs pour ce qu'elles sont : un exemple de texte, et pas des codes html à traiter pour qu'ils s'exécutent.
Une balise qui dirait : attention, ceci n'est pas du code html à traiter, mais un exemple de texte à laisser écrit comme il est. Est-ce que ça existe ?
Si je reprends le texte de bernard (piqué sur la vue "source" de cette page), ça donne ça :
(expiré)alors que le texte à afficher c'est ça - sans tenir compte des (et) à la place des [et] :
(span class="expired flag")(span) (expiré) (/span) (/span)J'ai essayé avec code ( avec < et [), php, snippet... : du zoli bleu, pas plus
Agnès
Il n'y a pas de problèmes, que des solutions.
GnapZ - Agnès :
En fait tu voudrais ça ?
Pour les crochets utilisant des balises réelles:
... utilisez les balises [php] et [/php] ... ou [autre chose] ...Pour les extraits HTML et textes encadrés:
span class="expired flag" > span > expiré > /span > /span > (sans les espaces).Pour utiliser du code sans interprétation il faut l'encadrer par les balises :
[escape]...[\/escape] (non documentée).Pour les extrémités de balises HTML, j'utilise un espace après chaque "inférieur/supérieur". Je cherche la cause ...
PS Bernard: Après envoi de ce commentaire, j'ai eu ça:
SELECT member FROM `yacs_members` WHERE (anchor LIKE 'article:1132') ORDER BY member LIMIT 0,50 2013: Lost connection to MySQL server during query
L'envoi est passé quand même. Seul précision, j'ai mis longtemps à préparer puis à envoyer (mais que fait heartbit ?).
Tof - GnapZ :
réponse après tentative d'explication à Agnès (apparemment fructueuse) :
lors du traitement des balises interdites/autorisées, il faudrait ne pas tenir compte de ce qui est mis entre balises
escape ou code et l'afficher comme du texte sans le parser.Bernard ? c'est faisable ? et le diagnostic est il juste ? A+
Tof
Christophe Battarel - Société altairis -
Bernard - GnapZ: le pb n'est pas lié au heartbit, qui règle les communications entre navigateur et serveur, mais à l'accès à la base de données depuis le serveur web. J'ai cru comprendre qu'OVH subissait de plein fouet une attaque de pirate ces temps-çi, faut probablement attendre une météo plus favorable...
Bernard - Tof: Comme l'a indiqué GnapZ, il suffit d'encadrer le texte HTML à afficher par les codes
[escape]...[\/escape], non encore documentés. C'est comme ça que sont réalisées les pages d'aide d'ailleurs. Les codes [code]...[/code] ont un usage différent, et sont utiles pour montrer une ligne de commande par exemple. Agnès - Bernard : j'ai testé sur mon article ici en voulant rajouter un morceau de tes explications qui manquait.
Résultat des courses : la manip que tu as faite en "direct" pour moi a disparue à l'enregistrement, et ce que j'ai rajouté entre les balise escape aussi.
Je n'y comprends rien de chez rien. un tantinet désespérant ça est, dire je le dois !
Que faire ?
Je travaille mon karma, pour que la force soit avec moi ?
Agnès
Il n'y a pas de problème, que des solutions.
Agnès
Il n'y a pas de problèmes, que des solutions.
GnapZ - Agnès : Allons-y doucement.
Chaque fois que tu souhaites utiliser des crochets et qu'ils ne soient jamais interprétés comme des codes Yacs, il faut encadrer ces crochets par la balise
[escape]...[\/escape].Chaque fois que tu souhaites utiliser le symbole inférieur immédiatement suivi d'une balise HTML ... ben tu peux pas :D . Par contre, le symbole inférieur marche bien: >. Donc en ttendant qu'on trouve pourquoi, je te conseille de donner des exemples avec un espace et de signaler son retrait à la fin. Ex: Utilisez la balise < html > (sans les espaces) ...
PS: pour la modif de Bernard qui t'affichait ce symbole proprement, c'est une manip directement dans la base de données. Dès que tu ré-enregistres l'article depuis Yacs, tout est perdu.
Tof: La balise "Escape" fait exactement ce que tu indiques: elle ne parse rien, c'est sa raison d'être. L'unique problème est l'interprétation HTML du symbole inférieur dès lors qu'il est suivi par autre chose qu'un espace.
Agnès - GnapZ : J'ai enclenché le mode Diesel, et ça est, le moteur est chaud : j'ai imprimé la manip. Merci.
Corrigé dans l'article.
Conclusion : Bernard, merci du coup de main, mais finalement, comme je suis un peu à la Fernand, à corriger, modifier, etc... mes écrits, ben tu l'as fait pour rien. Désolée.
Mais si on trouve un jour le moyen de régler ce pb, j'achète !
Agnès
Il n'y a pas de problème, que des solutions.
Agnès
Il n'y a pas de problèmes, que des solutions.
Bernard - GnapZ: Pour être tout à fait précis, je n'avais rien fait dans la base de données, j'avais simplement tapé l'entité HTML pour le symbole inférieur, qui est, comme chacun sait
<. Reste que ceci est retransformé par YACS en < lors de l'enregistrement, et que ça pose problème à l'édition suivante... GnapZ - Bernard : Oups, mauvaise interprétation. Mais alors (j'ai tenté aussi & l t ; sans succès (RRHHAAA, j'arrive même pas à le reproduire ici comme toi !)) ... comment as-tu fait pour mettre ce satané symbole dans l'article d'Agnès immédiatement suivi d'une commande HTML ? Hein, comment ?
J'ai déjà fait plein d'essais avec
[escape]...[\/escape], avec les codes &, les abstractions \, rien n'y fait ! J'ai passé pas mal de temps dans les scripts ... mais pas assez apparemment ! Peut-être une histoire de droit associé (pour le code HTML) ?
