jquery.fitText.js -> Fit text in div


/ Published in: jQuery
Save to your folder(s)

This is simple plugin, that will allow you to fit text in a div - the text will become the largest/smallest possible to fill all the div. It have self-explanatory options you can pass. The shrinking engine is Based on Nikolay Kuchumov script (https://github.com/kuchumovn/jquery-full-house), some mofications by Chrysto Panayotov (Bassta) -> Allow to center the text, add "spans" with different color, red border to see the div, etc. Require jQuery 1.7.1+ . Set width and height of the container.

save in jquery.fitText.js

usage:

html --> Hello, this {is} span

JS(onLoad) --> $("#mydiv").fillText({border: true, spanColor:"green", textAlign:"center", verticalAlign:"middle"});


Copy this code and paste it in your HTML
  1. /*
  2. Based on Nikolay Kuchumov script (https://github.com/kuchumovn/jquery-full-house)
  3.  
  4. Author: Chrysto Panayotov ( [email protected] )
  5.  
  6. VERSION 1.01
  7.  
  8. Options:
  9. @fontSizeIncrementStep [number] -> internal, for each step
  10. @addSpans [true/false] -> to add or not spans
  11. @spanColor [hex/string] -> color of the spans
  12. @border [true/false] -> to show or not red border
  13. @textAlign [left/center/right] -> horizontal align
  14. @verticalAlign [top/middle/bottom] -> vertical align of the text
  15. @lineHeight [pixels/ems] -> the line height
  16. @collapse: [true/false] -> to colapse height or not
  17.  
  18. Usage:
  19.  
  20. span - add different color.
  21. <div>and {this is span} text
  22. $("myDiv").fillText({border: true, spanColor:"black", textAlign:"center", verticalAlign:"middle" });
  23.  
  24. */
  25.  
  26. (function($){
  27. var Algorythm = {
  28. Interface: function(options){
  29. // called if the 'x' font size is too big, and the text with this font size doesn't fit the container
  30. this.too_big = function(x) {};
  31. // called if the text with font size 'x' fits the container (e.g. font_size=0 fits any container)
  32. this.fits = function(x) {};
  33. // this.retry(x) function will be set automatically
  34. },
  35.  
  36. Binary: function(options){
  37. var largest_fit;
  38. var minimum_too_big;
  39.  
  40. var step = options.fontSizeIncrementStep || 10;
  41.  
  42. this.too_big = function(x){
  43. minimum_too_big = x;
  44.  
  45. if (largest_fit){
  46. if (largest_fit === x - 1){
  47. return largest_fit;
  48. }
  49. return this.retry(largest_fit + (x - largest_fit) / 2);
  50. } else {
  51. if (x === 1){
  52. return 1
  53. }
  54. return this.retry(x - step);
  55. }
  56. }
  57.  
  58. this.fits = function(x){
  59. largest_fit = x;
  60.  
  61. if (minimum_too_big){
  62. if (minimum_too_big === x + 1){
  63. return x;
  64. }
  65. return this.retry(x + (minimum_too_big - x) / 2);
  66. } else {
  67. return this.retry(x + step);
  68. }
  69. }
  70. }
  71. }
  72.  
  73. function get_initial_font_size(container) {
  74. if (container.css('fontSize')) {
  75. var check = container.css('fontSize').match(/[\d]+px/);
  76. if (check.length){
  77. return parseInt(check[0]);
  78. }
  79. }
  80. return 1;
  81. }
  82.  
  83. function find_max_font_size(container, options){
  84. var initial_font_size = get_initial_font_size(container);
  85. container.css('fontSize', 0);
  86.  
  87. var html = container.html();
  88.  
  89. container.empty();
  90.  
  91. var overflow = container.css('overflow');
  92. container.css('overflow', 'hidden');
  93.  
  94. var sandbox = $('<span/>').html(html).appendTo(container);
  95.  
  96. var available_height = container[0].scrollHeight;
  97. var available_width = container[0].scrollWidth;
  98.  
  99. function try_font_size(font_size){
  100. container.css({ fontSize: font_size + 'px' });
  101. }
  102.  
  103. function recursive_search(algorythm, start_with){
  104. var find_max_font_size_starting_with = function(font_size){
  105. font_size = Math.ceil(font_size);
  106. if (font_size < 1){
  107. font_size = 1;
  108. }
  109. try_font_size(font_size);
  110.  
  111. var current_height = container[0].scrollHeight;
  112. var current_width = container[0].scrollWidth;
  113.  
  114. var height_proportion = current_height / available_height;
  115. var width_proportion = current_width / available_width;
  116.  
  117. if (height_proportion > 1 || width_proportion > 1){
  118. return algorythm.too_big(font_size);
  119. } else {
  120. return algorythm.fits(font_size);
  121. }
  122. }
  123.  
  124. algorythm.retry = find_max_font_size_starting_with;
  125. return find_max_font_size_starting_with(start_with);
  126. }
  127.  
  128. options.algorythm = options.algorythm || 'Binary';
  129. var algorythm = new Algorythm[options.algorythm](options);
  130.  
  131. var font_size = recursive_search(algorythm, initial_font_size);
  132.  
  133. container.css('overflow', overflow);
  134. container.empty().html(html);
  135.  
  136. return font_size;
  137. }
  138.  
  139. $.fn.fillText = function(options){
  140.  
  141. var defaults = {
  142. fontSizeIncrementStep: "5",
  143. addSpans: true,
  144. spanColor: "#000000",
  145. border: false,
  146. textAlign: "center",
  147. verticalAlign: "middle",
  148. lineHeight: "0.9em",
  149. collapse: false
  150. };
  151.  
  152. var options = $.extend({}, defaults, options);
  153.  
  154. return $(this).each(function(){
  155. var container = $(this);
  156. container.css({
  157. fontSize: find_max_font_size(container, options) + 'px',
  158. lineHeight: options.lineHeight,
  159. display: "table"
  160. }).wrapInner('<div style="text-align:'
  161. + options.textAlign
  162. +'; display: table-cell; vertical-align: '
  163. + options.verticalAlign
  164. +';" />'
  165. );
  166.  
  167. //collapse - usefull for headlines
  168. if (options.collapse){
  169. container.css("height", "auto");
  170. }
  171.  
  172. //special for wrap
  173. if (options.addSpans){
  174. container.html( container.html().replace("{", "<span style='color: "
  175. + options.spanColor
  176. + "'>").replace("}", "</span>")
  177. );
  178. }
  179.  
  180. //adds border to see the boxes
  181. if (options.border){
  182. container.css("border", "1px solid red");
  183. }
  184. })
  185. }
  186. })(jQuery)

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.