diff --git a/README.md b/README.md index 7067467..e055f1d 100644 --- a/README.md +++ b/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. diff --git a/demo/js/demo.js b/demo/js/demo.js index c1db486..0f9c256 100644 --- a/demo/js/demo.js +++ b/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); diff --git a/demo/styles/main.css b/demo/styles/main.css index 3dacab7..d656ee2 100644 --- a/demo/styles/main.css +++ b/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; } diff --git a/demo/styles/main.scss b/demo/styles/main.scss index 1a2bc97..4492f26 100644 --- a/demo/styles/main.scss +++ b/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; } \ No newline at end of file diff --git a/index.html b/index.html index 3c71864..a0c7065 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@
-
+

{{dyn}} @@ -37,6 +37,20 @@

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.

+
+
+

And if you just happen

+

And if you just happen

+

to need the line-height preserved

+
+
+

ng-FitText.js can do that too, at the same price

+

ng-FitText.js can do that too, at the same price

+

spoiler: it's free

+
+
+

+
diff --git a/src/ng-FitText.js b/src/ng-FitText.js index 70f19b1..6ae0f67 100644 --- a/src/ng-FitText.js +++ b/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,7 +32,6 @@ 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; @@ -39,14 +39,18 @@ 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() { + if ( element[0].offsetHeight * element[0].offsetWidth === 0 ) { // Skip setting the font size if the element height or width // have been set to 0 (or auto) for any reason. return; } + 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( @@ -55,6 +59,9 @@ ), parseFloat(minFontSize) ) + 'px'; + if ( preserveLineHeight !== undefined ) { + element[0].style.lineHeight = originalLineHeight; + } }; $timeout( function() { resizer() }, loadDelay); @@ -79,4 +86,4 @@ return this; }); -})(window, document, angular); \ No newline at end of file +})(window, document, angular);