#jQuery-LetterType

jQuery-lettertype is a simple jquery-plugin that will justify (left and right allign) words in a div

##How to use it ###step 1 - add dependencies

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/js/jquery-letterjustify.js"></script>

###Step 2 - create div to be justified, tag it with class or id

<div style="width: 100px" class="letter-justify">
LetterJustify did justify this text!
</div>

In this case we tag the element to justify with the class "letter-justify" ###Step 3 - activate jquery-lettertype on those elements So jQuery will find them by using the selector '.letter-justify':

<script type="text/javascript">
    $(function(){ $('.letter-justify').letterjustify(); });
</script>

##Credits To designer Marja Van De Ven for the genious (altough non HTML-ready) design that needed this.

And to the push into the right direction from this Q+A on StackOverflow.

##How to tune it (and get some understaning of the inner working) ###avoid split: glue words with   The justify-process will split on word-boundaries as recognised through whitespace. If you don't want words to be separated, you can glue them with   like you would do in normal html

<div style="width: 100px" class="letter-justify">LetterJustify will&nbsp;keep&nbsp;these together but simply split these</div>

###add emphasis through <em> or * (asterisk) If you want to put emphasis on certain words in the text, you can mark them with * (asterisk) or <em> (html emphasis) tags.

<div style="width: 100px" class="letter-justify">LetterJustify will apply *emphasis* if you wish</div>

###use configuration options ####Activate options through js When calling the $.letterjustify() you can pass an options object as argument to control how the justification will be applied. These will overwrite the defaults.

  var options = { "emph" : "off" };
  $(function(){ $('.letter-justify').letterjustify( options ); });

####Activate options through data-letterjustify-config Additionally you can apply a data-letter-justify attribute to the element to be letter-justified. These work only for that specific element and will further overwrite both defaults and passed down custom options.

<div style="width: 100px" class="letter-justify"
    data-letter-justify='{"case": "upper"}'>Text Here</div>  

####options.case = "keep" (default) | "upper" | "lower" This options alters the 'case' of the text before justification.

####options.break = "smart" (default) | "word" This options alters how the word-breaking will apply.

• word: split each word to occupay its own line
• smart: combine smaller words on one line if they fit

Note: glued words with &nbsp; will never be broken down

Note: the current 'smart' mode could probably made even smarter: suggestions (and examples) welcome.

####options.keep = "basic" (default) | "all"

LetterJustify will filter out all strange stuff from the content to justify. This options alters which letters in the text are kept.

• basic: only this strict set of alphanumeric glyphs will be displayed: a-z, A-Z, 0-9 (Oh, and in some way emphasis markers, space or &nbsp; of course)
• all: no filtering will be done

####options.emph = "on" (default) | "off"

This enables or disables the emphasis-support. Just in case you don't like it to be creaping in.

####options.lineScaling = 0.60 (default) | your own 'double' value

This option controls how lines are scaled: bigger values will give more whitespace between the lines.

####options.widthScaling = 0.75 (default) | your own 'double' value

This option controls how the width of the text is scaled to fit the width of the surounding box. Smaller values give more whitespace between the individual letters.

####options.maxScaleRatio = 2 (default) | your own 'double' value

This option sets a maximum to the scale-ratio applied to make the width of the text fit the width of the surounding box.

####options.minScaleRatio = 0.5 (default) | your own 'double' value

This option sets a minimum to the scale-ratio applied to make the width of the text fit the width of the surounding box.