updated minified file. v 0.3.2

Fixed bug with numeric value of font-weight

.gitignore

@@ -1,2 +1,2 @@
 .idea/
-node_modules/
+node_modules/

.npmignore

@@ -0,0 +1,3 @@
+node_modules
+examples
+bower.json

CanvasTextWrapper.js

@@ -0,0 +1,288 @@
+/*! CanvasTextWrapper
+ *  https://github.com/namniak/CanvasTextWrapper
+ *  Version:  0.3.0
+ *  MIT License (http://www.opensource.org/licenses/mit-license.html)
+ *  Copyright (c) 2014 Vadim Namniak
+ */
+
+(function() {
+	'use strict';
+
+	var EL_WIDTH,EL_HEIGHT,MAX_TXT_WIDTH,MAX_TXT_HEIGHT;
+
+	var defaults = {
+		font: '18px Arial, sans-serif',
+		sizeToFill: false,      // text is resized to fill the container (given font size is ignored)
+		lineHeight: 1,          // default line height equivalent of '100%'
+		allowNewLine: true,     // breaks text on every new line character '\n'
+		lineBreak: 'auto',      // text fills the element's (canvas or parent) width going to a new line on a whole word
+		textAlign: 'left',      // each line of text is aligned left
+		verticalAlign: 'top',   // text lines block is aligned top
+		justifyLines: false,    // lines are not justified
+		paddingX: 0,            // 0px left & right text padding relatively to canvas or its container
+		paddingY: 0,            // 0px top & bottom text padding relatively to canvas or its container
+		fitParent: false,       // text is set to fit canvas width
+		strokeText: false       // text is stroked according to context configuration
+	};
+
+	var CanvasTextWrapper = function(canvas,text,options) {
+		if (!(this instanceof CanvasTextWrapper)) {
+			return new CanvasTextWrapper(canvas,text,options);
+		}
+
+		this.canvas = canvas;
+		this.text = text;
+		this.context = this.canvas.getContext('2d');
+		this.context.font = this.font;
+		this.context.textBaseline = 'bottom';
+
+		for (var property in defaults) {
+			if (defaults.hasOwnProperty(property)) {
+				this[property] = (options && options[property]) ? options[property] : defaults[property];
+			}
+		}
+
+		EL_WIDTH = (this.fitParent === false) ? this.canvas.width : this.canvas.parentNode.clientWidth;
+		EL_HEIGHT = (this.fitParent === false) ? this.canvas.height : this.canvas.parentNode.clientHeight;
+		MAX_TXT_WIDTH = EL_WIDTH - (this.paddingX * 2);
+		MAX_TXT_HEIGHT = EL_HEIGHT - (this.paddingY * 2);
+
+		this._init();
+	};
+
+	CanvasTextWrapper.prototype = {
+		_init: function() {
+			/* Substituting this line that causing a bug with font-weight numeric values	*/
+			//this.fontSize = parseInt(this.font.replace(/^\D+/g,''),10) || 18;
+
+			/* This line allow font values like : "italic 500 25px" to preserve both numeric a literal value of font-weight*/
+			this.fontSize = this.font.match(/\d+(px|em|\%)/g) ? +this.font.match(/\d+(px|em|\%)/g)[0].match(/\d+/g) : 18;
+
+			this.textBlockHeight = 0;
+			this.lines = [];
+			this.newLineIndexes = [];
+			this.textPos = {x: 0,y: 0};
+
+			this._setFont(this.fontSize);
+			this._setLineHeight();
+			this._validate();
+			this._render();
+		},
+
+		_render: function() {
+			if (this.sizeToFill) {
+				var numWords = this.text.trim().split(/\s+/).length;
+				var fontSize = 0;
+
+				do {
+					this._setFont(++fontSize);
+					this.lineHeight = this.fontSize;
+					this._wrap();
+				} while (this.textBlockHeight < MAX_TXT_HEIGHT && (this.lines.join(' ').split(/\s+/).length == numWords));
+
+				this._setFont(--fontSize);
+				this.lineHeight = this.fontSize;
+			} else {
+				this._wrap();
+			}
+
+			if (this.justifyLines && this.lineBreak === 'auto') {
+				this._justify();
+			}
+
+			this._setAlignY();
+			this._drawText();
+		},
+
+		_setFont: function(fontSize) {
+			var fontParts = (!this.sizeToFill) ? this.font.split(/\b\d+px\b/i) : this.context.font.split(/\b\d+px\b/i);
+			this.context.font = fontParts[0] + fontSize + 'px' + fontParts[1];
+			this.fontSize = fontSize;
+		},
+
+		_setLineHeight: function() {
+			if (!isNaN(this.lineHeight)) {
+				this.lineHeight = this.fontSize * this.lineHeight;
+			} else if (this.lineHeight.toString().indexOf('px') !== -1) {
+				this.lineHeight = parseInt(this.lineHeight);
+			} else if (this.lineHeight.toString().indexOf('%') !== -1) {
+				this.lineHeight = (parseInt(this.lineHeight) / 100) * this.fontSize;
+			}
+		},
+
+		_wrap: function() {
+			if (this.allowNewLine) {
+				var newLines = this.text.trim().split('\n');
+				for (var i = 0,idx = 0; i < newLines.length - 1; i++) {
+					idx += newLines[i].trim().split(/\s+/).length;
+					this.newLineIndexes.push(idx)
+				}
+			}
+
+			var words = this.text.trim().split(/\s+/);
+			this._checkLength(words);
+			this._breakText(words);
+
+			this.textBlockHeight = this.lines.length * this.lineHeight;
+		},
+
+		_checkLength: function(words) {
+			var testString,tokenLen,sliced,leftover;
+
+			for (var i = 0; i < words.length; i++) {
+				testString = '';
+				tokenLen = this.context.measureText(words[i]).width;
+
+				if (tokenLen > MAX_TXT_WIDTH) {
+					for (var k = 0; (this.context.measureText(testString + words[i][k]).width <= MAX_TXT_WIDTH) && (k < words[i].length); k++) {
+						testString += words[i][k];
+					}
+
+					sliced = words[i].slice(0,k);
+					leftover = words[i].slice(k);
+					words.splice(i,1,sliced,leftover);
+				}
+			}
+		},
+
+		_breakText: function(words) {
+			for (var i = 0,j = 0; i < words.length; j++) {
+				this.lines[j] = '';
+
+				if (this.lineBreak === 'auto') {
+					while ((this.context.measureText(this.lines[j] + words[i]).width <= MAX_TXT_WIDTH) && (i < words.length)) {
+
+						this.lines[j] += words[i] + ' ';
+						i++;
+
+						if (this.allowNewLine) {
+							for (var k = 0; k < this.newLineIndexes.length; k++) {
+								if (this.newLineIndexes[k] === i) {
+									j++;
+									this.lines[j] = '';
+									break;
+								}
+							}
+						}
+					}
+					this.lines[j] = this.lines[j].trim();
+				} else {
+					this.lines[j] = words[i];
+					i++;
+				}
+			}
+		},
+
+		_justify: function() {
+			var maxLen,longestLineIndex,tokenLen;
+			for (var i = 0; i < this.lines.length; i++) {
+				tokenLen = this.context.measureText(this.lines[i]).width;
+
+				if (!maxLen || tokenLen > maxLen) {
+					maxLen = tokenLen;
+					longestLineIndex = i;
+				}
+			}
+
+			// fill lines with extra spaces
+			var numWords,spaceLength,numOfSpaces,num,filler;
+			var delimiter = '\u200A';
+			for (i = 0; i < this.lines.length; i++) {
+				if (i === longestLineIndex) continue;
+
+				numWords = this.lines[i].trim().split(/\s+/).length;
+				if (numWords <= 1) continue;
+
+				this.lines[i] = this.lines[i].trim().split(/\s+/).join(delimiter);
+
+				spaceLength = this.context.measureText(delimiter).width;
+				numOfSpaces = (maxLen - this.context.measureText(this.lines[i]).width) / spaceLength;
+				num = numOfSpaces / (numWords - 1);
+
+				filler = '';
+				for (var j = 0; j < num; j++) {
+					filler += delimiter;
+				}
+
+				this.lines[i] = this.lines[i].trim().split(delimiter).join(filler);
+				//console.log('numWords:', numWords, 'numOfSpaces:', numOfSpaces, 'num:', num);
+			}
+		},
+
+		_drawText: function() {
+			for (var i = 0; i < this.lines.length; i++) {
+				this._setAlignX(this.lines[i]);
+
+				this.textPos.y = parseInt(this.textPos.y) + this.lineHeight;
+				this.context.fillText(this.lines[i],this.textPos.x,this.textPos.y);
+
+				if (this.strokeText) {
+					this.context.strokeText(this.lines[i],this.textPos.x,this.textPos.y);
+				}
+			}
+		},
+
+		_setAlignX: function(line) {
+			if (this.textAlign == 'center') {
+				this.textPos.x = (EL_WIDTH - this.context.measureText(line).width) / 2;
+			} else if (this.textAlign == 'right') {
+				this.textPos.x = EL_WIDTH - this.context.measureText(line).width - this.paddingX;
+			} else {
+				this.textPos.x = this.paddingX;
+			}
+		},
+
+		_setAlignY: function() {
+			if (this.verticalAlign == 'middle') {
+				this.textPos.y = (EL_HEIGHT - this.textBlockHeight) / 2;
+			} else if (this.verticalAlign == 'bottom') {
+				this.textPos.y = EL_HEIGHT - this.textBlockHeight - this.paddingY;
+			} else {
+				this.textPos.y = this.paddingY;
+			}
+		},
+
+		_validate: function() {
+			if (!(this.canvas instanceof HTMLCanvasElement))
+				throw new TypeError('The first parameter must be an instance of HTMLCanvasElement.');
+
+			if (typeof this.text !== 'string')
+				throw new TypeError('The second parameter must be a string.');
+
+			if (isNaN(this.fontSize))
+				throw new TypeError('Cannot parse "font".');
+
+			if (isNaN(this.lineHeight))
+				throw new TypeError('Cannot parse "lineHeight".');
+
+			if (this.textAlign.toLocaleLowerCase() !== 'left' && this.textAlign.toLocaleLowerCase() !== 'center' && this.textAlign.toLocaleLowerCase() !== 'right')
+				throw new TypeError('Property "textAlign" must be set to either "left", "center", or "right".');
+
+			if (this.verticalAlign.toLocaleLowerCase() !== 'top' && this.verticalAlign.toLocaleLowerCase() !== 'middle' && this.verticalAlign.toLocaleLowerCase() !== 'bottom')
+				throw new TypeError('Property "verticalAlign" must be set to either "top", "middle", or "bottom".');
+
+			if (typeof this.justifyLines !== 'boolean')
+				throw new TypeError('Property "justifyLines" must be set to a Boolean.');
+
+			if (isNaN(this.paddingX))
+				throw new TypeError('Property "paddingX" must be set to a Number.');
+
+			if (isNaN(this.paddingY))
+				throw new TypeError('Property "paddingY" must be set to a Number.');
+
+			if (typeof this.fitParent !== 'boolean')
+				throw new TypeError('Property "fitParent" must be set to a Boolean.');
+
+			if (this.lineBreak.toLocaleLowerCase() !== 'auto' && this.lineBreak.toLocaleLowerCase() !== 'word')
+				throw new TypeError('Property "lineBreak" must be set to either "auto" or "word".');
+
+			if (typeof this.sizeToFill !== 'boolean')
+				throw new TypeError('Property "sizeToFill" must be set to a Boolean.');
+
+			if (typeof this.strokeText !== 'boolean')
+				throw new TypeError('Property "strokeText" must be set to a Boolean.');
+		}
+	};
+
+	window.CanvasTextWrapper = CanvasTextWrapper;
+})();

