0

I have been creating a display for a coffee ordering system. The display shows 10 orders, but The screen size can be changed. I used this jQuery plugin textFill, and call it on a callback when the new orders are pulled in. For some reason, if my span tag, (or in my case p tag), contains a string without a space in, the text will appear a lot bigger than other "orders". I got round this by making sure there is a space included in the order string, but I'd still like to understand what was causing the problem.

Here is some example html of the order screen...

<div id="twitterSearch" class="tweets">
<div class="tweet">
<p class="text" >Cappuccino.................................MrTest</p>
</div>
<div class="tweet">
<p class="text" >Cappuccino....................................Bob</p>
</div>
<div class="tweet">
<p class="text" >Latte  ....................................... Harry</p>
</div>
<div class="tweet">
<p class="text" >Black Americano    ..................... Tanya</p>
</div>
<div class="tweet">
<p class="text" >Black Americano    ................. Yogi</p>
</div>
<div class="tweet">
<p class="text" >Cappuccino .................................. Paul</p>
</div>
<div class="tweet">
<p class="text" >Cappuccino ................................... Tilda</p>
</div>
<div class="tweet">
<p class="text" >Cappuccino ................................ Sam</p>
</div>
<div class="tweet">
<p class="text" >Latte ....................................... Ryan</p>
</div>

In the above example, the first two tweets would have a much larger text size.

I tried to debug the plugin, but couldn't seem to get back a reported width change of the selected element during the changing of font size.

Community
  • 1
  • 1
Relequestual
  • 11,631
  • 6
  • 47
  • 83
  • 1
    have you got a sample page we can have a look at? – JohnP Mar 07 '11 at 15:59
  • Well the whole point of that "textFill" thing is to try to adapt font size to available space. It must be the case that the extra pixels used when there's a space in the text just result in the font size getting recomputed to be smaller. – Pointy Mar 07 '11 at 16:08
  • @JohnP Normally I would, but in this case I can't because I don't think I'm allowed to share the URL of our testing environment. – Relequestual Mar 07 '11 at 16:37
  • @Pointy If that were the case I would have been able to see this, however we are talking not a few font sizes but a difference of about 30px in size, even though the same number of characters are used. – Relequestual Mar 07 '11 at 16:39

1 Answers1

0

I haven’t really looked at the textFill plugin, but isn’t it just a question of it suddenly being able to wrap the text if there’s a space in it; and that the shrinking of wrapped text stops earlier because the maximum height is exceeded?

Martijn
  • 13,225
  • 3
  • 48
  • 58
  • The plugin works in reverse, starting with a crazily high number (like 100px) and working backwards till the font fits within the confines of the div. The text does not wrap. – Relequestual Mar 07 '11 at 16:40