0

I think this has been answered before, but i want to find the best solution to it since it will be run on something quite heavy performance wise.

Basically given this.

<div id="fit">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

and

#fit {
  width: 400px;
  font-size: 20px;
}

I want the font to be reduced until it fits.

A) Is there any way to do this via CSS?

B) I know i can do it in javascript, but this is going to load a handful of items (400-2000, it's a requirement), so if i implement it via javascript it must be quite fast.

C) Another idea would be to implement a pair of extra css classes and apply them according to the string length. Would that add a lot of extra overhead? Right now rendering it when there's no cache for that page can take up to 5 seconds (haven't optimized it yet, tho, the original dev is not working on this anymore)

Thanks

Fredy
  • 2,840
  • 6
  • 29
  • 40
Nuance Jones
  • 241
  • 2
  • 5
  • related: http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container – Aziz Nov 09 '12 at 02:42
  • [CSS can't do it alone](http://fittextjs.com/). Why are there 2000 elements in your website that need to do this? – Blender Nov 09 '12 at 02:43
  • It's an inventory, they want it pretty, designer thinks that since everything works in photoshop it must on css. And my client specifically requested to show all of them at once – Nuance Jones Nov 09 '12 at 02:45
  • @Aziz didn't see that one, according to one of the answers it should be fast enough but i'm still wondering if i should go server side for it. – Nuance Jones Nov 09 '12 at 02:50
  • @NuanceJones: Are you sure it isn't possible for you to use lazy loading or something to display them all? Maybe show your client that it makes the webpage faster and doesn't really affect usability? – Blender Nov 09 '12 at 02:55
  • Infinite scrolling could be a good solution, but that raises me another problem. Going into an item and going back later would let you at the beggining of the page. But i could force them to open it on a new tab too. It sounds worth taking the time to convince him – Nuance Jones Nov 09 '12 at 03:02
  • You could load the page with the item in an overlay (using an iframe or ajax). Then it's easy to return to the list. – insertusernamehere Nov 09 '12 at 13:54

0 Answers0