Wikini

AdaptationDeLaTailleDesFenetresDeCode

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-98-80-143-34.compute-1.amazonaws.com

Problème

WikiNi dimensionne par défaut la taille des fenêtres de code à 400px. Cette dimension est souvent trop importante et plutôt malvenue lorsqu'il faut afficher à peine quelques lignes de code...

Solution 1

La propriété CSS2 "max-height" permet de fixer une hauteur maximum mais elle ne fonctionne pas sous InternetExplorer.

Je propose donc une petite astuce permettant d'obtenir cette fonctionnalité sous MoZilla, tout en conservant l'usage classique dans InternetExplorer.
Il suffit d'ajouter à la feuille de style wakka.css :
html>body .code { width: 99%; height: auto; max-height: 400px; }

Ce code, parfaitement conforme à la norme CSS, est correctement interprété par MoZilla mais n'est pas interprété du tout par InternetExplorer.
-- CharlesNepote

Solution 2

Jai trouvé un script js qui ajoute la fonctionalité max-height à ie http://www.doxdesk.com/software/js/minmax.html c'est une solution (pas top) pour supporter ie en atendant une hypothétique màj d'ie reglant le pb
-- FiFi?

Solution 3

Que pensez-vous de faire un troisieme fichier de style spécifique pour les options dépendant du navigateur ? Il pourrait se nommer "special_".$browser.".css" par exemple et serait chargé en troisieme. Ca empêcherait completement le cache des pages en revanche... Personnellement je préfere me concentrer sur le cache des pages que sur le support de MS-IE ! ;-) -- ProgFou

Solution actuelle de WackoWiki R3

La solution retenue est la suivante :

Avantages :
-- BenoitAudouard 20031218

Inconvénients :

Solution de WikiNi 0.1.1-0.3

