Adapt font size to enclose div max-width (multi languages problems)

AgBorkowski 1 Comment

So we have 2013 yr. and many backend translation adapters (l10n, l18n, csv, tmx, xml) to make multi languages application in age of html5, css3 gradient, shadow, animations, bootstrapped templates we don’t have solution to rescale font size to enclose element. In my case it is problem with buttons, so english UI looks good for eg. like this

Screen shot 2013-03-27 at 23.56.59

When i change language to russian (my neighborhood county :)) I have big problem, most of my buttons are too big and destroy parent box model, most of time cyrillic words are longer than other

Screen shot 2013-03-27 at 23.57.14

So (thanks of good) we have (jQuery and inflateText.js) solution, when we use bootstrap we can precise class for button with limited width (eg. .btn-max) and add for them inflateText method, remember set up before max-width of specified buttons

$('.btn-max').inflateText();
  • http://rjzaworski.com/projects/inflateText
  • http://jquery.org