Discussion :

[LEK]

Salut, je travaille sous FF, j'ai besoin de rendre le texte d'une page web invisible : c'est à dire que lorsque dans un div je dispose d'une zone de texte je voudrais que l'espacement du texte soit gardé mais que celui-ci ne soit pas visible...
De là des solutions du type : madiv.style.visibility = 'hidden' ou madiv.style.display = 'none' ne conviennent pas pour mon cas..
Auriez-vous une idée pour parvenir au résultat escompté?
Merci d'avance.

[Auteur]

bonjour,

tu peux donner au texte la même couleur que le fond ? Toutefois, il sera toujours visible si l'utilisateur fait une sélection (ctrl+a par exemple).

Je ne comprends pas pourquoi madiv.style.visibility = 'hidden' ne te convient pas ?

[LEK]

la sélection par l'utilisateur dans mon cas n'est pas un problème : en fait je travaille sur une version embarquée de mozilla dans un prog C++, mon but est d'effectuer un aperçu des pages sans le texte.
Le problème de la visibilité se pose par exemple sur des div de ce type là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id='test0' style='background-image:url(fond.gif);background-repeat:repeat-x
'>ici un texte assez long</div>

Dans la mise en page on a normalement une image qui se répète sous le texte.
J'aimerais avoir l'image de fond avec la largeur adéquate mais sans le texte.
Si je fais test0.style.visibility='hidden', je n'ai plus ni texte, ni image de fond...

[Auteur]

tu peux ajouter un div supplémentaire dans le conteneur :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="test0" style="background-image:url(fond.gif);background-repeat:repeat-x"> 
<div style="visibility:hidden; margin: 0px; padding: 0px;">
ici un texte assez long
</div>
</div>

[LEK]

Merci Auteur,
je n'avais pas pensé à faire cette manip
Maintenant je vais essayer d'effectuer dynamiquement la modif : faire un loop sur tous les noeuds texte du dom et les enfermer dans un div invisible (comme tu l'as fais dans ton exemple).
Connaissez-vous la manière la plus économes en ressources pour le faire ?
Peut être que je peux éviter de multiples boucles (avec éventuellement récursion) pour arriver au résultat?

Merci encore pour ton aide Auteur.

[__CPU__]

Pour info, fait gaff avec le text du même fond que ton fond de page, tu peux etre blacklisté par les moteurs de recherche, c'est considéré comme fraude au référencement.

[Auteur]

Montre nous déjà comment tu crées ta page web. Il ne sera peut-être pas nécessaire de faire une boucle sur tous les noeuds texte pour ajouter ce div :

Si dans ton code tu fais ceci :

• création du div conteneur ;
• définition des propriétés du div conteneur (id, style, etc.) ;
• ajout du texte dans le div ;
• insertion du div dans la page.

Il suffit de reprendre ton code en ajoutant quelques lignes

• création du div conteneur ;
• définition des propriétés du div conteneur (id, style, etc.) ;
  
  • création du div enfant
  • définition des propriétés du div enfant (visibility: hidden)
  • ajout du texte dans le div enfant ;
  • insertion du div enfant dans le div conteneur ;
• insertion du bloc créé dans la page.

[LEK]

En fait, je ne me suis peut être pas expliquer précisément : je ne créé pas de page en particulier, mais je créé une appli qui pilote un navigateur Mozilla/FF, lorsqu'une page est chargé dans celui-ci je désire injecté un code dans le source de la page afin de ne garder que l'aspect de celle-ci mais sans texte apparent.
Je ne possède donc pas de source en particulier je devrai pouvoir prendre n'importe qu'elle page web et jouer un script javascript afin d'en masquer ou ôter le texte sans dénaturer l'aspect graphique de celle-ci.
Je ne diffuse pas sur le web mes pages ainsi modifiées mais je les captures dans un bitmap afin de générer des gabarits/books; dons je n'ai pas de problèmes avec les bots et le référencement.

[marcha]

Salut,

l'idée d'imbriquer un div est tout a fait louable, mais il m'en vient une autre
à l'esprit :-)

Après le rendu de ta page, tu pourrais mesurer la dimension de ton (tes) div
avec clientHeight et clientWidth, puis l'imposer avec les style width et height
et ensuite supprimer le texte.

Aucune idée si ça peut s'appliquer dans ton cas, c'est juste une idée.

[Auteur]

De mon côté, je me suis penché sur la possibilité d'insérer un div invisible. Et je constate que c'est loin d'être évident surtout si la page est déjà construite.

En effet, je ne pense pas que la page web ne soit construite que de div et de texte (à priori).

Je pense qu'il y a sans doute des balises de type "block" (p, form, etc.) et des balises de type "inline" (input, span, a, etc) sans compter la possibilité d'avoir des div inclus les uns dans les autres.

L'insertion de div invisibles sur une page existante ne sera pas une mince affaire : il faudra tenir compte de nombreux cas de figure.




L'idée de Marcha n'est pas mauvaise, mais il pourrait y avoir un souci : la hauteur et la largeur d'un bloc va dépendre du contenu et des dimensions de la fenêtre web. Ce dernier point peut être fixé grâce aux feuilles de style.

[LEK]

Marcha je crois que j'ai pas totalement saisi ta solution
De mon côté j'ai écris un code javascript que j'injecte dans la page après son chargement (un peu comme si je surchargeais le onload) : celui-ci fait une boucle à la recherche des noeuds de type texte et les imbriques dans un div comme tu me l'as si astucieusement proposé Auteur...
Et pour l'instant ça à l'air de marcher! J'ai sélectionné quelques pages plus ou moins complexes en full css (sur Zen Garden) pour voir l'impact sur des gabarit basé sur les blocs (j'avais peur que mes div ne casse le flot : en fait j'ai même plutôt opté pour un span ). Je vous poste mon source dès qu'il est pleinement fixé pour en faire profiter d'autre, (on ne sait jamais) et voir si il est perfectible.
En tous les cas un grand merci pour votre aide

[LEK]

Salut, j'ai fais pas mal de test avec le script suivant et il me semble que j'arrive à mes fins :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script langage="javascript">
var rot = document.body;
parseNodes(rot);
function parseNodes(r) {
 
 
	var ls_elem = [];
 
	for (var i=0;i<r.childNodes.length;i++)
	{
 
 
		if ( r.childNodes[i].nodeType == 3 )
			ls_elem.push( r.childNodes[i]);
		else
			parseNodes(r.childNodes[i]);
 
	}
 
	for (var i=0;i<ls_elem.length;i++)
	{
		x = ls_elem[i];
		tmp2 =  document.createElement('SPAN');
		tmp2.style.visibility = 'hidden';
		tmp2.style.margin = '0px';
		tmp2.style.padding = '0px';
		tmp2.style.color = 'blue';
		var parent = x.parentNode;
		parent.insertBefore(tmp2,x);
		tmp2.appendChild(x);	
	}
 
}
 
</script>

pour ceux que ça intéresse! (fonctionne sur Mozilla - j'ai fais un test avec IE pour voir, mais la mise en page est alors impactée)
J'aimerais aller plus loin en stockant pour chaque noeud texte, sa position absolue, sa police, sa couleur pour pouvoir rajouter cela dynamqieuement (de manière indépendante de la page web originale) sur les captures de gabarit que j'aurais réalisé.
Y aurait-t-il des idées ?

[Auteur]

je n'ai pas testé ton code, mais j'ai quelques remarques :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var rot = document.body;
parseNodes(rot);
function parseNodes(r) {
.....
}

visblement tu exécutes la fonction parseNodes() avant même que la page soit chargée (et donc que son contenu soit instancié), je me demande s'il ne vaut pas mieux attendre le chargement complet de la page puis exécuter parseNodes() sur l'événement onload.

Enuite, j'ai constaté que tu as fait une fonction récursive Je me demande si ça ne risque pas de planter le navigateur pour des gros documents.

[LEK]

Salut Auteur,
en fait comme je l'ai précisé plus haut j'exécute la fonction après le chargement de la page :

De mon côté j'ai écris un code javascript que j'injecte dans la page après son chargement (un peu comme si je surchargeais le onload)

Après pour l'utilisation de la récursivité cela peut effectivement être lourd pour de lourdes pages, j'avoue ne pas avoir fait de test de stress ou bench...
A vrai dire, c'est la seule idée que j'ai eue... Mais je n'ai pas tenté de créer un treewalker ou de filtrer avec xpath... Il y a eut être plus économique et toutes les idées sont les bienvenues!
D'autre part j'avais la necessité d'accéder à tous les noeuds car j'aimerai désormais pouvoir connaitre la police, la taille , la couleur et le positionnement absolu de ces noeuds.

[Auteur]

pour la récursivité, je crois que tu n'as pas le choix


Sinon j'ai pensé à un truc qui peut sembler farfelu : si tu remplaçais les lettres et pourquoi pas les signes de ponctuation du texte (sauf les espaces) par un caractère quelconque (. ou _ ou - ou x) ?
Visuellement ta page sera couverte de . ou de - ou de _ ou de x ce qui pourrait lui donner un aspect étrange mais au moins tu verras la place réelle occupée par le texte à la lettre près


Maintenant si tu veux sauvegarder les propriétés du texte, je pense qu'il te faut récupérer le(s) noeud(s) parent(s) (nodeType=1 - Nœud élément - je crois). Ensuite, tu peux récupérer les attributs avec document.getAttribute() et document.getAttributeNode().
Toutefois, essaye ces fonctions avec des nodeType=3, on ne sait jamais

IE ne reconnait pas ces fonctions , mais comme tu travailles avec FF, cela devrait fonctionner.