Discussion :

[winlogon2]

Bonjour, je m'y connais très peu en JS, mais avant d'enchaîner des tutos jusqu'à trouver ce que je veux, j'aimerais savoir si cela est possible...

Je cherche à obtenir la "latitude" d'un mot dans un texte.
Il ne s'agit pas d'obtenir la "hauteur" d'un texte, par exemple "Ce texte de 7 lignes a une hauteur de 430 pixels", contrairement à ce que j'ai beaucoup vu sur google.
Je cherche plutôt une "latitude", par exemple si j'ai la fable du renard et du corbeau, je voudrais savoir dans un premier temps à quelle hauteur se trouve le mot "plumage". Cette position variera donc selon le browser, si la fenêtre est plus petite, etc.

L'étape suivante est d'utiliser cette hauteur pour aller aligner un autre mot (ex: "helloworld") à cette hauteur dans une seconde colonne à côté de celle de la fable.

Image :

Une piste ? merci !

[SpaceFrog]

Au mieux je pense que l'on doit pouvoir récupérer un pourcentage de position que l'on pourra ensuite rapporter au nombre de lignes et à la largeur de la zone de texte

[SylvainPV]

element.offsetTop
https://developer.mozilla.org/fr/doc...ment.offsetTop

jQuery propose la méthode offset() pour ça

[SpaceFrog]

pour un mot dans un texte ?

[SylvainPV]

On l'encapsule dans un <span> et on en parle plus

[SpaceFrog]

oui j'avais pensé à cette possibilité, mais si le texte ne doit pas être dénaturé il faudra les retirer par la suite...
Je préfère passer par un split et calculer les longueurs avant et après le mot et en déduire sa position par rapport au nombres de lignes, un peu plus compliqué, mais moins intrusif ...

[SylvainPV]

beaucoup plus compliqué tu veux dire Un calcul qui se base sur le type de police, la taille de police, le fait que les caractères ne sont pas forcément à chasse fixe, le text-indent, le padding du conteneur... ça me paraît mission impossible. C'est infiniment plus simple avec un <span> et ça ne dénature pas le texte : à l'écran aucune différence et côté code, on aura qu'à utiliser textContent pour retrouver le texte d'origine.

[SpaceFrog]

non j'ai déja posté un script qui permet de récupérer la largeur d'un texte quelle que soit la taille de la police.
http://www.developpez.net/forums/d26...gueur-d-texte/

[SylvainPV]

Et ton script mesure la taille qu'occupe... un élément On en revient à mon idée

[SpaceFrog]

oui justement si tu connais la taille (largeur) d'un coté, le nombre de lignes de ton texte de l'autre ...
et enfin le % de la positon du mot il est simple d'en deduire ses coordonnées dans le conteneur

il suffit de raisonner en répartition d'un ruban en ligne dans un div ...

[SylvainPV]

Hé non ce n'est pas aussi simple ! le positionnement d'un mot n'est pas proportionnel, il y a plein de propriétés CSS à tenir compte : l'alignement du texte, le word-break, le text-indent... Et toutes les lettres n'ont pas la même largeur, sauf si tu utilises une police à chasse fixe.

[SpaceFrog]

tu n'as a priori pas vu ce que retournait mon script de "largeur' de texte qui se moque de la police à chasse fixe ou non et de sa taille ...

Le seul écart qu'il puisse y avoir c'est en fonction du style de wrap et de justification je te l'accorde, en effet si un texte est justifié ou sans coupure de mots cela peut en effet générer un écart de ligne, donc la répartition du ruban en lignes peut en effet différer selon la justification et les césures de mots.

Dans ce cas en effet la seule solution valable est un encapsulage du mot et une récupération de ses offSets ...

easily done avec JQUERY
http://jsfiddle.net/YvRx6/1/

ou avec unwrap direct
http://jsfiddle.net/YvRx6/2/