diff --git a/README.md b/README.md index 4eff5d9..4882404 100644 --- a/README.md +++ b/README.md @@ -174,6 +174,7 @@ settings = { maxFontSize: 80, reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance widthOnly: false, // if true, textFit will fit text to element width, regardless of text height + heightOnly: false, // if true, textFit will fit text to element height, regardless of text width alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment }; ``` diff --git a/index.d.ts b/index.d.ts index 94fc528..35ce297 100644 --- a/index.d.ts +++ b/index.d.ts @@ -11,6 +11,7 @@ declare module "textfit" { maxFontSize?: number; reProcess?: boolean; widthOnly?: boolean; + heightOnly?: boolean; alignVertWithFlexbox?: boolean; } diff --git a/textFit.js b/textFit.js index 1bd0cf9..9600373 100644 --- a/textFit.js +++ b/textFit.js @@ -40,6 +40,7 @@ maxFontSize: 80, reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance widthOnly: false, // if true, textFit will fit text to element width, regardless of text height + heightOnly: false, // if true, textFit will fit text to element height, regardless of text width alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment }; @@ -99,13 +100,16 @@ originalHeight = innerHeight(el); // Don't process if we can't find box dimensions - if (!originalWidth || (!settings.widthOnly && !originalHeight)) { - if(!settings.widthOnly) + if ((!settings.heightOnly && !originalWidth) || (!settings.widthOnly && !originalHeight)) { + if(!settings.widthOnly && !settings.heightOnly) throw new Error('Set a static height and width on the target element ' + el.outerHTML + ' before using textFit!'); - else + else if (!settings.heightOnly) throw new Error('Set a static width on the target element ' + el.outerHTML + ' before using textFit!'); + else if (!settings.widthOnly) + throw new Error('Set a static height on the target element ' + el.outerHTML + + ' before using textFit!'); } // Add textFitted span inside this container. @@ -158,8 +162,8 @@ innerSpan.style.fontSize = mid + 'px'; var innerSpanBoundingClientRect = innerSpan.getBoundingClientRect(); if ( - innerSpanBoundingClientRect.width <= originalWidth - && (settings.widthOnly || innerSpanBoundingClientRect.height <= originalHeight) + (settings.heightOnly || innerSpanBoundingClientRect.width <= originalWidth) + && (settings.widthOnly || innerSpanBoundingClientRect.height <= originalHeight) ) { size = mid; low = mid + 1; diff --git a/textFit.min.js b/textFit.min.js index d2af16d..f280263 100644 --- a/textFit.min.js +++ b/textFit.min.js @@ -1 +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=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)}}); +(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,heightOnly: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=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";var innerSpanBoundingClientRect=innerSpan.getBoundingClientRect();if((settings.heightOnly||innerSpanBoundingClientRect.width<=originalWidth)&&(settings.widthOnly||innerSpanBoundingClientRect.height<=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.getBoundingClientRect().height-parseInt(style.getPropertyValue("padding-top"),10)-parseInt(style.getPropertyValue("padding-bottom"),10)}function innerWidth(el){var style=window.getComputedStyle(el,null);return el.getBoundingClientRect().width-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)}});