28172 sujets

CSS et mise en forme, CSS3

Font-size en pixels et taille du texte affiché

Bonjour,

Je dois faire une énorme bêtise, ou bien il y a quelquechose que je n'ai pas compris, mais je ne comprends pas pourquoi lorsque je définis une taille en pixel dans mes CSS, cette taille ne correspond pas à ce que je vois à l'écran.

voici le petit exemple que j'utilise :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>

    <style type="text/css">
        body {
            font-family: monospace;
            font-size: 20px;
        }
    </style>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        $("td").bind('mousemove', function(e){ 
            var clickpos = e.pageX;
            var startpos = $(this).offset().left;
            var fontsize = parseInt($(this).css("font-size"));

            $("#log").text("position : " + clickpos + 
                           ", debut balise : " + startpos +
                           ", taille police : " + fontsize +
                           ", difference pixels : " + (clickpos - startpos) +
                           ", difference caracteres : " + ((clickpos - startpos) / fontsize)); 
        });
    });
    //]]>
    </script>
    
    </head>

    <body>
        <table>
        <tr>
            <td>Wfdsf&nbsp;&nbsp;&nbsp;sdfsdfsfdsfds&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td> Maaaaa</td>
        </tr>
        <tr><td>aaaaa</td><td>fdsf&nbsp;&nbsp;Rsdfftttttttttttttttttttp;&nbsp;&nbsp;</td></tr>
    </table>

	<div id="log"></div>     

</html>:dia


J'ai donc défini une taille de 20 pixels pour ma police (monospace), mais le petit script (avec du jquery) me confirme que chaque caractère ne fait pas 20pixels.

où est-ce que ça coince ?
Ah... moi ton script me renvoie bien 20px pour la valeur "Taille police" sur chaque <td>… Tu testes sur quel navigateur ?

grillé par Laurie-Anne Smiley smile Smiley edit Modifié par ZeB_panam (15 Jul 2010 - 11:42)
Oui pardon, le script n'est pas très clair, 'Taille police' est la taille définie dans le css, mais si on regarde 'difference pixels' (nombre de pixel entre le début du td et la position du curseur) ou même 'difference caracteres' (censé calculer le nombre de caractères entre le début du td et la position du curseur), ça ne correspond pas.

Par exemple, si je me met sur le 5eme caractère, je ne trouve pas 100 (5x20) pour 'difference pixels'.

navigateurs testés : ie7, ff3.6 et chrome, zoom desactivés
Modifié par Pierre_taff (15 Jul 2010 - 11:49)
Ce n'est pas parce que un caractère fait 20px de haut qu'il fait 20px de large (même avec une police à chasse fixe). Smiley cligne
Patidou a écrit :
Ce n'est pas parce que un caractère fait 20px de haut qu'il fait 20px de large (même avec une police à chasse fixe). Smiley cligne


Ah ... merci, ça semble me revenir maintenant, est-ce qu'il y a quelque part une définition plus précise de ce que signifie 'size' dans font-size ?

Et à tout hasard, vous connaissez un moyen de connaître la largeur des caractères ?
Laurie-Anne a écrit :
Et qu'il y a un peu d'espace entre les caractères également.


L'espace fait partie du caractère, c'est ce qu'on appelle «les approches». Smiley cligne
Modifié par Patidou (15 Jul 2010 - 13:59)
Patidou a écrit :
L'espace fait partie du caractère, c'est ce qu'on appelle «les approches». Smiley cligne
Il me semblait qu'il y avait moyen de modifier l'espacement des caractères en CSS (la typo n'est pas vraiment mon domaine, donc je sèche sur la version de CSS et le nom de la propriété ^^; )
Pierre_taff a écrit :
Merci beaucoup pour vos réponses, même si ça m'arrange pas trop

Tu devrais peut-être plutôt nous expliquer ce que tu souhaites faire en finalité ?
ZeB_panam a écrit :

Tu devrais peut-être plutôt nous expliquer ce que tu souhaites faire en finalité ?


Compter le nombre de caractères entre le début de la balise td et la position du curseur. Je me basais sur la font-size comme largeur et évidemment ça ne marchait pas.
Pour l'instant j'ai essayé d'obtenir la taille d'un caractère en divisant la largeur de la balise td par le nombre de caractères contenus dans celle-ci, mais ça n'a pas l'air de marcher tout le temps.
Du coup, faut que je cherche un peu avant d'avoir une question plus précise. Maintenant si vous avez un lien vers un truc tout fait, ça marche aussi Smiley langue
Sujet clos
Aller à