Skip to content

joelday/Badonkatrunc

Repository files navigation

#Badonkatrunc ##jQuery plugin for dynamic text layout and truncation
Developed by Joel Day at Plexipixel, Inc., creators of Sticky Brand Play™
Demos available at http://badonkatrunc.com

###Overview
Badonkatrunc dynamically resizes or truncates text to fit within the size constraints of block elements. Can be used both as a text-overflow: ellipsis polyfill or as a tool for responsive layout. Fully maintains nested inline and block content, including links and images.

Tested with Chrome, Firefox, IE 7+, Safari (Mac/Win/iOS) and Opera.

###Example Usage
// Limits contents of target elements to a single line, truncating when nessecary, based on target element width. $('header').badonkatrunc();

// Reduces font size to 70% of the original size before truncating.
// Increases font size up to 250% of the original size if space is available.
$('header').badonkatrunc({ minimumFontSize: 0.7, maximumFontSize: 2.5 });

// Reduces font size to 70% of the original size before allowing contents to wrap. No truncation occurs.
$('header').badonkatrunc({ minimumFontSize: 0.7, truncate: false });

###Methods

<tr>
    <td><code>destroy</code></td>
    <td>Removes Badonkatrunc from target element(s) and restores original content.</td>
    <td>none</td>
</tr>

<tr>
    <td><code>refresh</code></td>
    <td>Forces target element(s) to be optimized again.</td>
    <td>none</td>
</tr>

<tr>
    <td><code>changeContents</code></td>
    <td>Replaces the original content with new content, copied either from an HTML string or from an element that contains the new content.</td>
    <td>string | jQuery object | element</td>
</tr>
Name Description Arguments

###Options

<tr>
    <td colspan="4"><strong>General</strong></td>
</tr>
<tr>
    <td><code>automaticSizeTracking</code></td>
    <td>Contents of target element(s) will be automatically optimized if the size of the target element(s) is changed.</td>
    <td><code>false</code></td>
    <td><code>true</code> | <code>false</code></td>
</tr>
<tr>
    <td><code>fitDirection</code></td>
    <td>Dimension (width or height) of the target element(s) used for optimization.</td>
    <td><code>'horizontal'</code></td>
    <td><code>'horizontal'</code> | <code>'vertical'</code></td>
</tr>

<tr>
    <td colspan="4"><strong>Font Size</strong></td>
</tr>
<tr>
    <td><code>minimumFontSize</code></td>
    <td>The minimum factor for the font size of the text within the target element(s).</td>
    <td><code>1.0</code></td>
    <td><code>0.0</code> or greater and less than or equal to <code>maximumFontSize</code></td>
</tr>
<tr>
    <td><code>maximumFontSize</code></td>
    <td>The maximum factor for the font size of the text within the target element(s).</td>
    <td><code>1.0</code></td>
    <td><code>0.0</code> or greater and equal to or greater than <code>minimumFontSize</code></td>
</tr>
<tr>
    <td><code>fontSizeSynced</code></td>
    <td>Font size of target elements will be constrained to the smallest optimal font size of the target elements.</td>
    <td><code>false</code></td>
    <td><code>true</code> | <code>false</code></td>
</tr>


<tr>
    <td colspan="4"><strong>Letter Spacing</strong></td>
</tr>
<tr>
    <td><code>minimumLetterSpacing</code></td>
    <td>The minimum letter spacing adjustment applied.</td>
    <td><code>0.0</code></td>
    <td>less than or equal to <code>maximumFontSize</code></td>
</tr>
<tr>
    <td><code>maximumLetterSpacing</code></td>
    <td>The maximum letter spacing adjustment applied.</td>
    <td><code>0.0</code></td>
    <td>equal to or greater than <code>minimumFontSize</code></td>
</tr>
<tr>
    <td><code>letterSpacingSynced</code></td>
    <td>Letter spacing of target elements will be constrained to the smallest optimal letter spacing of the target elements.</td>
    <td><code>false</code></td>
    <td><code>true</code> | <code>false</code></td>
</tr>

<tr>
    <td colspan="4"><strong>Truncation</strong></td>
</tr>
<tr>
    <td><code>truncate</code></td>
    <td>Truncation will strip inline content from the target element(s) that would overflow in the current fit direction. When <code>fitDirection</code> is <code>'horizontal'</code> and truncation is enabled, word wrapping will not occur.</td>
    <td><code>true</code></td>
    <td><code>true</code> | <code>false</code></td>
</tr>
<tr>
    <td><code>truncateString</code></td>
    <td>The HTML content inserted at the truncation location when truncation occurs.</td>
    <td><code>'&amp;hellip;'</code></td>
    <td>string</td>
</tr>
<tr>
    <td><code>truncateLocation</code></td>
    <td>The location within the inline content to strip from the target element(s).</td>
    <td><code>'end'</code></td>
    <td><code>'start'</code> | <code>'middle'</code> | <code>'end'</code></td>
</tr>
<tr>
    <td><code>truncateOnlyWholeWords</code></td>
    <td>Truncation will be limited to white space so that whole words are retained.</td>
    <td><code>false</code></td>
    <td><code>true</code> | <code>false</code></td>
</tr>
Name Description Default Value Values

Notes

  • Content will be wrapped in a <span> element, which could adversely affect any direct-child selectors.
  • Whole-word truncation is preferred over letter spacing adjustment, when possible.

About

jQuery plugin for dynamic text layout and truncation

Resources

Stars

Watchers

Forks

Packages

No packages published