[spip-dev] Jeux de transparence remplacent animations de pavés

Salut,

Je viens de jouer avec spip-style pour modifier le comportement de l'animation des boutons: dans les deux barres de navigation principales et les raccourcis, les "animations" de pavés sont remplacées par un jeu de transparence (mozilla et msie). Graphiquement, c'est plus discret (élégant) et ça résoud le problème de retard d'affichage sous MSIE (j'ai encore un retard sur les boutons des Raccourcis, mais moins important qu'avant).

A*

Je viens de corriger le bug inc-filtres qui provoquait l'affichage d'un retour chariot parasite au début des #INTRODUCTION quand le texte d'origine contenait plusieurs paragraphes.

(Rire jaune: c'était lié aux modifs pour est vachement compliant...)

A*

@ Arno* <arno@scarabee.com> :

Je viens de jouer avec spip-style pour modifier le comportement de
l'animation des boutons: dans les deux barres de navigation principales et
les raccourcis, les "animations" de pavés sont remplacées par un jeu de
transparence (mozilla et msie). Graphiquement, c'est plus discret
(élégant) et ça résoud le problème de retard d'affichage sous MSIE (j'ai
encore un retard sur les boutons des Raccourcis, mais moins important
qu'avant).

Oups !! sur Safari il n'y a plus d'effet du tout !

Par ailleurs &#146; apparemment est un code interdit ; l'apostrophe enroulée
officielle est &#8217;
http://www.pemberley.com/janeinfo/latin1.html

Ah mais attention ça c'est l'apostrophe qui clôt un groupe `toto' ; pas
l'apostrophe qui sépare le "l" et le "apostrophe".

Sinon ces trois là son tintéressants, si on veut transformer automatiquement
les quillemets dans "toto" :

&#8220; ? Left Double Quotation Mark (Double Turned Comma Quotation Mark)
&#8221; ? Right Double Quotation Mark (Double Comma Quotation Mark)

-- Fil

Par ailleurs &#146; apparemment est un code interdit ; l'apostrophe enroulée
officielle est &#8217;
http://www.pemberley.com/janeinfo/latin1.html

Ah mais attention ça c'est l'apostrophe qui clôt un groupe `toto' ; pas
l'apostrophe qui sépare le "l" et le "apostrophe".

Sinon ces trois là son tintéressants, si on veut transformer automatiquement
les quillemets dans "toto" :

&#8220; ? Left Double Quotation Mark (Double Turned Comma Quotation Mark)
&#8221; ? Right Double Quotation Mark (Double Comma Quotation Mark)

à tester : dans ecrire/inc_texte.php3, ligne 391-392
    $letexte = str_replace("'", "&#8217;", $letexte);
    $letexte = ereg_replace('"([^" &;]([^"]*[^" &;])?)"', "&#8220;\\1&#8221;", $letexte);

-- Fil

A quoi sert la deuxième ligne?
Il me semble que ça remplace les guillemets "droits" par des guillemets “ouvrants et fermants”?

-> Pourquoi ne pas utiliser les codes HTML standards?
-> En allemand, ce genre de guillemets s'ouvre avec des guillemets "en bas", et celui de droite est "ouvrant". Donc risque de difficulté avec l'allemand (à tester).
-> Si c'est bien ce que je pense (remplacer par les guillemets qui vont bien), alors autant en profiter pour virer les espaces parasites que beaucoup de gens installent _à l'intérieur_ de ce type de guillemets (c'est une horreur).
-> Du coup, si c'est bien ça l'idée, tu peux aussi ajouter la correction des espaces parasites à l'intérieur des parenthèses (autre perversion: y'a plein de gens qui mettent des espaces à l'intérieur des parenthèses).

A*

Donc Safari ne comprend ni les CSS façon MSIE ni façon Mozilla. Le type qui croit que le XHTML et les CSS permettent d'éviter les errements du passé, vaudra lui expliquer :-))

Bon, histoire d'avoir tout de même un effet de survol, j'ajoute un changement de couleur des textes associés.

A*

-> Pourquoi ne pas utiliser les codes HTML standards?

pourquoi pas en effet ; enfin, on s'en fiche un peu...

-> En allemand, ce genre de guillemets s'ouvre avec des guillemets "en
bas", et celui de droite est "ouvrant". Donc risque de difficulté avec
l'allemand (à tester).

Les germanophones précautionneux taperont eux-mêmes les guillemets ouvrants
en bas. Faudrait pas exagérer non plus...

-> Si c'est bien ce que je pense (remplacer par les guillemets qui vont
bien), alors autant en profiter pour virer les espaces parasites que
beaucoup de gens installent _à l'intérieur_ de ce type de guillemets
(c'est une horreur).
-> Du coup, si c'est bien ça l'idée, tu peux aussi ajouter la correction
des espaces parasites à l'intérieur des parenthèses (autre perversion: y'a
plein de gens qui mettent des espaces à l'intérieur des parenthèses).

Oui, pourquoi pas. Mais on devient de plus en plus intrusifs, et ce que je
crains ce sont les modifs qui interviendraient au mauvais endroit.

Tiens, dans le même genre d'idée de nettoyage violent des textes,
l'activation automatique des liens dans propre() serait pas mal. Dans les
forums en tous cas ça aurait du bon. Mais attention à ne pas le faire dans
typo(), sinon on court à la catastrophe...

-- Fil

Donc Safari ne comprend ni les CSS façon MSIE ni façon Mozilla. Le type
qui croit que le XHTML et les CSS permettent d'éviter les errements du
passé, vaudra lui expliquer :-))