Gruntfile.js

@@ -0,0 +1,27 @@
+module.exports = function (grunt) {
+
+    var saveLicense = require('uglify-save-license');
+    // project configuration
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+
+        uglify: {
+            my_target: {
+                options: {
+                    preserveComments: saveLicense
+                },    
+                src: ['CanvasTextWrapper.js'],
+                dest: 'CanvasTextWrapper.min.js' 
+            }
+        }
+    });
+
+    // load plugins
+    grunt.loadNpmTasks('uglify-save-license');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+
+    // default tasks.
+    grunt.registerTask('default', [
+        'uglify'
+    ]);
+};

README.md

@@ -0,0 +1,65 @@
+CanvasTextWrapper
+=================
+
+##Syntax
+```
+new CanvasTextWrapper(HTMLCanvasElement, String [, options]);
+```
+
+```options``` - is an object with the following available properties and values:
+
+- ```font:``` (String) - text style that includes font size in px, font weight, font family, etc. Similar to CSS font shorthand property
+- ```lineHeight:``` (String or Number) - Number means n times font size where 1 is equivalent to '100%'. Also the property can be set in "%" or "px" using String
+- ```textAlign: "left" | "center" | "right"``` - horizontal alignment of each line
+- ```verticalAlign: "top" | "middle" | "bottom"``` - vertical alignment of the whole text block
+- ```paddingX:``` (Number) - horizontal padding (in px) set equally on both, left and right sides
+- ```paddingY:``` (Number) - vertical padding (in px) set equally on both, top and bottom sides
+- ```fitParent:``` (Boolean) - if enabled, text will fit canvas container's width instead of canvas own width
+- ```lineBreak: "auto" | "word"``` - text split rule. When using ```"auto"```, text goes to a next line on a whole word when there's no more room. If ```"word"``` is set as value, each next word will be placed on a new line.
+- ```sizeToFill:``` (Boolean) - ignore given font size and line height and resize text to fill its padded container
+- ```strokeText:``` (Boolean) - outline text based on context configuration
+- ```justifyLines:``` (Boolean) - if enabled, all lines match the same width with flexed spaces between words (one-word lines are ignored).
+- ```allowNewLine:``` (Boolean) if enabled, the text breaks on every new line character "\n" otherwise it'll be considered as a space
+
+NOTE: if a single word is too long to fit the width with specified font size, it will break on any letter unless ```sizeToFill``` option is enabled.
+
+##Defaults
+``` 
+   { 
+        font: "18px Arial, sans-serif",
+        lineHeight: 1,
+        textAlign: "left",
+        verticalAlign: "top",
+        paddingX: 0,
+        paddingY: 0,
+        fitParent: false,
+        lineBreak: "auto",
+        strokeText: false
+        sizeToFill: false,
+        allowNewLine: true,
+        justifyLines: false
+    }
+```
+
+##Usage
+Configure context settings properties such as "fillStyle", "lineWidth" or "strokeStyle" before using CanvasTextWrapper like so:
+``` 
+var canvas = document.getElementById("#canvasText");
+canvas.width = 200;
+canvas.height = 200;
+context = canvas.getContext("2d");
+context.lineWidth = 2;
+context.strokeStyle = "#ff0000";
+CanvasTextWrapper(canvas,"Hello");    //default options will apply
+```
+
+##Examples
+http://namniak.github.io/CanvasTextWrapper/
+
+##Installation
+
+```
+bower install canvas-text-wrapper
+
+npm install canvas-text-wrapper
+```