Par comparaison, WikiNi utilise le code suivant :
<div class="code"><code>xxxxxxxxxxxxxx</code></div>
et
.code { background: #FFFFFF; border: solid #888888 2px; font-family: 'Courier New', Courier; color: black; font-size: 10pt; width: 100%; height: 400px; overflow: scroll; padding: 3px; }

Avantages :

Inconvénients :

Discussions

Pour la solution de WikiNi, l'enchainement des balises <div><code> n'est en effet pas très satisfaisant. La solution WackoWiki, qui consiste à fixer la hauteur dans le code PHP, me semble moins intéressante. Il est peut-être possible de mixer les deux solutions.
-- CharlesNepote

[Concernant la solution de WackoWiki] bon, il leur manque quand même une option noscroll pour afficher un cadre de la longueur du texte -- BenoitAudouard
Peut-être regarder la fonction include de WikiNi ? -- BenoitAudouard

Identification de quelques utilisations

Afin de constituer les besoins "par l'exemple", voici quelques URL :
http://www.mirabellug.org/docs/docbook/x146.html sans aller jusqu'à ce niveau de détail pour WikiNi, cette page présente deux besoins élégamment :

Deux exemples utilisant WikiNi "brut de fonderie" :
http://eagle-usb.ath.cx/eagledev/wakka.php?wiki=LocalizationScriptsES la fenêtre de code apparaît comme une masse dans la page
http://eagle-usb.ath.cx/eagledev/wakka.php?wiki=LocalizationScriptsIt l'utilisation de la double-quote + <pre> permet l'affichage in-extenso du code, qui ne se distingue plus du reste de la page mais garde son indentation "mode terminal"
[root@localhost user] dhclient eth1
Internet Software Consortium DHCP Client V3.0pl2
Copyright 1995-2001 Internet Software Consortium.
All rights reserved.
For info, please visit http://www.isc.org/products/DHCP

Listening on LPF/eth1/xx :xx :xx :xx :xx :xx
Sending on LPF/eth1/xx :xx :xx :xx :xx :xx
Sending on Socket/fallback
DHCPREQUEST on eth1 to 255.255.255.255 port 67
DHCPACK from 81.57.202.254
bound to yyy.yyy.yyy.yyy -- renewal in 256809 seconds.
[root@localhost user]



Solution de JeanMorlet

J'ai implémenté la solution suivante dans mon WikiNi (0.4.1rc) :
dans le css : .code { background: #FFFFFF; border: solid #888888 2px; font-family: 'Courier New', Courier; color: black; font-size: 10pt; padding: 3px; overflow: auto; height: auto; width: auto; max-height: 400px;}
dans wakka.php :
// $output = "<div class=\"code\">";
 // $output .= "</div>";

et il faut ramener les <div class="code"> et </div> respectivement en début et fin des fichiers code.php et coloration_php.php sous formatters.
Résultat : hauteur auto-adaptative avec un maximum donnés. Barre de scroll apparaissant au besoin.
commentaire ? --JeanMorlet (exemple ici supprimé pour le moment. --JeanMorlet)

Le problème de cette solution, c'est qu'IE (au moins 5.0) affiche des fenêtres longues sans ascenseur. -- CharlesNepote

Solution 4

Je crois bien que j'ai trouvé la solution élégante 100% compatible avec Wikini et IE/Mozilla and co. :-). Au départ je pensais modifier le Php pour ajouter une classe lorsque le nombre de lignes du PRE atteint un nombre de lignes donné. Mais je me suis dit qu'il devait bien exister une magouille CSS pour faire cela : bingo ! Ca se trouve sur http://www.svendtofte.com/code/max_width_in_ie/ et ça utilise une particularité CSS des IE. J'ai fait un petit test, il suffit de mettre ce code CSS pour le DIV de classe code :

div.code{
 }

Seuls les IE comprennent le height, les autres l'ignorent. Les curieux n'auront qu'à aller voir comment ça marche sur le site cité plus haut. J'ai testé avec Firefox 1.0PR et les IE 5.x/6.0, y'a plus qu'à !
Et signalez si ça ne va pas comme attendu...
-- JmPhilippe - 08/11/2004


Je viens de tester cette solution et elle marche plutôt bien. J'ai cependant dû ajouter dans ma feuille de style une modification concernant les pre, sinon il y a un espace avant (sous firefox) ou après (sous IE6) le bloc <pre>...</pre> à l'intérieur du div à cause des marges...
Cependant il faudrait tout de même examiner s'il n'y a pas de meilleure solution. En effet ce n'est pas le height qui pose problème (celui-ci étant ) mais l'utilisation de expression. Le validateur me dit même que c'est la partie "this.scrollHeight > 400? "400px" : "auto"" qui pose problème. Je viens de faire une recherche et il semblerait que expression ait été introduit dans les feuilles de style avec IE5.0 sans aucun souci du respect des standards (peut-être se sont-ils dit que cela permettrait aux webmestres de contourner les nombreux bugs d'IE ?). Il est à noter que la solution est assez mauvaise en fait puisqu'elle provoque apparemment un calcul de la valeur à chaque fin d'exécution d'un thread JS. Plus de détails ici où l'on propose entre-autres une solution qui évite ce recalcul, mais en contre partie provoque une importante utilisation du JS...
Personnellement je pense qu'il est préférable de conserver la validité w3c et d'éviter le JS, et tant pis si sous IE c'est une boite qui s'allonge indéfiniment avec le texte (cas où il n'y a pas de propriété height) -- LordFarquaad

Pour moi cette solution n'est pas envisageable du fait 1. qu'elle ne respecte pas la norme CSS ; 2. qu'il s'agit d'une bidouille dont rien ne nous garanti la pérennité. -- CharlesNepote

Ce qui me gêne le plus, c'est que c'est du JavaScript (certes déguisé), et donc ça ne marchera pas s'il est désactivé. De toute façon, il me semble qu'on n'a pas trop le choix côté navigateur : soit il supporte max-height et ça roule tout seul, soit il faut ajouter un script qui remplace max-height et donc il faut que l'utilisateur autorise les scripts et que le script ne s'exécute que quand il y en a besoin (donc un truc du genre solution 6 transféré en pur JavaScript, peut-être équivalent à une solution 2 allégée ?). La seule autre possibilité que je vois serait que ce soit Php qui fasse un max-height en insérant une classique propriété height dans le Html suivant le nombre de lignes du code... -- JmPhilippe

Solution 5

Voici encore une solution qui provoque, sous IE6, des boites qui s'allongent mais sous Firefox et IE < 6 des boites dont la taille devrait dépendre du contenu (à vérifier pour IE < 6)

Les version d'IE < 6 (ainsi que, certains navigateurs comme opera5) ne vont pas lire correctioment le premier voice-family et croire que la classe s'arrête au niveau du "}". Dès lors il vont interpréter le .code qui suit (... et ça marchera sous IE5 uniquement) alors que les autres navigateurs vont considérer que cela fait partie de la chaine qui s'arrête à la fin de la ligne.
Tous les navigateurs sauf IE (toutes versions) vont interpréter le div > .code et rétablir la valeur auto de height, du coup ils vont dimensionner à la taille du contenu jusqu'à max-height.
C'est le seul moyen qe j'ai trouvé pour faire interprêter du css "valide" uniquement pour IE tout en gardant la feuille de style valide. Consultez tout de même why not use css hacks (le cas présent serait repris dans les dead browsers puisqu'il ne concerne que les navigateurs ne supportant pas les guillemets échappés) et why not use JS in css.
-- LordFarquaad

Je ne pense pas que le recalcul à chaque thread JS soit réellement un problème dans un Wiki qui en général ne repose pas sur du code JS. Personnellement je n'ai remarqué aucune différence avant et après du point de vue réactivité du navigateur (et mon PC a 3 ans...). -- JmPhilippe

Solution 6

Si la validation CSS de la solution 4 est vraiment un problème, on peut aussi le contourner avec un commentaire conditionnel dans le Html :

<!-- Internet Explorer failures -->
<!--[if lt IE 7]>
<style type="text/css" media="screen" />
.code {
 }
</style>
<![endif]-->

L'inconvénient est que la dimension maxi pour les IE ne se trouve plus dans le fichier CSS mais dans l'entête Html, donc un fichier Php... A moins de créer une variable Php spécifique pour ce problème, qui gèrerait aussi le max-height, mais ça commence à devenir plus compliqué.
NB: Effectivement les CSS standards n'autorisent pas à exécuter du JS à l'intérieur du CSS ! Déjà qu'une page web mêlant Html, CSS et JS ça devient complexe à déboguer, alors s'il y a du JS dans les CSS, des CSS dans le JS, du Html dans le JS et du Html dans le CSS !!! Il n'y a vraiment que MS pour y penser ! -- JmPhilippe

Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]
2013-03-10 04:02:44 :: Propriétaire : WikiAdmin :: Rétro-liens :: Cartographie :: Recherche :
XHTML 1.0 valide ? :: CSS valide ? :: -- Fonctionne avec WikiNi 0.5.0 (interwiki)