docs: update readme

README.md

@@ -6,23 +6,23 @@ SplitType is a small javascript library that splits HTML text into elements so t
 
 Under the hood, SplitType changes the html structure of the target elements, wrapping each line, word, and/or character in a element.
 
-- [Supported Browsers](#supported-browsers)
 - [Features](#features)
+- [Supported Browsers](#supported-browsers)
 - [Installation](#installation)
 - [Usage](#usage)
+  - [Splitting Text](#splitting-text)
+  - [The types option](#the-types-option)
+  - [Accessing split text nodes](#accessing-split-text-nodes)
+  - [Reverting Split Text](#reverting-split-text)
+  - [Nested Elements](#nested-elements)
+  - [Absolute vs Relative position](#absolute-vs-relative-position)
+  - [Responsive Text](#responsive-text)
 - [API Reference](#api-reference)
+  - [SplitType(target, [options])](#splittypetarget-options)
+  - [Instance Properties](#instance-properties)
+  - [Static Properties](#static-properties)
 - [Examples](#examples)
 
-## Supported Browsers
-
-Should work in all modern browsers. Internet Explorer is no longer supported (if IE support is important to you, please post a comment [here](https://github.com/lukePeavey/SplitType/issues/29).
-
-- ✅ Chrome
-- ✅ Firefox
-- ✅ Edge
-- ✅ Safari
-- ❌ Internet Explorer
-
 ## Features
 
 - Splits text into lines, words, and/or characters
@@ -32,6 +32,16 @@ Should work in all modern browsers. Internet Explorer is no longer supported (if
 - Preserves nested HTML elements inside the target elements
 - Supports unicode symbols such as emojis
 
+## Supported Browsers
+
+SplitType works in all modern browsers. Internet Explorer is [no longer supported](https://github.com/lukePeavey/SplitType/issues/29).
+
+- ✅ Chrome
+- ✅ Firefox
+- ✅ Edge
+- ✅ Safari
+- ❌ Internet Explorer
+
 ## Installation
 
 **Yarn/NPM**
@@ -48,7 +58,7 @@ import SplitType from 'split-type'
 
 **CDN**
 
-Or, include the following `<script>` tag to load SplitType from a CDN. In this case, the `SplitType` class will be attached to `window` object.
+Or, include the following `<script>` tag to load SplitType from a CDN.
 
 ```html
 <!-- Minified UMD bundle -->
@@ -57,22 +67,38 @@ Or, include the following `<script>` tag to load SplitType from a CDN. In this c
 
 ## Usage
 
-The SplitType class "splits" the text content of the target elements using the provided options. It returns a `SplitType` instance which provides access to the split text nodes.
+### Splitting Text
+
+The SplitType class "splits" the text content of the target elements using the provided options. It returns a `SplitType` instance which provides access to the split text nodes. By default, text will be split into lines, words, and characters, using relative position.
+
+Because SplitType is a class, it cannot be called without the `new` keyword. As an alternative, you can use the static method `SplitType.create().`
 
 ```js
 const text = new SplitType('#target')
+// or
+const text = SplitType.create('#target')
+
+// Array of line elements
+text.lines
+// Array of word elements
+text.words
+// Array of character elements
+text.chars
 ```
 
-You can also use the static method `SplitType.create`, which allows you to create a splitType instance without using the `new` keyword.
+**Important: The following style should be applied to all target elements.** This prevents the characters from shifting slightly when text is split/reverted.
 
-```js
-// Creates a new SplitType instance
-const text = SplitType.create('.target')
+```css
+.target {
+  font-kerning: none;
+}
 ```
 
-**Types**
+Also, if the target elements are inside a flex container, they need to have a defined `width` to prevent the text from moving when it gets split.
 
-The `types` option lets you specify which units the text will be broken up into. There are three types: lines, words, and characters. You can specify any combination of these types.
+### The types option
+
+The `types` option lets you specify which units the text will be broken up into. There are three types: lines, words, and characters. You can specify any combination of these types. However, splitting text into only characters is not recommended. To maintain normal line breaks, you need to include words and/or lines.
 
 ```js
 // Splits text into lines, words, characters (default)
@@ -83,7 +109,7 @@ const text = new SplitType('#target', { types: 'words, chars' })
 const text = new SplitType('#target', { types: 'words' }
 ```
 
-**Accessing split text nodes**
+### Accessing split text nodes
 
 You can access the split lines/words/characters via properties on the `SplitType` instance.
 
@@ -99,14 +125,30 @@ console.log(text.words)
 console.log(text.chars)
 ```
 
-Or using selectors
+You can also use selectors to access split text elements
 
 ```js
 const text = new SplitType('#target')
 const words = document.querySelectorAll('#target .word')
 ```
 
-**Nested Elements**
+### Reverting Split Text
+
+The revert method will restore the target element(s) to their original html content. It also removes all data associated with the target elements from SplitType's internal data store. It is recommended to revert split text once it is no longer needed (for example at the end of an animation, or before the component is unmounted).
+
+Text can be reverted using the instance method:
+
+```js
+instance.revert()
+```
+
+Or using the static method, and specify the target elements to revert.
+
+```js
+SplitType.revert('#target')
+```
+
+### Nested Elements
 
 As of `v0.3`, nested elements inside the target elements will be preserved when text is split. This makes it possible to:
 
@@ -144,13 +186,13 @@ Result
 
 Caveat: this feature is not compatible with splitting text into lines. When split lines is enabled, if the text content of a nested element gets broken onto multiple lines, it will result in unexpected line breaks in the split text.
 
-**Absolute vs Relative position**
+### Absolute vs Relative position
 
 By default, split text nodes are set to relative position and `display:inline-block`. SplitType also supports absolute position for split text nodes by setting `{ absolute: true }`. When this is enabled, each line/word/character will be set to absolute position, which can improve performance for some animations.
 
-**Responsive Text**
+### Responsive Text
 
-When text is split into words and characters using relative position, the text will automatically reflow when the container is resized. However, when absolute position is enabled, or text is split into lines, text will need to re-split after the container is resized. This can be accomplished using an event listener or `ResizeObserver`, and calling the `split` method once the window or container element has been resized.
+When text is split into words and characters using relative position, the text will automatically reflow when the container is resized. However, when absolute position is enabled, or text is split into lines (default), the text will not reflow naturally if the viewport is resized. In this case, you will need to re-split text after the container is resized. This can be accomplished using an event listener or ResizeObserver and calling `instance.split()` after the container has been resized.
 
 For a complete example, see [`__stories__/components/Example.svelte`](https://github.com/lukePeavey/SplitType/blob/master/__stories__/components/Example.svelte)
 
@@ -174,6 +216,8 @@ resizeObserver.observe(containerElement)
 
 ### SplitType(target, [options])
 
+SplitType is a class, so it cannot be called without the `new` keyword. However, you can use the static method `SplitType.create`
+
 **`target`**
 
 The target elements for the SplitType call. This can be a selector, a single element, a collection of elements (ie NodeList, jQuery Object, etc).
@@ -195,45 +239,49 @@ The target elements for the SplitType call. This can be a selector, a single ele
 
 ### Instance Properties
 
-**`instance.lines: HTMLElement[]`**
+`get` **`instance.lines`** &nbsp;:&nbsp; `HTMLElement[]`
 
 An array of the split line elements in the splitType instance
 
-**`instance.words: HTMLElement[]`**
+`get` **`instance.words`** &nbsp;:&nbsp; `HTMLElement[]`
 
 An array of the split word elements in the splitType instance
 
-**`instance.chars: HTMLElement[]`**
+`get` **`instance.chars`** &nbsp;:&nbsp; `HTMLElement[]`
 
 An array of the split character elements
 
-### Instance Methods
+`get` **`instance.settings`** &nbsp;:&nbsp; `SplitTypeOptions`
 
-**`instance.split(options): void`**
+The settings for this splitType instance.
 
-This method is automatically called by the SplitType constructor. But it can be called manually to re-split text using different options.
+`get` **`instance.isSplit`** &nbsp;:&nbsp; `boolean`
 
-**`instance.revert(): void`**
+Indicates if the target elements are currently split
 
-Restores the target elements associated with this SplitType instance to their original text content. It also clears cached data associated with the split text nodes.
+`method` **`instance.split(options)`** &nbsp; `=> void`
+
+The split method is called automatically when a new SplitType instance is created. It can be called manually to re-split the target elements. By default it will use the same options that were passed to the constructor when the instance was created. You can also provide new options. This method is useful when you need to re-split text after the browser or container element has been re-sized.
+
+`method` **`instance.revert()`** &nbsp; `=> void`
+
+Restores the target elements to their original html content. It also removes data associated with the target elements from SplitTypes internal data store.
 
 ### Static Properties
 
-**`SplitType.defaults`**
+`get` **`SplitType.defaults`**&nbsp;:&nbsp;`{SplitTypeOptions}`
 
 Gets the current default settings for all SplitType instances. The default settings can be modified using the `setDefaults` methods.
 
-### Static Methods
-
-**`SplitType.setDefaults(options: any)`**
+`method` **`SplitType.setDefaults(options: any)`** &nbsp;`=> SplitTypeOptions`
 
 Sets the default options for all `SplitType` instances. **The provided object will be merged with the existing `SplitType.defaults` object**. Returns the new defaults object.
 
-**`SplitType.create(target, options)`**
+`method` **`SplitType.create(target, options)`** &nbsp;`=> SplitType`
 
 Creates a new `SplitType` instance using the provided parameters. This method can be used to call SplitType without using the `new` keyword.
 
-**`SplitType.revert(target)`**
+`method` **`SplitType.revert(target)`** &nbsp;`=> void`
 
 Reverts the target element(s) if they are currently split. This provides a way to revert split text without a reference to the `SplitType` instance.