<commit_before>Kerning Playground
==================

Try it: [http://kerning.nevisite.com]
-------------------------------------

CMS Integration
---------------

You can integrate the basic kerning functionality into a CMS with a simple div and the ./js/kerningfield.js.
- select a letter and press the ARROW or WASD keys (whit SHIFT)
- double click on the text and change it (ENTER,ESC,SHIFT+ENTER)

Example:

	// goes to the CMS admin page
	<div id="Text">Kerning</div>

	
	// This will take care all of kerning stuff
	// Second parameter true if you want use vertical 'kerning'
	var field = new KerningField($('#Text')[0], false); 

	// Get and save the dom string.
	// Next time the KerningField will parse the optimazed dom string
	var domOutput = field.getDOMString(true);



	// goes to the live page ( this is the domOutput )
	<div class="kerned">
		<span class="ls_-1">K</span>
		<span>er</span>
		<span class="ls_-4">nin</span>
		<span>g</span>
	</div>


	// stylesheet
	.ls_-4 { letter-spacing: -4px}  
	.ls_-3 { letter-spacing: -3px}  
	.ls_-2 { letter-spacing: -2px} 
	.ls_-1 { letter-spacing: -1px}
	.ls_1 { letter-spacing: 1px}
	.ls_2 { letter-spacing: 2px}
	.ls_3 { letter-spacing: 3px}
	.ls_4 { letter-spacing: 4px}

I made with jQuery, but the KerningField only use it for event handling, so you can easily change to other library.

Roadmap
-------
- Mobil device support
- maybe support IE 8, IE7...<commit_msg>Readme update<commit_after>Kerning Playground
==================

[Try it: kerning.nevisite.com](http://kerning.nevisite.com)
-------------------------------------

CMS Integration
---------------

You can integrate the basic kerning functionality into a CMS with a simple div and the ./js/kerningfield.js.
- select a letter and press the ARROW or WASD keys (whit SHIFT)
- double click on the text and change it (ENTER,ESC,SHIFT+ENTER)

Example:

goes to the CMS admin page:
```html
<div id="Text">Kerning</div>
```

```javascript
// This will take care all of kerning stuff
// Second parameter true if you want use vertical 'kerning'
var field = new KerningField($('#Text')[0], false); 

// Get and save the dom string.
// Next time the KerningField will parse the optimazed dom string
var domOutput = field.getDOMString(true);
```

goes to the live page (from the domOutput):
```html
<div class="kerned">
	<span class="ls_-1">K</span>
	<span>er</span>
	<span class="ls_-4">nin</span>
	<span>g</span>
</div>
```
goes to the live page (manually setup some case...):
```css
.ls_-4 { letter-spacing: -4px}  
.ls_-3 { letter-spacing: -3px}  
.ls_-2 { letter-spacing: -2px} 
.ls_-1 { letter-spacing: -1px}
.ls_1 { letter-spacing: 1px}
.ls_2 { letter-spacing: 2px}
.ls_3 { letter-spacing: 3px}
.ls_4 { letter-spacing: 4px}
```

I made with jQuery, but the KerningField only use it for event handling, so you can easily change to other library.

Roadmap
-------
- Mobil device support
- maybe support IE 8, IE7...
{'fraction_non_alphanumeric': 0.17420891459680163, 'fraction_numerical': 0.014290575025518884, 'mean_word_length': 3.100418410041841, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4961165', 'n_tokens_mistral': 1031, 'n_tokens_neox': 962, 'n_words': 347}