Safari est aussi un peu chatouilleux sur la présence du ; final dans les CSS
Mais là, en l'occurrence, ce n'est pas ça qui pose problème.

-- Fil

si je ne me trompe pas, la transparence avec IE est assurée via un filtre
DirectX ? Et la transparence mozilla via un attribut proprio, genre
-moz-opacity (au moins, c'est annoncé comme tel) ?

Enfin rien de tout ça n'est du standard quoi :slight_smile: Je doute que ça marche
dans Opera... (et IE/Mac ?)

à tester : dans ecrire/inc_texte.php3, ligne 391-392
  $letexte = str_replace("'", "&#8217;", $letexte);
  $letexte = ereg_replace('"([^" &;]([^"]*[^" &;])?)"', "&#8220;\\1&#8221;",
$letexte);

J'ai testé et enfin l'apostrophe typographique passe merveilleusement bien
un peu partout, notamment dans le backend de syndication. Les guillemets
typographiques anglais (moins problématiques) passent aussi très bien.

Merci

André

à tester : dans ecrire/inc_texte.php3, ligne 391-392
  $letexte = str_replace("'", "&#8217;", $letexte);
  $letexte = ereg_replace('"([^" &;]([^"]*[^" &;])?)"', "&#8220;\\1&#8221;",
$letexte);

J'ai testé et enfin l'apostrophe typographique passe merveilleusement bien
un peu partout, notamment dans le backend de syndication. Les guillemets
typographiques anglais passent aussi très bien.

Merci

André

Salut,

Correction d'un gros bug: les raccourcis sous MSIE n'étaient pas cliquables. Il semble que cela vienne du fait que le <a href> censé créer le lien ne s'applique pas quand il contient un tableau. Sauf que maintenant, on a deux liens imbriqués; j'ai essayé autrement, c'est une cata.

Putain de saloperie: je viens d'y passer ma soirée à essayer de faire la même chose sans tableau. Bicoz rien qu'avec des <div>, je suppose que ça serait plus propre et plus simple. Sauf que j'ai pas réussi.

Est-ce qu'il existe une vraie bonne documentation pour ces saloperies de CSS (dont, plus ça va, plus je trouve que c'est branlé par des pingouins)?

A*

Ben non, faut exagérer: si un allemand utilise SPIP en mettant des ,guillemets bas" pour ouvrir et des guillemets haut pour fermer, il ne faudrait pas que ses guillemets haut soient remplacés n'importe comment simplement parce qu'il a fait deux mises entre guillemets dans le même texte. Le liste, c'est justement de remplacer aux mauvais endroits.

Est-ce qu'il existe une vraie bonne documentation pour ces saloperies de CSS (dont, plus ça va, plus je trouve que c'est branlé par des pingouins)?

Salut,
je ne reponds pas a la question, mais dans les listes suivantes tu pourra peut etre trouver une reponse ?
http://css.maxdesign.com.au/listamatic/

A+
Benoit

Putain de saloperie: je viens d'y passer ma soirée à essayer de faire la
même chose sans tableau. Bicoz rien qu'avec des <div>, je suppose que ça
serait plus propre et plus simple. Sauf que j'ai pas réussi.

