Longueur d'une chaine en pixel

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Lilive
Salamandre
Messages : 39
Inscription : 02 mars 2006, 09:50

Longueur d'une chaine en pixel

Message par Lilive »

Bonjour,
Je suis à la recherche d'une fonction PHP qui me permettrait de connaître la taille graphique d'une chaîne affichée à l'écran (donc en fonction de la police et de la taille des caractères). Ceci pour pouvoir positionner précisément un bloc CSS après un texte.
A défaut, peut-on connaître la position courante en pixel dans la page HTML (le pixel en bas à droite à la fin d'un texte ou d'un bloc) ?
Je sais faire ce genre de choses en PHP mais en production de PDF, pas en sortie HTML...

Merci de votre aide.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)
Lilive
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Il n'y a aucune chance que tu puisses le faire en PHP puisque c'est un langage côté serveur et que l'affichage se fait côté client.

En JavaScript tu devrais pouvoir utiliser getComputedSize(). Mais en fait je pense qu'il suffit de faire flotter ton bloc de texte et le bloc suivant se mettra gentiment après.
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪
Lilive
Salamandre
Messages : 39
Inscription : 02 mars 2006, 09:50

Message par Lilive »

Le problème est que j'ai besoin de sa position x et y dans la fenêtre du navigateur... En fait : j'ai deux listes issues d'une base de données sur deux colonnes et je veux positionner un bloc juste en dessous de la colonne la plus basse... et vue que la taille de chaque colonne varie en fonction de ce qui est dans la base données, ce n'est pas toujours la même qui est la plus longue... d'où le besoin de "situer" à l'écran la fin de la colonne la plus longue (et ce n'est pas forcément celle qui contient le plus d'enregistrements) pour positionner mon bloc suivant...
Je sais, je suis assez compliqué, mais si je trouve une solution à ce problème, le résultat vaudra le coût !
Le javascript peut-il me renvoyer la position finale d'un bloc (je sais qu'on peut obtenir celle du pointeur de la souris, mais ça m'intéresse peu dans le cas présent...) ?
Mon dernier recours sera de produire dynamiquement cette page en PDF et de l'afficher telle quelle dans le navigateur, mais j'aimerais éviter cette extrémité (temps de chargement du plugin, etc.)...
Si quelqu'un a une piste je suis preneur !

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)
Lilive
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Oui, je m'étais juste trompé dans le nom de la fonction, c'est getComputedStyle.

Un script complet :

Code : Tout sélectionner

function getStyle (a_element, a_cssproperty) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(a_element,null).getPropertyValue(a_cssproperty);
    } else if (a_element.currentStyle) {
        while (a_cssproperty.indexOf('-') != -1) {
            var letter = a_cssproperty.charAt(a_cssproperty.indexOf('-')+1);
            a_cssproperty = a_cssproperty.replace(/-\S{1}/,letter.toUpperCase());
        }
        return eval('a_element.currentStyle.' + a_cssproperty);
    }
    return "";
}
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪
Lilive
Salamandre
Messages : 39
Inscription : 02 mars 2006, 09:50

Message par Lilive »

Super, j'essaye ça de suite et je te tiens au courant...
J'avais effectivement fait une recherche rapide dans Google avec le nom de la fonction que tu avais donné dans ta première réponse et ça n'avait rien donné.
Merci pour ce bout de code, je le teste...


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)
Lilive
Lilive
Salamandre
Messages : 39
Inscription : 02 mars 2006, 09:50

Message par Lilive »

Bon, j'ai été un peu lâche... J'ai contourné le problème. :?

Mon soucis était de calculer la hauteur du texte dans une colonne (une liste de noms). Je pouvais déterminer la hauteur l'une ligne et calculer le nombre de lignes, le problème surgissait quand un nom long se retrouvait sur deux lignes... comment déterminer qu'il y a un retour chariot pour compter une ligne supplémentaire ?

Si le javascript permet effectivement de récupérer la position, il demeure que ça ne passera pas si le javascript est désactivé... (et donc mise en page minable) :(

J'ai donc opté pour une solution radicale : changer ma mise en page pour m'assurer qu'il n'y ait aucun risque de retour chariot sur les noms longs... Ainsi je connais précisément le nombre de lignes occupées dans ma colonne et je peux positionner ainsi la colonne suivante.

Encore merci pour l'aide malgré tout. :wink:
Dernière modification par Lilive le 22 févr. 2007, 23:37, modifié 1 fois.
Lilive
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Ce n'est pas de la lâcheté, c'est de la sagesse :)
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité