├── .gitignore
├── .npmignore
├── README.md
├── examples
    ├── .gitignore
    ├── mk-examples.sh
    └── textFit.html
├── index.d.ts
├── package.json
├── textFit.js
├── textFit.min.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | examples/
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | `textFit` - Hassle-Free Text Fitting
  2 | ==================================
  3 | 
  4 | A **fast**, dependency-free text sizing component that quickly fits single and multi-line text to the width and/or height of its container.
  5 | 
  6 | [Example](http://textfit.strml.net/examples/textFit.html)
  7 | 
  8 | Capabilities
  9 | ============
 10 | 
 11 | `textFit` is:
 12 | 
 13 | * Fast, using binary search to quickly fit text to its container in `log n` time, making it far faster than most solutions.
 14 |   * Most fits are `<1ms`. See the [implementation details](#implementation-details).
 15 | * Dependency-free.
 16 | * Small. `4.1KB` minified and `1.5KB` gzipped.
 17 | * Supports both horizontal and vertical centering, including vertical centering with Flexbox for maximum accuracy.
 18 | * Supports any font face, padding, and multiline text.
 19 | 
 20 | Browser Support
 21 | ===============
 22 | 
 23 | `textFit` supports IE9+, Firefox, Chrome, Opera, and most mobile browsers. If you find an incompatibility,
 24 | please file an issue.
 25 | 
 26 | If you require IE <= 8 support, please use the [jQuery version](https://github.com/STRML/textFit/tree/1.0-jQuery).
 27 | Functionality is identical between v1.0 and v2.0, the only change was the removal of the jQuery dependency.
 28 | 
 29 | Changelog
 30 | =========
 31 | 
 32 | v2.3.1
 33 | ------
 34 | 
 35 | * Fix [#20](https://github.com/STRML/textFit/issues/20) - properly iterate over `HTMLCollection` objects.
 36 | 
 37 | v2.3.0
 38 | ------
 39 | 
 40 | * Added `alignVertWithFlexbox`. This does better vertical alignment and fixes #14.
 41 | 
 42 | v2.2.0
 43 | ------
 44 | 
 45 | * Throw errors instead of just printing to console when missing height/width.
 46 |   - Removed `options.suppressErrors`. Wrap in `try/catch` instead if you really need this.
 47 | * Slight refactor.
 48 | * Added automatic build on prepublish.
 49 | 
 50 | v2.1.1
 51 | ------
 52 | 
 53 | * Fixed a bug with `alignVert` when reprocessing.
 54 | * Added full UMD shim and published to npm.
 55 | 
 56 | v2.1
 57 | ----
 58 | 
 59 | * Reworked alignVert.
 60 | * `reProcess` is now `true` by default. Set to `false` if you want to fire-and-forget on potentially
 61 |    processed nodes. This was originally false by default because it was being used in an infinite scrolling list.
 62 | 
 63 | v2.0
 64 | ----
 65 | 
 66 | * Removed jQuery dependency.
 67 | 
 68 | Usage
 69 | =====
 70 | 
 71 | ```html
 72 | <div class="box" style="width:300px;height:300px">
 73 |   Fit me, I am some text
 74 | </div>
 75 | ```
 76 | 
 77 | ```javascript
 78 | // textFit accepts arrays
 79 | textFit(document.getElementsByClassName('box'));
 80 | // or single DOM elements
 81 | textFit(document.getElementsByClassName('box')[0]);
 82 | // Use jQuery selectors if you like.
 83 | textFit($('#box')[0])
 84 | ```
 85 | 
 86 | The text will scale until it reaches the horizontal or vertical bounds of the box.
 87 | Explicit width and height styles are required in order to fit the text.
 88 | 
 89 | Advanced Usage
 90 | ==============
 91 | 
 92 | Multiline Strings
 93 | -----------------
 94 | 
 95 | If your text has multiple lines, textFit() will automatically detect that and disable white-space: no-wrap!
 96 | No changes are necessary.
 97 | 
 98 | ```html
 99 | <div class="box" style="width:300px;height:300px">
100 |   This text <br>
101 |   Has multiple lines <br>
102 |   Fit me!
103 | </div>
104 | ```
105 | 
106 | ```javascript
107 | textFit(document.getElementsByClassName('box'))
108 | ```
109 | 
110 | If, for some reason, the automatic detection is not working out for you, use the following to explicitly turn on
111 | multiLine fitting:
112 | 
113 | ```javascript
114 | textFit(document.getElementsByClassName('box'), {multiLine: true})
115 | ```
116 | 
117 | Horizontal/Vertical Centering
118 | -----------------------------
119 | 
120 | ```html
121 | <div class="box" style="width:300px;height:300px">
122 |   This text <br>
123 |   Has multiple lines <br>
124 |   And wants to be centered horizontally and vertically<br>
125 |   Fit me!
126 | </div>
127 | ```
128 | 
129 | ```javascript
130 | textFit(document.getElementsByClassName('box'), {alignHoriz: true, alignVert: true})
131 | ```
132 | 
133 | Minimum and Maximum Sizes
134 | -------------------------
135 | 
136 | Sometimes you want to make sure that your text remains sanely sizes if it is very short or very long. textFit
137 | has you covered:
138 | 
139 | ```html
140 | <div class="box" style="width:300px;height:300px">
141 |   Short Text
142 | </div>
143 | ```
144 | 
145 | ```javascript
146 | textFit(document.getElementsByClassName('box'), {minFontSize:10, maxFontSize: 50})
147 | ```
148 | 
149 | Implementation Details
150 | ----------------------
151 | textFit determines reasonable minimum and maximum bounds for your text. The defaults are listed below.
152 | 
153 | To ensure accurate results with various font-faces, line-heights, and letter-spacings, textFit resizes the text
154 | until it fits the box as accurately as possible. Unlike many similar plugins, textFit uses **binary search** to
155 | find the correct fit, which speeds the process significantly. textFit is fast enough to use in production
156 | websites.
157 | 
158 | `textFit()` is a synchronous function. Because of this, resizes should be invisible as the render thread does not
159 | have a chance to do a layout until completion. Normal processing times should be < 1ms and should not significantly
160 | block renders.
161 | 
162 | Default Settings
163 | ----------------
164 | 
165 | From the source, for reference:
166 | 
167 | ```javascript
168 | settings = {
169 |     alignVert: false, // if true, textFit will align vertically using css tables
170 |     alignHoriz: false, // if true, textFit will set text-align: center
171 |     multiLine: false, // if true, textFit will not set white-space: no-wrap
172 |     detectMultiLine: true, // disable to turn off automatic multi-line sensing
173 |     minFontSize: 6,
174 |     maxFontSize: 80,
175 |     reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance
176 |     widthOnly: false, // if true, textFit will fit text to element width, regardless of text height
177 |     alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment
178 | };
179 | ```
180 | 
181 | License
182 | =======
183 | MIT
184 | 


--------------------------------------------------------------------------------
/examples/.gitignore:
--------------------------------------------------------------------------------
1 | # Build artifacts
2 | *.js


--------------------------------------------------------------------------------
/examples/mk-examples.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | DIR="$(dirname "$0")"
 4 | 
 5 | cp $DIR/../textFit.js $DIR
 6 | cat $DIR/textFit.js | \
 7 |   sed 's/function processItem(/async function processItem(/' | \
 8 |   sed 's/\/\/ await injection point/await new Promise((resolve) => setTimeout(resolve, 500));/' \
 9 |   > $DIR/textFit.slow.js
10 | 


--------------------------------------------------------------------------------
/examples/textFit.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 | "http://www.w3.org/TR/html4/strict.dtd">
  3 | <html>
  4 |   <head>
  5 |     <script>
  6 |       window.onerror = function (msg, url, lineNo, columnNo, error) {
  7 |         function removeById(id) {
  8 |           var el = document.getElementById(id);
  9 |           el.parentElement.removeChild(el);
 10 |         }
 11 |         removeById('textFitLib');
 12 | 
 13 |         setTimeout(function() {
 14 |           removeById('slowMotion');
 15 | 
 16 |           // Switch to fast lib which doesn't use async/await
 17 |           var fastScript = document.createElement('script');
 18 |           fastScript.src = 'textFit.js';
 19 |           fastScript.onload = function() {
 20 |             waitForTextFit();
 21 |           }
 22 |           document.body.appendChild(fastScript);
 23 |         }, 16);
 24 |       };
 25 |     </script>
 26 |     <link href='http://fonts.googleapis.com/css?family=Astloch' rel='stylesheet' type='text/css'>
 27 |     <script>
 28 |       function doFit(){
 29 |         textFit(document.getElementById('container'), {maxFontSize: 120});
 30 |         textFit(document.getElementById('horizCentered'), {alignHoriz: true});
 31 |         textFit([
 32 |           document.getElementById('multiLine'),
 33 |           document.getElementById('letterSpacing'),
 34 |           document.getElementById('lineHeight'),
 35 |           document.getElementById('padding'),
 36 |           document.getElementById('fontFaces'),
 37 |         ], {multiLine: true});
 38 |         textFit(document.getElementById('vertCentered'), {alignVert: true, multiLine: true});
 39 |         textFit(document.getElementById('centeredMultiLine'), {alignHoriz: true, alignVert: true});
 40 |         textFit(document.getElementById('maxFontSize'), {maxFontSize: 40});
 41 |         textFit(document.getElementById('paddingVert'), {alignVert: true, alignHoriz: true, alignVertWithFlexbox: true});
 42 |       }
 43 |       function waitForTextFit() {
 44 |         var interval = setInterval(function() {
 45 |           if (window.textFit) {
 46 |             clearInterval(interval);
 47 |             doFit();
 48 |           }
 49 |         }, 50); 
 50 |       }
 51 |       waitForTextFit();
 52 |     </script>
 53 |     <script id="textFitLib" src="textFit.slow.js"></script>
 54 |     <style>
 55 |       body{
 56 |         background: #3F3F3F;
 57 |         color: #DCDCCC;
 58 |         font-family: Arial;
 59 |         font-size: 14px;
 60 |         margin-top: 30px;
 61 |       }
 62 |       *{
 63 |         box-sizing: border-box;
 64 |         -moz-box-sizing: border-box;
 65 |         -webkit-box-sizing: border-box;
 66 |       }
 67 |       .header{
 68 |         margin-left: 20px;
 69 |         display: block;
 70 |       }
 71 |       h1{
 72 |         border-bottom: 2px solid white;
 73 |         display: inline-block;
 74 |         margin: 0;
 75 |         color: white;
 76 |       }
 77 |       div{
 78 |         margin: 20px 0;
 79 |         height: 200px;
 80 |         width: 200px;
 81 |         overflow: hidden;
 82 |         font-size: 8px;
 83 |         float: left;
 84 |         margin: 20px;
 85 |         color: #ACC1AC;
 86 | 
 87 |         -webkit-box-shadow: 0px 2px 4px 2px rgba(255,255,255, 0.5);
 88 |         -moz-box-shadow: 0px 2px 4px 2px rgba(255,255,255, 0.5);
 89 |         box-shadow: 0px 2px 4px 2px rgba(255,255,255, 0.5);
 90 | 
 91 |         -webkit-border-radius: 4px;
 92 |         -moz-border-radius: 4px;
 93 |         border-radius: 4px;
 94 | 
 95 |         background: -webkit-gradient(linear, left top, left bottom,
 96 |         color-stop(0%, black), color-stop(55%, black), color-stop(100%, #404040));
 97 |         background: -moz-linear-gradient(top, black 0%, black 55%, #404040 130%);
 98 |       }
 99 |       #fontFaces{
100 |         font-family: "Astloch", monospace;
101 |       }
102 |       #letterSpacing{
103 |         letter-spacing: 3px;
104 |       }
105 |       #lineHeight{
106 |         line-height: 80px;
107 |       }
108 |       #padding{
109 |         padding: 30px;
110 |       }
111 |       #paddingVert {
112 |         padding: 0 30px 30px 30px;
113 |       }
114 |       .optionalCSS{
115 |         color: #D4C4A9;
116 |       }
117 |       .homeLink{
118 |         display: block;
119 |         clear: both;
120 |         color: white;
121 |         font-size: 16px;
122 |         margin-left: 20px;
123 |       }
124 |       .homeLink:hover{
125 |         color: #ACC1AC;
126 |       }
127 | 
128 |     </style>
129 |   </head>
130 |   <body>
131 |     <span class="header">
132 |       <h1> TextFit Examples </h1>
133 |       <h3> TextFit <b>respects existing CSS</b> and fits within the box it is placed, regardless of padding,
134 |            line-height, font-face, or letter-spacing.
135 |       </h3>
136 |       <h4>
137 |         TextFit does <u>not</u> require jQuery.
138 |       </h4>
139 |       <p id="slowMotion"> 
140 |         For illustration, these examples are run in <u>slow motion</u> using setInterval. Actual sizings are invisible and average &lt;2ms.
141 |       </p>
142 |       <p> View source to see how options are applied.</p>
143 |     </span>
144 |     <div id="container">
145 |       Text
146 |     </div>
147 |     <div id="horizCentered">
148 |       Centered Text
149 |     </div>
150 |     <div id="multiLine">
151 |       Multiline<br>
152 |       Text
153 |     </div>
154 |     <div id="vertCentered">
155 |       Vertically Centered Text
156 |     </div>
157 |     <div id="centeredMultiLine">
158 |       Centered<br>
159 |       Multiline<br>
160 |       Text
161 |     </div>
162 |     <div id="maxFontSize" class="optionalCSS">
163 |       Set a Maximum<br>
164 |       Font Size
165 |     </div>
166 |     <div id="letterSpacing" class="optionalCSS">
167 |       Use Any
168 |       Letter Spacing
169 |     </div>
170 |     <div id="lineHeight" class="optionalCSS">
171 |       Use Any
172 |       Line Height
173 |     </div>
174 |     <div id="fontFaces" class="optionalCSS">
175 |       Use Any Custom
176 |       Font Face
177 |     </div>
178 |     <div id="padding" class="optionalCSS">
179 |       Use Any Custom Padding
180 |     </div>
181 |     <div id="paddingVert" class="optionalCSS">
182 |       Use Padding With Flexbox<br>
183 |       For Custom Vert Alignment!
184 |     </div>
185 |     <a class="homeLink" href="http://strml.net">Created by STRML</a>
186 |   </body>
187 | </html>
188 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
 1 | // Author: Trevor R <https://github.com/TJDoesCode>
 2 | // Date: 3/22/21
 3 | 
 4 | declare module "textfit" {
 5 |   interface textFitOptions {
 6 |     alignVert?: boolean;
 7 |     alignHoriz?: boolean;
 8 |     multiLine?: boolean;
 9 |     detectMultiLine?: boolean;
10 |     minFontSize?: number;
11 |     maxFontSize?: number;
12 |     reProcess?: boolean;
13 |     widthOnly?: boolean;
14 |     alignVertWithFlexbox?: boolean;
15 |   }
16 | 
17 |   export = textFit;
18 | 
19 |   function textFit(
20 |     els: Element | Element[] | NodeListOf<Element> | HTMLCollection | null,
21 |     options?: textFitOptions
22 |   ): void;
23 | }
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "textfit",
 3 |   "version": "2.4.0",
 4 |   "description": "A fast, jQuery-free text sizing component that quickly fits single and multi-line text to the width (and optionally height) of its container.",
 5 |   "main": "textFit.js",
 6 |   "types": "index.d.ts",
 7 |   "directories": {
 8 |     "example": "examples"
 9 |   },
10 |   "scripts": {
11 |     "test": "echo \"Error: no test specified\" && exit 1",
12 |     "build": "uglifyjs textFit.js > textFit.min.js",
13 |     "build-example": "sh examples/mk-examples.sh",
14 |     "prepublish": "npm run build"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/STRML/textFit.git"
19 |   },
20 |   "keywords": [
21 |     "textfit",
22 |     "fit",
23 |     "text"
24 |   ],
25 |   "author": "Samuel Reed <samuel.trace.reed@gmail.com> (http://strml.net/)",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/STRML/textFit/issues"
29 |   },
30 |   "homepage": "https://github.com/STRML/textFit",
31 |   "publishConfig": {
32 |     "registry": "https://registry.npmjs.org"
33 |   },
34 |   "devDependencies": {
35 |     "uglify-js": "^2.4.17"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/textFit.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * textFit v2.3.1
  3 |  * Previously known as jQuery.textFit
  4 |  * 11/2014 by STRML (strml.github.com)
  5 |  * MIT License
  6 |  *
  7 |  * To use: textFit(document.getElementById('target-div'), options);
  8 |  *
  9 |  * Will make the *text* content inside a container scale to fit the container
 10 |  * The container is required to have a set width and height
 11 |  * Uses binary search to fit text with minimal layout calls.
 12 |  * Version 2.0 does not use jQuery.
 13 |  */
 14 | /*global define:true, document:true, window:true, HTMLElement:true*/
 15 | 
 16 | (function(root, factory) {
 17 |   "use strict";
 18 | 
 19 |   // UMD shim
 20 |   if (typeof define === "function" && define.amd) {
 21 |     // AMD
 22 |     define([], factory);
 23 |   } else if (typeof exports === "object") {
 24 |     // Node/CommonJS
 25 |     module.exports = factory();
 26 |   } else {
 27 |     // Browser
 28 |     root.textFit = factory();
 29 |   }
 30 | 
 31 | }(typeof global === "object" ? global : this, function () {
 32 |   "use strict";
 33 | 
 34 |   var defaultSettings = {
 35 |     alignVert: false, // if true, textFit will align vertically using css tables
 36 |     alignHoriz: false, // if true, textFit will set text-align: center
 37 |     multiLine: false, // if true, textFit will not set white-space: no-wrap
 38 |     detectMultiLine: true, // disable to turn off automatic multi-line sensing
 39 |     minFontSize: 6,
 40 |     maxFontSize: 80,
 41 |     reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance
 42 |     widthOnly: false, // if true, textFit will fit text to element width, regardless of text height
 43 |     alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment
 44 |   };
 45 | 
 46 |   return function textFit(els, options) {
 47 | 
 48 |     if (!options) options = {};
 49 | 
 50 |     // Extend options.
 51 |     var settings = {};
 52 |     for(var key in defaultSettings){
 53 |       if(options.hasOwnProperty(key)){
 54 |         settings[key] = options[key];
 55 |       } else {
 56 |         settings[key] = defaultSettings[key];
 57 |       }
 58 |     }
 59 | 
 60 |     // Convert jQuery objects into arrays
 61 |     if (typeof els.toArray === "function") {
 62 |       els = els.toArray();
 63 |     }
 64 | 
 65 |     // Support passing a single el
 66 |     var elType = Object.prototype.toString.call(els);
 67 |     if (elType !== '[object Array]' && elType !== '[object NodeList]' &&
 68 |             elType !== '[object HTMLCollection]'){
 69 |       els = [els];
 70 |     }
 71 | 
 72 |     // Process each el we've passed.
 73 |     for(var i = 0; i < els.length; i++){
 74 |       processItem(els[i], settings);
 75 |     }
 76 |   };
 77 | 
 78 |   /**
 79 |    * The meat. Given an el, make the text inside it fit its parent.
 80 |    * @param  {DOMElement} el       Child el.
 81 |    * @param  {Object} settings     Options for fit.
 82 |    */
 83 |   function processItem(el, settings){
 84 |     if (!isElement(el) || (!settings.reProcess && el.getAttribute('textFitted'))) {
 85 |       return false;
 86 |     }
 87 | 
 88 |     // Set textFitted attribute so we know this was processed.
 89 |     if(!settings.reProcess){
 90 |       el.setAttribute('textFitted', 1);
 91 |     }
 92 | 
 93 |     var innerSpan, originalHeight, originalHTML, originalWidth;
 94 |     var low, mid, high;
 95 | 
 96 |     // Get element data.
 97 |     originalHTML = el.innerHTML;
 98 |     originalWidth = innerWidth(el);
 99 |     originalHeight = innerHeight(el);
100 | 
101 |     // Don't process if we can't find box dimensions
102 |     if (!originalWidth || (!settings.widthOnly && !originalHeight)) {
103 |       if(!settings.widthOnly)
104 |         throw new Error('Set a static height and width on the target element ' + el.outerHTML +
105 |           ' before using textFit!');
106 |       else
107 |         throw new Error('Set a static width on the target element ' + el.outerHTML +
108 |           ' before using textFit!');
109 |     }
110 | 
111 |     // Add textFitted span inside this container.
112 |     if (originalHTML.indexOf('textFitted') === -1) {
113 |       innerSpan = document.createElement('span');
114 |       innerSpan.className = 'textFitted';
115 |       // Inline block ensure it takes on the size of its contents, even if they are enclosed
116 |       // in other tags like <p>
117 |       innerSpan.style['display'] = 'inline-block';
118 |       innerSpan.innerHTML = originalHTML;
119 |       el.innerHTML = '';
120 |       el.appendChild(innerSpan);
121 |     } else {
122 |       // Reprocessing.
123 |       innerSpan = el.querySelector('span.textFitted');
124 |       // Remove vertical align if we're reprocessing.
125 |       if (hasClass(innerSpan, 'textFitAlignVert')){
126 |         innerSpan.className = innerSpan.className.replace('textFitAlignVert', '');
127 |         innerSpan.style['height'] = '';
128 |         el.className.replace('textFitAlignVertFlex', '');
129 |       }
130 |     }
131 | 
132 |     // Prepare & set alignment
133 |     if (settings.alignHoriz) {
134 |       el.style['text-align'] = 'center';
135 |       innerSpan.style['text-align'] = 'center';
136 |     }
137 | 
138 |     // Check if this string is multiple lines
139 |     // Not guaranteed to always work if you use wonky line-heights
140 |     var multiLine = settings.multiLine;
141 |     if (settings.detectMultiLine && !multiLine &&
142 |         innerSpan.getBoundingClientRect().height >= parseInt(window.getComputedStyle(innerSpan)['font-size'], 10) * 2){
143 |       multiLine = true;
144 |     }
145 | 
146 |     // If we're not treating this as a multiline string, don't let it wrap.
147 |     if (!multiLine) {
148 |       el.style['white-space'] = 'nowrap';
149 |     }
150 | 
151 |     low = settings.minFontSize;
152 |     high = settings.maxFontSize;
153 | 
154 |     // Binary search for highest best fit
155 |     var size = low;
156 |     while (low <= high) {
157 |       mid = (high + low) >> 1;
158 |       innerSpan.style.fontSize = mid + 'px';
159 |       var innerSpanBoundingClientRect = innerSpan.getBoundingClientRect();
160 |       if (
161 |         innerSpanBoundingClientRect.width <= originalWidth 
162 |         && (settings.widthOnly || innerSpanBoundingClientRect.height <= originalHeight)
163 |       ) {
164 |         size = mid;
165 |         low = mid + 1;
166 |       } else {
167 |         high = mid - 1;
168 |       }
169 |       // await injection point
170 |     }
171 |     // found, updating font if differs:
172 |     if( innerSpan.style.fontSize != size + 'px' ) innerSpan.style.fontSize = size + 'px';
173 | 
174 |     // Our height is finalized. If we are aligning vertically, set that up.
175 |     if (settings.alignVert) {
176 |       addStyleSheet();
177 |       var height = innerSpan.scrollHeight;
178 |       if (window.getComputedStyle(el)['position'] === "static"){
179 |         el.style['position'] = 'relative';
180 |       }
181 |       if (!hasClass(innerSpan, "textFitAlignVert")){
182 |         innerSpan.className = innerSpan.className + " textFitAlignVert";
183 |       }
184 |       innerSpan.style['height'] = height + "px";
185 |       if (settings.alignVertWithFlexbox && !hasClass(el, "textFitAlignVertFlex")) {
186 |         el.className = el.className + " textFitAlignVertFlex";
187 |       }
188 |     }
189 |   }
190 | 
191 |   // Calculate height without padding.
192 |   function innerHeight(el){
193 |     var style = window.getComputedStyle(el, null);
194 |     return el.getBoundingClientRect().height -
195 |       parseInt(style.getPropertyValue('padding-top'), 10) -
196 |       parseInt(style.getPropertyValue('padding-bottom'), 10);
197 |   }
198 | 
199 |   // Calculate width without padding.
200 |   function innerWidth(el){
201 |     var style = window.getComputedStyle(el, null);
202 |     return el.getBoundingClientRect().width -
203 |       parseInt(style.getPropertyValue('padding-left'), 10) -
204 |       parseInt(style.getPropertyValue('padding-right'), 10);
205 |   }
206 | 
207 |   //Returns true if it is a DOM element
208 |   function isElement(o){
209 |     return (
210 |       typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
211 |       o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string"
212 |     );
213 |   }
214 | 
215 |   function hasClass(element, cls) {
216 |     return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
217 |   }
218 | 
219 |   // Better than a stylesheet dependency
220 |   function addStyleSheet() {
221 |     if (document.getElementById("textFitStyleSheet")) return;
222 |     var style = [
223 |       ".textFitAlignVert{",
224 |         "position: absolute;",
225 |         "top: 0; right: 0; bottom: 0; left: 0;",
226 |         "margin: auto;",
227 |         "display: flex;",
228 |         "justify-content: center;",
229 |         "flex-direction: column;",
230 |       "}",
231 |       ".textFitAlignVertFlex{",
232 |         "display: flex;",
233 |       "}",
234 |       ".textFitAlignVertFlex .textFitAlignVert{",
235 |         "position: static;",
236 |       "}",].join("");
237 | 
238 |     var css = document.createElement("style");
239 |     css.type = "text/css";
240 |     css.id = "textFitStyleSheet";
241 |     css.innerHTML = style;
242 |     document.body.appendChild(css);
243 |   }
244 | }));
245 | 


--------------------------------------------------------------------------------
/textFit.min.js:
--------------------------------------------------------------------------------
1 | (function(root,factory){"use strict";if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof exports==="object"){module.exports=factory()}else{root.textFit=factory()}})(typeof global==="object"?global:this,function(){"use strict";var defaultSettings={alignVert:false,alignHoriz:false,multiLine:false,detectMultiLine:true,minFontSize:6,maxFontSize:80,reProcess:true,widthOnly:false,alignVertWithFlexbox:false};return function textFit(els,options){if(!options)options={};var settings={};for(var key in defaultSettings){if(options.hasOwnProperty(key)){settings[key]=options[key]}else{settings[key]=defaultSettings[key]}}if(typeof els.toArray==="function"){els=els.toArray()}var elType=Object.prototype.toString.call(els);if(elType!=="[object Array]"&&elType!=="[object NodeList]"&&elType!=="[object HTMLCollection]"){els=[els]}for(var i=0;i<els.length;i++){processItem(els[i],settings)}};function processItem(el,settings){if(!isElement(el)||!settings.reProcess&&el.getAttribute("textFitted")){return false}if(!settings.reProcess){el.setAttribute("textFitted",1)}var innerSpan,originalHeight,originalHTML,originalWidth;var low,mid,high;originalHTML=el.innerHTML;originalWidth=innerWidth(el);originalHeight=innerHeight(el);if(!originalWidth||!settings.widthOnly&&!originalHeight){if(!settings.widthOnly)throw new Error("Set a static height and width on the target element "+el.outerHTML+" before using textFit!");else throw new Error("Set a static width on the target element "+el.outerHTML+" before using textFit!")}if(originalHTML.indexOf("textFitted")===-1){innerSpan=document.createElement("span");innerSpan.className="textFitted";innerSpan.style["display"]="inline-block";innerSpan.innerHTML=originalHTML;el.innerHTML="";el.appendChild(innerSpan)}else{innerSpan=el.querySelector("span.textFitted");if(hasClass(innerSpan,"textFitAlignVert")){innerSpan.className=innerSpan.className.replace("textFitAlignVert","");innerSpan.style["height"]="";el.className.replace("textFitAlignVertFlex","")}}if(settings.alignHoriz){el.style["text-align"]="center";innerSpan.style["text-align"]="center"}var multiLine=settings.multiLine;if(settings.detectMultiLine&&!multiLine&&innerSpan.scrollHeight>=parseInt(window.getComputedStyle(innerSpan)["font-size"],10)*2){multiLine=true}if(!multiLine){el.style["white-space"]="nowrap"}low=settings.minFontSize;high=settings.maxFontSize;var size=low;while(low<=high){mid=high+low>>1;innerSpan.style.fontSize=mid+"px";if(innerSpan.scrollWidth<=originalWidth&&(settings.widthOnly||innerSpan.scrollHeight<=originalHeight)){size=mid;low=mid+1}else{high=mid-1}}if(innerSpan.style.fontSize!=size+"px")innerSpan.style.fontSize=size+"px";if(settings.alignVert){addStyleSheet();var height=innerSpan.scrollHeight;if(window.getComputedStyle(el)["position"]==="static"){el.style["position"]="relative"}if(!hasClass(innerSpan,"textFitAlignVert")){innerSpan.className=innerSpan.className+" textFitAlignVert"}innerSpan.style["height"]=height+"px";if(settings.alignVertWithFlexbox&&!hasClass(el,"textFitAlignVertFlex")){el.className=el.className+" textFitAlignVertFlex"}}}function innerHeight(el){var style=window.getComputedStyle(el,null);return el.clientHeight-parseInt(style.getPropertyValue("padding-top"),10)-parseInt(style.getPropertyValue("padding-bottom"),10)}function innerWidth(el){var style=window.getComputedStyle(el,null);return el.clientWidth-parseInt(style.getPropertyValue("padding-left"),10)-parseInt(style.getPropertyValue("padding-right"),10)}function isElement(o){return typeof HTMLElement==="object"?o instanceof HTMLElement:o&&typeof o==="object"&&o!==null&&o.nodeType===1&&typeof o.nodeName==="string"}function hasClass(element,cls){return(" "+element.className+" ").indexOf(" "+cls+" ")>-1}function addStyleSheet(){if(document.getElementById("textFitStyleSheet"))return;var style=[".textFitAlignVert{","position: absolute;","top: 0; right: 0; bottom: 0; left: 0;","margin: auto;","display: flex;","justify-content: center;","flex-direction: column;","}",".textFitAlignVertFlex{","display: flex;","}",".textFitAlignVertFlex .textFitAlignVert{","position: static;","}"].join("");var css=document.createElement("style");css.type="text/css";css.id="textFitStyleSheet";css.innerHTML=style;document.body.appendChild(css)}});
2 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
  1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  2 | # yarn lockfile v1
  3 | 
  4 | 
  5 | align-text@^0.1.1, align-text@^0.1.3:
  6 |   version "0.1.4"
  7 |   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
  8 |   integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
  9 |   dependencies:
 10 |     kind-of "^3.0.2"
 11 |     longest "^1.0.1"
 12 |     repeat-string "^1.5.2"
 13 | 
 14 | camelcase@^1.0.2:
 15 |   version "1.2.1"
 16 |   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
 17 |   integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
 18 | 
 19 | center-align@^0.1.1:
 20 |   version "0.1.3"
 21 |   resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
 22 |   integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
 23 |   dependencies:
 24 |     align-text "^0.1.3"
 25 |     lazy-cache "^1.0.3"
 26 | 
 27 | cliui@^2.1.0:
 28 |   version "2.1.0"
 29 |   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
 30 |   integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
 31 |   dependencies:
 32 |     center-align "^0.1.1"
 33 |     right-align "^0.1.1"
 34 |     wordwrap "0.0.2"
 35 | 
 36 | decamelize@^1.0.0:
 37 |   version "1.2.0"
 38 |   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 39 |   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 40 | 
 41 | is-buffer@^1.1.5:
 42 |   version "1.1.6"
 43 |   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
 44 |   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 45 | 
 46 | kind-of@^3.0.2:
 47 |   version "3.2.2"
 48 |   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
 49 |   integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
 50 |   dependencies:
 51 |     is-buffer "^1.1.5"
 52 | 
 53 | lazy-cache@^1.0.3:
 54 |   version "1.0.4"
 55 |   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
 56 |   integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
 57 | 
 58 | longest@^1.0.1:
 59 |   version "1.0.1"
 60 |   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 61 |   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 62 | 
 63 | repeat-string@^1.5.2:
 64 |   version "1.6.1"
 65 |   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
 66 |   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 67 | 
 68 | right-align@^0.1.1:
 69 |   version "0.1.3"
 70 |   resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
 71 |   integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
 72 |   dependencies:
 73 |     align-text "^0.1.1"
 74 | 
 75 | source-map@~0.5.1:
 76 |   version "0.5.7"
 77 |   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 78 |   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 79 | 
 80 | uglify-js@^2.4.17:
 81 |   version "2.8.29"
 82 |   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
 83 |   integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
 84 |   dependencies:
 85 |     source-map "~0.5.1"
 86 |     yargs "~3.10.0"
 87 |   optionalDependencies:
 88 |     uglify-to-browserify "~1.0.0"
 89 | 
 90 | uglify-to-browserify@~1.0.0:
 91 |   version "1.0.2"
 92 |   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 93 |   integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
 94 | 
 95 | window-size@0.1.0:
 96 |   version "0.1.0"
 97 |   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
 98 |   integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
 99 | 
100 | wordwrap@0.0.2:
101 |   version "0.0.2"
102 |   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
103 |   integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
104 | 
105 | yargs@~3.10.0:
106 |   version "3.10.0"
107 |   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
108 |   integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
109 |   dependencies:
110 |     camelcase "^1.0.2"
111 |     cliui "^2.1.0"
112 |     decamelize "^1.0.0"
113 |     window-size "0.1.0"
114 | 


--------------------------------------------------------------------------------