Est-ce qu'il existe une vraie bonne documentation pour ces saloperies de
CSS (dont, plus ça va, plus je trouve que c'est branlé par des pingouins)?

Je présume que ce qui t'intéresse c'est une documentation sur les saloperies
et les "bugs" des divers butineurs et non comment ça devrait marcher. Alors
voici quelques pistes:

http://www.macedition.com/cb/resources/abridgedcsssupport.html

Maintenant, comment se servir de certains bugs pour contrer d'autres bugs.
Complètement fou ces gourous des CSS:

http://www.diveintomark.org/safari/csshacks/

André

Putain de saloperie: je viens d'y passer ma soirée à essayer de faire la
même chose sans tableau. Bicoz rien qu'avec des <div>, je suppose que ça
serait plus propre et plus simple. Sauf que j'ai pas réussi.

Oui, moi aussi je me suis fait chier avant :wink:
J'ai peut-être trouvé la méthode miracle, mais la flemme de tester pour
l'instant :
- un <table><tr><td valign="middle" height="20">
- là-dedans, le texte en <div> avec un margin-left pour laisser la place
à l'icone,
- et l'icone en (attention)
  position: relative; top: 50%; margin-top: -10px; height: 20px;
(oui, oui, une marge négative égale à la moitié de la hauteur)

Pour info, aucun moyen de faire du centrage vertical sans connaître les
valeurs à l'avance et sans utiliser les tables, merci le W3C.

    $letexte = ereg_replace('"([^" &;]([^"]*[^" &;])?)"',
"&#8220;\\1&#8221;", $letexte);

C'est à rejeter impérativement, comment ils font les textes où les
guillemets sont pas imbriqués comme tu l'espères ?

a+

Antoine.

Non, je parle bien de définitions à la con dans la norme, ou de manques graves de la norme.

Voilà mon problème: il me semble impossible d'utiliser vertical-align simplement dans un div. Je viens de me cogner plusieurs heures de forums, c'est dingue ce que les types qui aiment les CSS aiment aussi la branlette.

Exemple:

<div style="height:80px; border: 1px solid black;">
      <div style="border: 1px solid red; vertical-align: bottom;">Hello</div>
</div>

Chose rudimentaire avec les tableaux, visiblement impossible avec les div: aligner ce putain de texte encadré de rouge au plancher du pavé noir. La définition du W3C est particulièrement savoureuse: c'est imbitable. Ca cause d'élément inline, si on commence par là on finit par franchement se marrer, je suis même tombé sur la notion de "blocks anonymes", ce qui est pour le moins charmant. Comparativement, la lecture du TeXbook de Knuth est autrement moins cryptique (et pourtant, je vous assure qu'enquiller les boîtes dans le moteur de TeX, c'est assez rapidement rigolo).

Donc, ma question est simple: comment je fais? Est-ce que c'est posssible? Ou bien est-ce que j'ai bien compris ce que suggère une remarque subtile planquée dans spip-style.php3 - et que j'ai croisé dans des dizaines de forums peuplés d'incapables amateurs de CSS à positionnement absolu: les débiles du W3C n'ont même pas prévu un truc aussi simple que l'alignement vertical de texte dans des boîtes?

A*
(PS. J'y suis depuis 21 heures, il est bientôt 4 heures du mat. Putain d'enculeurs de mouches du W3C: j'aurais plus vite fait de rechercher la dernières conspiration américaine avec les noms et les photos de tous les agents russes retournés par le MI6 que de trouver un simple renseignement au sujet des CSS. C'est vraiment du partage de savoir ou je m'y connais pas, ça. Tiens, il me reste encore dix minutes avant 4 heures, je vais aller demander des renseignements pour recompiler un Debian; ça doit être moins fastidieux que d'aligner deux putains de blocks à la con dans le respect de la compliance de mes deux.)

Ah ben merci, comme ça c'est clair.

C'est quoi l'adresse pour envoyer la bombe?

A*

Je pense que le code suivant devrait faire ce que tu veux. C'est un peu
tordu et pas très "sémantiquement correct", mais ça marche... ;=)

<div style="height: 80px; border: 1px black solid">
  <div style="position: relative; height: 100%">
    <div style="position: absolute; bottom: 0; border: 1px red solid">
        Hello
    </div>
  </div>
</div>

Les tableaux ç'est franchement plus simple.

André

PS - Pour des explications sur cette méthode "tordue", voir:
  -> http://www.stopdesign.com/also/articles/absolute/

Il faut utiliser l'attribut position.

On ne peut positionner un bloc qu'à l'intérieur d'un bloc qui est lui-même
positionné.

Le code suivant fonctionne.

Le div de classe "un" est positionné par rapport à body.

Le div de classe "deux" est postionné par rapport au div de classe "un" dans
lequel il est placé.
Les attributs " bottom" et "right" permettent de le positionner en bas à
droite.

<html>
<head>
<style type="text/css">
div.un {position:absolute;width:150px;height:80px;border:1px solid black;}
div.deux
{position:absolute;right:3px;bottom:2px;width:100;height:40px;border:1px
solid red;text-align:center;}
div#a {top:20px;left:20px;}
div#b {top:20px;left:190px;}
</style>
</head
<body>
<div class="un" id="a">&nbsp;<div class="deux">Un</div></div>
<div class="un" id="b">&nbsp;<div class="deux">Deux</div></div>
</body>
</html>

Maurice Frankel