[CSS 2] Adapter police au conteneur

salut Arnaud F.,

en css tu ne peux pas adapter la taille de la police pour qu'il prenne l'ensemble du conteneur automatiquement.
c'est un peu normal puisque lorsqu'on choisi la taille d'une police c'est la "taille d'un caractère" et non la taille de la phrase qui est fixée.
tu peux éventuellement le convertir en image puisque ceux-ci peuvent s'ajuster automatiquement au conteneur.
sinon (en reprenant l'exemple) tu peux adapter un truc comme ca:
Code:

1 2 3 $("#resizable").bind( "resize", function(event, ui) { $('#resizable span').css('font-size',parseInt(parseInt($("#resizable").css('width'))/10)); });
en initialisant la font de départ avec un ratio (ici: font:15 ratio:10 largeur du conteneur:150px) afin d'occuper la largeur du conteneur.
mais il peut avoir un bug si la police est substitué par une autre de plus grande taille auquel cas il faudrait éventuellement incorporer la police.
ce serait mieux de pouvoir connaitre la largeur d'une phrase mais lorsque les dimension d'un span n'est pas fixé, la réponse est: 'auto'. :/
je ne connais pas le moyen de déterminer cette largeur qui permettrait d'établir le ratio.

bonne continuation,
;)

ps: pour test:
Code:

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 36 37 38 39 40 41 42 43 44 45 46 47 48 <html> <head> <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" /> <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script> <link type="text/css" href="http://jqueryui.com/demos/demos.css" rel="stylesheet" /> <style type="text/css"> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } #resizable span {font-size: 15} </style> <script type="text/javascript"> $(document).ready(function() { $(function() { $("#resizable") .resizable(); $("#resizable").bind( "resize", function(event, ui) { $('#resizable span').css('font-size',parseInt(parseInt($("#resizable").css('width'))/10)); }); }); }); </script> </head> <body> <div class="demo"> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable</h3> <div style="position:absolute;"> <span>Texte à adapter.</span> </div> </div> </div> <div class="demo-description"> <p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p> </div> </body> </html>