bower.json

@@ -0,0 +1,18 @@
+{
+  "name": "canvas-text-wrapper",
+  "version": "0.3.2",
+  "ignore": [
+    "**/.*",
+    "**/*.log",
+    "**/*.json",
+    "Gruntfile.js",
+    "examples",
+    "node_modules",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/namniak/CanvasTextWrapper.git"
+  },
+  "homepage": "http://namniak.github.io/CanvasTextWrapper/"
+}

css/reset.css

@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}

css/styles.css

@@ -1,159 +0,0 @@
-body {
-    width: 960px;
-    margin: auto;
-    font-family: 'Open Sans', sans-serif;
-    color: #fff;
-    line-height: 140%;
-}
-
-div, header, footer, article {
-    box-sizing: border-box;
-}
-
-header, footer, article {
-    width: 930px;
-    margin: auto;
-    background-color: #3299af;
-    padding: 20px;
-}
-
-header {
-    font-size: 60px;
-    font-weight: 700;
-}
-
-.description {
-    width: 800px;
-    margin-top: 20px;
-    font-size: 22px;
-    font-weight: normal;
-}
-
-footer {
-    margin-top: 40px;
-}
-
-a {
-    font-size: 20px;
-    font-weight: normal;
-    color: #fff;
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-article {
-    border-top: 1px solid #fff;
-}
-
-.white-block {
-    display: table-cell;
-    height: 30px;
-    padding: 20px;
-    vertical-align: middle;
-    background-color: #fff;
-    font-weight: 100;
-    color: #2E6571;
-    line-height: 120%;
-}
-
-pre.white-block {
-    padding-left: 0;
-    padding-bottom: 0;
-}
-
-p {
-    margin: 10px 0;
-    line-height: 120%;
-}
-
-h2 {
-    font-size: 30px;
-    padding-top: 40px;
-}
-
-h2:first-of-type {
-    padding-top: 10px;
-}
-
-h6 {
-    font-weight: 700;
-    text-decoration: underline;
-    display: inline;
-}
-
-.syntax {
-    padding: 10px 10px 0 20px;
-}
-
-.syntax > li {
-    list-style: none;
-    margin-bottom: 15px;
-}
-
-.syntax p {
-    margin-bottom: 0;
-}
-
-.values li {
-    text-indent: 20px;
-    list-style: inside circle;
-    line-height: 120%;
-}
-
-section {
-    margin-top: 40px;
-}
-
-section > div {
-    display: inline-block;
-    position: relative;
-    width: 450px;
-    margin: 15px;
-    border: 1px solid #3299af;
-    overflow: hidden;
-}
-
-section h2 {
-    color: #3299af;
-    text-indent: 30px;
-    margin-bottom: 20px;
-}
-
-section > div div {
-    width: 100%;
-    height: 240px;
-    background-color: #3299af;
-    margin-top: 250px;
-    padding: 20px;
-}
-
-canvas, img {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-img {
-    width: 100%;
-    z-index: -1;
-}
-
-span {
-    margin-left: 20px;
-    margin-right: 5px;
-}
-
-span, .emph {
-    font-weight: 600;
-    display: inline;
-}
-
-strong {
-    background: #fff;
-    color: #3299af;
-    font-weight: bold;
-    padding: 0 5px;
-}

index.html

@@ -1,160 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta charset="utf-8">
-    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="css/reset.css">
-    <link rel="stylesheet" href="css/styles.css">
-    <script src="js/CanvasTextWrapper.js"></script>
-    <script src="js/options.js"></script>
-    <script src="js/examples.js"></script>
-    <title>CanvasTextWrapper</title>
-</head>
-<body>
-<header>
-    <p>CanvasTextWrapper</p>
-
-    <p class="description">
-        Pure JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with
-        alignment and padding.
-    </p>
-</header>
-<article>
-    <h2>Syntax</h2><br/>
-
-    <p class="white-block">CanvasTextWrapper(HTMLCanvasElement, String [, Options]);</p><br/>
-
-    <div>
-        <div class="emph">Options</div>
-        - is an object with the following available properties and values:
-    </div>
-    <ul class="syntax">
-        <li>
-            <div class="emph">font</div>
-            (String) - text style that includes font size in px, weight, font family, etc. Similar to CSS font shorthand
-            property
-        </li>
-        <li>
-            <div class="emph">lineHeight</div>
-            (Number or String)
-            <ul class="values">
-                <li>number - n times font size where 1 is equivalent to '100%'</li>
-                <li>"%"</li>
-                <li>"px"</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">textAlign</div>
-            (String) - horizontal alignment of each line
-            <ul class="values">
-                <li>"left"</li>
-                <li>"center"</li>
-                <li>"right"</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">verticalAlign</div>
-            (String) - vertical alignment of the whole text block
-            <ul class="values">
-                <li>"top"</li>
-                <li>"middle"</li>
-                <li>"bottom"</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">paddingX</div>
-            (Number) - horizontal padding (in px) set equally on both, left and right sides
-        </li>
-        <li>
-            <div class="emph">paddingY</div>
-            (Number) - vertical padding (in px) set equally on both, top and bottom sides
-        </li>
-        <li>
-            <div class="emph">fitParent</div>
-            (Boolean) - parameter that controls which element to fit
-            <ul class="values">
-                <li>true - fit canvas parent's width instead of canvas own width</li>
-                <li>false - fit canvas width</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">lineBreak</div>
-            (String) - text split rule
-            <ul class="values">
-                <li>"auto" - text fills padded container going to a next line on a whole word</li>
-                <li>"word" - each next word will be placed on a new line</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">sizeToFill</div>
-            (Boolean) - auto font size to fill text container
-            <ul class="values">
-                <li>true - ignore given font size/line height and resize text to fill its padded container</li>
-                <li>false - use specified or default font size</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">strokeText</div>
-            (Boolean) - if enabled, all lines match the same width with flexed spaces between words (one-word lines are
-            ignored)
-        </li>
-        <li>
-            <div class="emph">justifyLines</div>
-            (Boolean) - if enabled, text breaks on every new line character "\n"
-        </li>
-        <p>
-            NOTE: if a single word is too long to fit the width with specified font size, it will break on any letter
-            unless "sizeToFill" option is enabled.
-        </p>
-    </ul>
-
-    <h2>Default Options</h2><br/>
-    <pre class="white-block">
-    { 
-        <strong>font</strong>: "18px Arial, sans-serif",
-        <strong>lineHeight</strong>: 1,
-        <strong>textAlign</strong>: "left",
-        <strong>verticalAlign</strong>: "top",
-        <strong>paddingX</strong>: 0,
-        <strong>paddingY</strong>: 0,
-        <strong>fitParent</strong>: false,
-        <strong>lineBreak</strong>: "auto",
-        <strong>sizeToFill</strong>: false,
-        <strong>allowNewLine</strong>: true,
-        <strong>justifyLines</strong>: false,
-        <strong>strokeText</strong>: false
-    }
-    </pre>
-
-    <h2>Usage</h2><br/>
-
-    <p>
-        Configure context settings properties such as "fillStyle", "lineWidth" or "strokeStyle" before using
-        CanvasTextWrapper like so:
-    </p>
-
-    <pre class="white-block">
-        var canvas = document.getElementById("#canvasText");
-        canvas.width = 200;
-        canvas.height = 200;
-        context = canvas.getContext("2d");
-        context.lineWidth = 2;
-        context.strokeStyle = "#ff0000";
-        CanvasTextWrapper(canvas,"Hello");    //default options will apply
-    </pre>
-
-    <h2>Installation</h2><br/>
-
-    <p class="white-block">
-        bower install canvas-text-wrapper<br/>
-        npm install canvas-text-wrapper
-    </p>
-</article>
-<section>
-    <h2>Examples</h2>
-</section>
-<footer>
-    &larr;&nbsp;<a href="https://github.com/namniak/CanvasTextWrapper">View on GitHub</a>
-</footer>
-</body>
-</html>

js/CanvasTextWrapper.js

@@ -1,276 +0,0 @@
-(function (root) {
-
-	function CanvasTextWrapper(canvas, text, options) {
-		'use strict';
-
-		var defaults = {
-			font: '18px Arial, sans-serif',
-			sizeToFill: false,      // text is resized to fill the container (given font size is ignored)
-			lineHeight: 1,          // default line height equivalent of '100%'
-			allowNewLine: true,     // breaks text on every new line character '\n'
-			lineBreak: 'auto',      // text fills the element's (canvas or parent) width going to a new line on a whole word
-			textAlign: 'left',      // each line of text is aligned left
-			verticalAlign: 'top',   // text lines block is aligned top
-			justifyLines: false,    // lines are not justified
-			paddingX: 0,            // 0px left & right text padding relatively to canvas or its container
-			paddingY: 0,            // 0px top & bottom text padding relatively to canvas or its container
-			fitParent: false,       // text is set to fit canvas width
-			strokeText: false       // text is stroked according to context configuration
-		};
-
-		var opts = {};
-
-		for (var property in defaults) {
-			if (defaults.hasOwnProperty(property)) {
-				opts[property] = (options && options[property]) ? options[property] : defaults[property];
-			}
-		}
-
-		var context = canvas.getContext('2d');
-		context.font = opts.font;
-		context.textBaseline = 'bottom';
-
-		var EL_WIDTH = (opts.fitParent === false) ? canvas.width : canvas.parentNode.clientWidth;
-		var EL_HEIGHT = (opts.fitParent === false) ? canvas.height : canvas.parentNode.clientHeight;
-		var MAX_TXT_WIDTH = EL_WIDTH - (opts.paddingX * 2);
-		var MAX_TXT_HEIGHT = EL_HEIGHT - (opts.paddingY * 2);
-
-		var fontSize, textBlockHeight, lines, newLineIndexes, textPos, lineHeight;
-
-		init();
-
-		function init() {
-			fontSize = opts.font.match(/\d+(px|em|%)/g) ? +opts.font.match(/\d+(px|em|%)/g)[0].match(/\d+/g) : 18;
-
-			textBlockHeight = 0;
-			lines = [];
-			newLineIndexes = [];
-			textPos = {x: 0, y: 0};
-
-			setFont(fontSize);
-			setLineHeight();
-			validate();
-			render();
-		}
-
-		function render() {
-			if (opts.sizeToFill) {
-				var numWords = text.trim().split(/\s+/).length;
-				var fontSize = 0;
-
-				do {
-					setFont(++fontSize);
-					lineHeight = fontSize;
-					wrap();
-				} while (textBlockHeight < MAX_TXT_HEIGHT && (lines.join(' ').split(/\s+/).length == numWords));
-
-				setFont(--fontSize);
-				lineHeight = fontSize;
-				wrap();
-			} else {
-				wrap();
-			}
-
-			if (opts.justifyLines && opts.lineBreak === 'auto') {
-				justify();
-			}
-
-			setVerticalAlign();
-			drawText();
-		}
-
-		function setFont(fontSize) {
-			var fontParts = (!opts.sizeToFill) ? opts.font.split(/\b\d+px\b/i) : context.font.split(/\b\d+px\b/i);
-			context.font = fontParts[0] + fontSize + 'px' + fontParts[1];
-		}
-
-		function setLineHeight() {
-			if (!isNaN(opts.lineHeight)) {
-				lineHeight = fontSize * opts.lineHeight;
-			} else if (opts.lineHeight.toString().indexOf('px') !== -1) {
-				lineHeight = parseInt(opts.lineHeight);
-			} else if (opts.lineHeight.toString().indexOf('%') !== -1) {
-				lineHeight = (parseInt(opts.lineHeight) / 100) * fontSize;
-			}
-		}
-
-		function wrap() {
-			if (opts.allowNewLine) {
-				var newLines = text.trim().split('\n');
-				for (var i = 0, idx = 0; i < newLines.length - 1; i++) {
-					idx += newLines[i].trim().split(/\s+/).length;
-					newLineIndexes.push(idx)
-				}
-			}
-
-			var words = text.trim().split(/\s+/);
-			checkLength(words);
-			breakText(words);
-
-			textBlockHeight = lines.length * lineHeight;
-		}
-
-		function checkLength(words) {
-			var testString, tokenLen, sliced, leftover;
-
-			for (var i = 0; i < words.length; i++) {
-				testString = '';
-				tokenLen = context.measureText(words[i]).width;
-
-				if (tokenLen > MAX_TXT_WIDTH) {
-					for (var k = 0; (context.measureText(testString + words[i][k]).width <= MAX_TXT_WIDTH) && (k < words[i].length); k++) {
-						testString += words[i][k];
-					}
-
-					sliced = words[i].slice(0, k);
-					leftover = words[i].slice(k);
-					words.splice(i, 1, sliced, leftover);
-				}
-			}
-		}
-
-		function breakText(words) {
-			for (var i = 0, j = 0; i < words.length; j++) {
-				lines[j] = '';
-
-				if (opts.lineBreak === 'auto') {
-					while ((context.measureText(lines[j] + words[i]).width <= MAX_TXT_WIDTH) && (i < words.length)) {
-
-						lines[j] += words[i] + ' ';
-						i++;
-
-						if (opts.allowNewLine) {
-							for (var k = 0; k < newLineIndexes.length; k++) {
-								if (newLineIndexes[k] === i) {
-									j++;
-									lines[j] = '';
-									break;
-								}
-							}
-						}
-					}
-					lines[j] = lines[j].trim();
-				} else {
-					lines[j] = words[i];
-					i++;
-				}
-			}
-		}
-
-		function justify() {
-			var maxLen, longestLineIndex, tokenLen;
-			for (var i = 0; i < lines.length; i++) {
-				tokenLen = context.measureText(lines[i]).width;
-
-				if (!maxLen || tokenLen > maxLen) {
-					maxLen = tokenLen;
-					longestLineIndex = i;
-				}
-			}
-
-			// fill lines with extra spaces
-			var numWords, spaceLength, numOfSpaces, num, filler;
-			var delimiter = '\u200A';
-			for (i = 0; i < lines.length; i++) {
-				if (i === longestLineIndex) continue;
-
-				numWords = lines[i].trim().split(/\s+/).length;
-				if (numWords <= 1) continue;
-
-				lines[i] = lines[i].trim().split(/\s+/).join(delimiter);
-
-				spaceLength = context.measureText(delimiter).width;
-				numOfSpaces = (maxLen - context.measureText(lines[i]).width) / spaceLength;
-				num = numOfSpaces / (numWords - 1);
-
-				filler = '';
-				for (var j = 0; j < num; j++) {
-					filler += delimiter;
-				}
-
-				lines[i] = lines[i].trim().split(delimiter).join(filler);
-				//console.log('numWords:', numWords, 'numOfSpaces:', numOfSpaces, 'num:', num);
-			}
-		}
-
-		function drawText() {
-			for (var i = 0; i < lines.length; i++) {
-				setHorizontalAlign(lines[i]);
-
-				textPos.y = parseInt(textPos.y) + lineHeight;
-				context.fillText(lines[i], textPos.x, textPos.y);
-
-				if (opts.strokeText) {
-					context.strokeText(lines[i], textPos.x, textPos.y);
-				}
-			}
-		}
-
-		function setHorizontalAlign(line) {
-			if (opts.textAlign == 'center') {
-				textPos.x = (EL_WIDTH - context.measureText(line).width) / 2;
-			} else if (opts.textAlign == 'right') {
-				textPos.x = EL_WIDTH - context.measureText(line).width - opts.paddingX;
-			} else {
-				textPos.x = opts.paddingX;
-			}
-		}
-
-		function setVerticalAlign() {
-			if (opts.verticalAlign == 'middle') {
-				textPos.y = (EL_HEIGHT - textBlockHeight) / 2;
-			} else if (opts.verticalAlign == 'bottom') {
-				textPos.y = EL_HEIGHT - textBlockHeight - opts.paddingY;
-			} else {
-				textPos.y = opts.paddingY;
-			}
-		}
-
-		function validate() {
-			if (!(canvas instanceof HTMLCanvasElement))
-				throw new TypeError('The first parameter must be an instance of HTMLCanvasElement.');
-
-			if (typeof text !== 'string')
-				throw new TypeError('The second parameter must be a string.');
-
-			if (isNaN(fontSize))
-				throw new TypeError('Cannot parse "font".');
-
-			if (isNaN(lineHeight))
-				throw new TypeError('Cannot parse "lineHeight".');
-
-			if (opts.textAlign.toLocaleLowerCase() !== 'left' && opts.textAlign.toLocaleLowerCase() !== 'center' && opts.textAlign.toLocaleLowerCase() !== 'right')
-				throw new TypeError('Property "textAlign" must be set to either "left", "center", or "right".');
-
-			if (opts.verticalAlign.toLocaleLowerCase() !== 'top' && opts.verticalAlign.toLocaleLowerCase() !== 'middle' && opts.verticalAlign.toLocaleLowerCase() !== 'bottom')
-				throw new TypeError('Property "verticalAlign" must be set to either "top", "middle", or "bottom".');
-
-			if (typeof opts.justifyLines !== 'boolean')
-				throw new TypeError('Property "justifyLines" must be set to a Boolean.');
-
-			if (isNaN(opts.paddingX))
-				throw new TypeError('Property "paddingX" must be set to a Number.');
-
-			if (isNaN(opts.paddingY))
-				throw new TypeError('Property "paddingY" must be set to a Number.');
-
-			if (typeof opts.fitParent !== 'boolean')
-				throw new TypeError('Property "fitParent" must be set to a Boolean.');
-
-			if (opts.lineBreak.toLocaleLowerCase() !== 'auto' && opts.lineBreak.toLocaleLowerCase() !== 'word')
-				throw new TypeError('Property "lineBreak" must be set to either "auto" or "word".');
-
-			if (typeof opts.sizeToFill !== 'boolean')
-				throw new TypeError('Property "sizeToFill" must be set to a Boolean.');
-
-			if (typeof opts.strokeText !== 'boolean')
-				throw new TypeError('Property "strokeText" must be set to a Boolean.');
-		}
-	}
-
-	if ('module' in root && 'exports' in module) {
-		module.exports = CanvasTextWrapper;
-	} else {
-		root.CanvasTextWrapper = CanvasTextWrapper;
-	}
-})(this);

js/examples.js

@@ -1,51 +0,0 @@
-document.onreadystatechange = function() {
-	'use strict';
-	if (document.readyState === 'complete') {
-		(function() {
-			var container = document.getElementsByTagName('section')[0];
-			var w = 448;
-			var h = 250;
-			var options = model;
-
-			createExamples();
-
-			function createExamples() {
-				var fragment = new DocumentFragment();
-				var context;
-
-				for (var i = 0; i < options.length; i++) {
-					var exampleItem = document.createElement('div');
-					fragment.appendChild(exampleItem);
-
-					var canvas = document.createElement('canvas');
-					exampleItem.appendChild(canvas);
-					canvas.width = w;
-					canvas.height = h;
-					context = canvas.getContext('2d');
-					context.lineWidth = 1;
-					context.strokeStyle = 'yellow';
-					CanvasTextWrapper(canvas,(options[i].txt),options[i]);
-
-					var hint = document.createElement('div');
-					exampleItem.appendChild(hint);
-					var optionsData = '';
-
-					for (var property in options[i]) {
-						if (options[i].hasOwnProperty(property)) {
-							if (property == 'txt') continue;
-							var stringWrapper = (property == 'paddingX' || property == 'paddingY' || property == 'sizeToFill' || property === 'justifyLines' || property === 'allowNewLine' || property === 'strokeText') ? '' : '"';
-							optionsData += '         <span>' + property + ':</span> ' +
-							stringWrapper + options[i][property] + stringWrapper + ',<br/>';
-						}
-					}
-
-					hint.innerHTML = '<h6>CODE:</h6><p>' +
-					'CanvasTextWrapper(canvas, str, {<br/>' + optionsData + '});' +
-					'</p>';
-				}
-
-				container.appendChild(fragment);
-			}
-		})();
-	}
-};

js/options.js

@@ -1,47 +0,0 @@
-var model = [
-	{
-		txt: 'Break text on every next word',
-		font: 'italic 800 25px Arial, sans-serif',
-		textAlign: 'center',
-		lineBreak: 'word',
-		lineHeight: "160%"
-	},
-	{
-		txt: 'Center text block horizontally and vertically',
-		font: 'bold 35px Arial, sans-serif',
-		textAlign: 'center',
-		verticalAlign: 'middle'
-	},
-	{
-		txt: 'Resize text automatically to fill its padded container. Given "font" and "lineHeight" properties are ignored',
-		textAlign: 'center',
-		verticalAlign: 'middle',
-		sizeToFill: true,
-		paddingX: 10,
-		paddingY: 30
-	},
-	{
-		txt: 'Justify text lines takes effect only with "auto" break line. Single word lines are skipped',
-		font: 'bold 40px Arial, sans-serif',
-		paddingX: 20,
-		paddingY: 20,
-		verticalAlign: 'middle',
-		textAlign: 'center',
-		justifyLines: true
-	},
-	{
-		txt: 'Apply text stroke is based on context settings',
-		font: 'bold 40px Arial, sans-serif',
-		textAlign: 'right',
-		paddingX: 25,
-		strokeText: true,
-		lineHeight: '60px'
-	},
-	{
-		txt: 'Use\n new line character "\\n"\n to break lines\nwhere needed',
-		font: 'bold 30px Arial, sans-serif',
-		verticalAlign: 'bottom',
-		allowNewLine: true,
-		lineHeight: '200%'
-	}
-];

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "canvas-text-wrapper",
+  "description": "Pure JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with alignment and padding.",
+  "version": "0.3.2",
+  "license": "MIT",
+  "main": "CanvasTextWrapper.min.js",
+  "homepage": "http://namniak.github.io/CanvasTextWrapper/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/namniak/CanvasTextWrapper"
+  },
+  "author": "Vadim Namniak <vnamnyak@gmail.com> (https://github.com/namniak)",
+  "bugs": {
+    "url": "https://github.com/namniak/CanvasTextWrapper/issues"
+  },
+  "devDependencies": {
+    "grunt-contrib-uglify": "^0.9.1",
+    "uglify-save-license": "^0.4.1"
+  }
+}