diff --git a/README.md b/README.md
index f6a79b3..904e4ed 100644
--- a/README.md
+++ b/README.md
@@ -1,80 +1,91 @@
# ng2-fittext
-An Angular2 directive written in pure typescript (and without jquery!), to autoscale the font size of an element so that it fits an upper level container.
+An Angular 2+ directive, written in pure TypeScript (without jQuery!), to automatically scale the font size of an element so that it fits within its parent container.
-### Demo
+## Demo
-http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview
+Check out the live demo: [ng2-fittext Demo](http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview)
-### Installation
+## Installation
-Install the library
+Install the library using npm:
-```sh
+```
$ npm install --save ng2-fittext
```
### Usage
-1. Declare it in your module
- ```sh
- import {Ng2FittextModule} from "ng2-fittext";
- @NgModule({
- imports: [
- Ng2FittextModule
- ]
- })
- ```
-2. Use it in your components
- ```sh
- import {Component} from '@angular/core';
- @Component({
- selector: 'label',
- template: `
-
Bla bla bla...
-
`
- })
- export class LabelComponent {}
- ```
+1. Import the module in your Angular application:
+```
+import { Ng2FittextModule } from "ng2-fittext";
-### Examples
+@NgModule({
+ imports: [Ng2FittextModule]
+})
+```
-Fit to the parent element (this works if you have a variable number of elements between your element and its parent)
+2. Use the directive in your components:
+```
+import { Component } from '@angular/core';
-```sh
-import {Component} from '@angular/core';
@Component({
selector: 'label',
- template: `
-
Bla bla bla...
-
`
+ template: `
+
+
Bla bla bla...
+
+ `
})
export class LabelComponent {}
```
-**NEW! Support for autoresize input box!**
+### Examples
+
+Fit to the parent element (works if you have a variable number of elements between your element and its parent):
+
+```
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'label',
+ template: `
+
+
Bla bla bla...
+
+ `
+})
+export class LabelComponent {}
+```
+
+**NEW! Support for auto-resize input box:**
+
+```
+import { Component } from '@angular/core';
-```sh
-import {Component} from '@angular/core';
@Component({
selector: 'inputbox',
- template: `
- `,
-
`
+ template: `
+
+
+
+ `
})
-
export class InputBoxComponent {}
```
-**NEW! Support for maxFontSize!**
+**NEW! Support for maxFontSize:**
+
+```
+import { Component } from '@angular/core';
-```sh
-import {Component} from '@angular/core';
@Component({
selector: 'inputbox',
- template: `
- `,
-
`
+ template: `
+
+
+
+ `
})
export class InputBoxComponent {}
```
@@ -83,33 +94,33 @@ Input Parameters:
| Parameter | Description | Values |
| ------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------- |
-| fittext | the directive selector | true/false |
-| container | the container to fit (if not present it fits to the parent container by default) | ElementRef |
-| activateOnResize | enable/disable the autofit in case of window resize | true or false (default false) |
-| activateOnInputEvents | enable/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false) |
-| maxFontSize | maximum font size | number, default is 1000 |
-| **!deprecated!** useMaxFontSize | use max font size if is true | deprecated! |
-| minFontSize | minimum font size | number, default is 7 |
-| modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated | any type of model |
+| fittext | Directive selector | true/false |
+| container | The container to fit (if not present it fits to the parent container by default) | ElementRef |
+| activateOnResize | Enable/disable the autofit on window resize | true or false (default false) |
+| activateOnInputEvents | Enable/disable the auto-fit in case of input box events (keydown, keyup etc..) | true or false (default false) |
+| maxFontSize | Maximum font size | Number (default is 1000) |
+| **!deprecated!** useMaxFontSize | Use max font size if is true | Deprecated! |
+| minFontSize | Minimum font size | Number (default is 7) |
+| modelToWatch | Pass model to watch; when this model changes, font size is automatically recalculated | Any type of model |
Output Parameters:
| Parameter | Description | Values |
| --------------- | ----------------- | ------ |
-| fontSizeChanged | current font size | string |
+| fontSizeChanged | Current font size | string |
### Development
Want to contribute? Great!
Simply, clone the repository!
-I created this library because I always spent too much time to solve this problem and didn't find anything on the web (13/03/2017) that does this without jquery and that is also easily integrable in angular2.
-For sure it is not the best implementation, maybe is not the best way to do it, but, it gets the job done.
+I created this library because I always spent too much time solving this problem and didn't find anything on the web (as of 13/03/2017) that does this without jQuery and is easily integrable in Angular 2+.
+While it might not be the best implementation, it gets the job done.
### Todos
- Write tests
-- Find a better algorithm to find the font-size who fits better the container
+- Find a performant algorithm to find the font size that fits the container better
## License