This project is read-only.

Automatically adjusts the font size of a specified span containing text and/or truncates said text to best fit within the span's parent container. The behavior is similar to what you see in many iOS applications.

Example

<div style="width: 112px; height: 112px; border: solid 1px #ff0000; overflow: hidden">
	<span id="testSpan">BlahBlahBlahBlahBlah</span>
</div>

$("#testSpan").autoFitText({minFontPt: 12, maxFontPt: 45, paddingPixelsLeftRight: 5});
OR
$("#testSpan").autoFitText({fitMode: "truncate", truncateMode: "right"});

Parameters

  • fitMode - The technique to use when attempting to fit the text ("size", "truncate", or "both"). If "both" is specified, "size" happens before "truncate" and the text is only truncated if it still doesn't fit at the minimum allowed size. (Default = "size")
  • fitDimension - The dimension(s) to consider when attempting to fit the text ("horizontal", "vertical", or "both"). (Default = "both")
  • paddingPixelsLeftRight - The padding to allow left and right of the text in pixels. (Default = 0.0)
  • paddingPixelsTopBottom - The padding to allow above and below the text in pixels. (Default = 0.0)
  • minFontPt - The minimum font size to allow in points. Only applicable when the fitMode is "size" or "both". (Default = 1)
  • maxFontPt - The maximum font size to allow in points. Only applicable when the fitMode is "size" or "both". (Default = 100)
  • truncateMode - The portion of the text to truncate if needed ("left", "middle", or "right"). Only applicable when the fitMode is "truncate" or "both". (Default = "right")
  • truncateString - The string to substitute for any truncated characters. Only applicable when the fitMode is "truncate" or "both". (Default = "...") Note that your original text should not contain the truncateString because it will be lost during the truncation steps.

Last edited Apr 10, 2013 at 7:14 PM by cmaterick, version 11

Comments

No comments yet.