Optionally preserve line height

README.md

@@ -28,6 +28,10 @@ The FitText directive will also watch the `ng-model` placed on the element, so g
 
 The `data-fittext-max=""` and `data-fittext-min=""` attributes respectfully limit the font size. This can also be set globally in the `fitTextConfigProvider` via `min` and `max`.
 
+#### Preserving line height
+
+The `data-fittext-preserve-line-height` attribute gets the `line-height` set to the original `font-size` value once the resizing has happened. This can also be set globally in the `fitTextConfigProvider` via `preserveLineHeight`.
+
 #### New lines
 
 To make use of new lines within a single FitText block you will need to use the `data-fittext-nl` attribute on each line wrapper. See the demo page for an example.

demo/js/demo.js

@@ -13,6 +13,14 @@
     }])
     .controller('MainController', ['$scope', function($scope) {
       $scope.dyn = 'FitText';
+      $scope.isActivePreserveLineHeight = true;
+
+      $scope.togglePreserveLineHeight = function () {
+        if ( $scope.isActivePreserveLineHeight === true )
+          $scope.isActivePreserveLineHeight = false;
+        else
+          $scope.isActivePreserveLineHeight = true;
+      };
     }]);
 
 })(window, document, angular);

demo/styles/main.css

@@ -108,3 +108,41 @@ body {
       display: block; }
       .page code span span {
         margin-left: 20px; }
+
+#plh-container {
+  width: 100%;
+  float: left;
+  margin-bottom: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  border-top: 2px solid #999;
+  border-bottom: 2px solid #999; }
+  #plh-container h3 {
+    font-size: 50px;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    line-height: 1.5; }
+  #plh-container p {
+    text-transform: uppercase; }
+
+#plh-left {
+  width: 44%;
+  float: left; }
+
+#plh-right {
+  margin-left: 56%;
+  width: 44%; }
+
+#plh-toggle {
+  padding: 1em; }
+
+.cf:before,
+.cf:after {
+  content: " ";
+  /* 1 */
+  display: table;
+  /* 2 */ }
+
+.cf:after {
+  clear: both; }

demo/styles/main.scss

@@ -158,4 +158,51 @@ body {
       }
     }
   }
+}
+
+#plh-container {
+  width: 100%;
+  float: left;
+  margin-bottom: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  border-top: 2px solid #999;
+  border-bottom: 2px solid #999;
+
+  h3 {
+    font-size: 50px;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    line-height: 1.5;
+  }
+
+  p {
+    text-transform: uppercase;
+  }
+}
+
+#plh-left {
+  width: 44%;
+  float: left;
+}
+
+#plh-right {
+  margin-left: 56%;
+  width: 44%;
+}
+
+#plh-toggle {
+  padding: 1em;
+}
+
+// Micro clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
+.cf:before,
+.cf:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.cf:after {
+    clear: both;
 }

index.html

@@ -23,7 +23,7 @@
 
 <div class="page">
 
-  <header data-ng-controller="MainController">
+  <header data-ng-controller="MainController" class="cf">
     <input type="text" data-ng-model="dyn" autofocus />
     <h1>
       <span class="line1" data-fittext data-fittext-min="100" data-fittext-max="310" data-ng-model="dyn">{{dyn}}</span>
@@ -37,6 +37,20 @@ <h1>
     <h2>ng-FitText.js makes font-sizes flexible. Use this directive in your fluid or responsive layout to achieve
       scalable headlines that fill the width of a parent element.</h2>
 
+    <div id="plh-container">
+      <div id="plh-left">
+        <h3 ng-if="isActivePreserveLineHeight" data-fittext data-fittext-preserve-line-height>And if you just happen</h3>
+        <h3 ng-if="!isActivePreserveLineHeight" data-fittext>And if you just happen</h3>
+        <p>to need the line-height preserved</p>
+      </div>
+      <div id="plh-right">
+        <h3 ng-if="isActivePreserveLineHeight" data-fittext data-fittext-preserve-line-height>ng-FitText.js can do that too, at the same price</h3>
+        <h3 ng-if="!isActivePreserveLineHeight" data-fittext>ng-FitText.js can do that too, at the same price</h3>
+        <p>spoiler: it's free</p>
+      </div>
+    </div>
+    <p><button id="plh-toggle" ng-click="togglePreserveLineHeight()">Toggle line-height preservation</button></p>
+
   </header>
 
   <div id="content">

src/ng-FitText.js

@@ -20,7 +20,8 @@
       'delay': 250,
       'loadDelay': 10,
       'min': undefined,
-      'max': undefined
+      'max': undefined,
+      'preserveLineHeight': undefined
     })
 
     .directive('fittext', ['$timeout', 'config', 'fitTextConfig', function($timeout, config, fitTextConfig) {
@@ -31,16 +32,18 @@
           angular.extend(config, fitTextConfig.config);
 
           element[0].style.display = 'inline-block';
-          element[0].style.lineHeight = '1';
 
           var parent = element.parent();
           var compressor = attrs.fittext || 1;
           var loadDelay = attrs.fittextLoadDelay || config.loadDelay;
           var nl = element[0].querySelectorAll('[fittext-nl],[data-fittext-nl]').length || 1;
           var minFontSize = attrs.fittextMin || config.min || Number.NEGATIVE_INFINITY;
           var maxFontSize = attrs.fittextMax || config.max || Number.POSITIVE_INFINITY;
+          var preserveLineHeight = attrs.fittextPreserveLineHeight !== undefined ? attrs.fittextPreserveLineHeight : config.preserveLineHeight;
+          var originalLineHeight = window.getComputedStyle(element[0],null).getPropertyValue('line-height');
 
           var resizer = function() {
+            element[0].style.lineHeight = '1';
             element[0].style.fontSize = '10px';
             var ratio = element[0].offsetHeight / element[0].offsetWidth / nl;
             element[0].style.fontSize = Math.max(
@@ -49,6 +52,9 @@
               ),
               parseFloat(minFontSize)
             ) + 'px';
+            if ( preserveLineHeight !== undefined ) {
+              element[0].style.lineHeight = originalLineHeight;
+            }
           };
 
           $timeout( function() { resizer() }, loadDelay);
@@ -73,4 +79,4 @@
       return this;
     });
 
-})(window, document, angular);
+})(window, document, angular);