Je bossais ce matin sur un outil JavaScript permettant de determiner la taille d'un String en pixel et croyez moi, ce ne fut pas une mince affaire !!
Tout commencais pourtant bien, une petite fonction JavaScript me permettant de créer une DIV à la volée de 0px sur 0px, on lui injecte un texte et hop, offsetWidth nous donne la taille, jusque la, rien de bien etonnant.
Mais voila ti pas qu'un de mes String contient le fameux "-" ... Et la, gros problème, pour je ne sais quelle raison, le "-" me fait 2 retour a la ligne, un avant, un après, ex:
Etrange ... Mais bon, je me deballone pas, il faut trouver une solution !!
Reprenons depuis le début, je test tout d'abord l'injection d'un String dans une DIV deja presente dans mon document :
<script type="text/javascript">
fFeedDiv = function(inId, inHtml)
{
var oDiv = document.getElementById(inId);
oDiv.style.border = '1px solid #FF0000';
oDiv.innerHTML = inHtml;
}
</script>
<button onclick="fFeedDiv('oDiv', 'Asp-Php.Net');">FeedDiv</button>
<div id="oDiv"></div>
Avec ceci, pas de problèmes, le "-" ne renvoi pas à la ligne mais le résultat ne correspond pas a mes attentes car la DIV est en 100% ... :-/
Je décide donc de modifier le script de facon créer la DIV a la volee et l'ajouter au document afin de vérifier que cette action n'engendre pas le comportement du "-" :
<script type="text/javascript">
fCreateDiv = function(inHtml)
{
var oDiv = document.createElement('DIV');
oDiv.style.border = '1px solid #FF0000';
oDiv.innerHTML = inHtml;
document.body.appendChild(oDiv);
}
</script>
<button onclick="fCreateDiv('Asp-Php.Net');">CreateDiv</button>
Au vu du resultat, ce n'est pas la création a la volée qui coince, mais comme précédement, ca ne correspond toujours pas a mon attente car la DIV est aussi en 100% ... :-/
Bon, j'ai deja pas beaucoup de cheveux, mais si ca continue comme ca, je finirais par ressembler a un oeuf !!
Je reprends mon script, je reessaye avec 2 Strings différents, toujours le meme resultat, le "-" me renvoi a la ligne, ex:
<script type="text/javascript">
fCreateDiv = function(inHtml)
{
var oDiv = document.createElement('DIV');
oDiv.style.border = '1px solid #FF0000';
oDiv.style.width = 0;
oDiv.style.height = 0;
oDiv.innerHTML = inHtml;
document.body.appendChild(oDiv);
}
</script>
<button onclick="fCreateDiv('Asp-Php.Net');">CreateDiv</button>
<button onclick="fCreateDiv('AspPhp.Net');">CreateDiv</button>
Ce coup ci, mes DIV sont à la bonne taille, par contre, ce fameux "-" commence a me rendre fou !!! Mais ou est l'erreur !!!
Me voici donc parti dans une superbe recherhe, newsgroup, forum, google ... Rien a l'horizon, quelques personnes ayant le meme probleme, mais pas de solution miracle ...
Et me voila parti dans les refs W3C pour denicher le problème et voila qu'au fin fond de la Ref CSS 2.1, je tombe sur ceci :
The token S in the grammar above stands for whitespace. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in whitespace. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of whitespace.
Ayant deja eu quelque soucis avec le "em dash" et le "nonbreaking space" je commence à douter de l'interpretation du "-" ... Et s'il etait considéré par le CSS comme un ("space-like") white-space ??? Mais oui mais c'est bien sur ... Un petit test et miracle !!! J'ai eu raison du "-" qui rend fou !!! lol
<script type="text/javascript">
fCreateDiv = function(inHtml)
{
var oDiv = document.createElement('DIV');
oDiv.style.border = '1px solid #FF0000';
oDiv.style.width = 0;
oDiv.style.height = 0;
oDiv.innerHTML = inHtml;
oDiv.style.whiteSpace = 'nowrap';
document.body.appendChild(oDiv);
}
</script>
<button onclick="fCreateDiv('Asp-Php.Net');">CreateDiv</button>
Et oui, le simple ajout du style white-space résoud le problème :
Incroyable, dans c cas précis, il semblerai que le "-" soit un caractère de type
white-space ...
Pas plus d'explications logique au problème mais au moins une solution !!!
Bon Dev ...
Aurelien
Member of WygTeam
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
