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 @@
to need the line-height preserved
+spoiler: it's free
+