Merge pull request #406 from Gavvers/text-align-new

Text Alignment Feature

Author: diegocr

examples/basic.html

@@ -342,6 +342,28 @@ <h2></h2>
 </pre>
 <button onclick="javascript:demoFromHTML()" class="button">Run Code</button></p></div></div>
 
+
+<h2><a href="#">Text alignment</a></h2>
+<div><p><pre>var pdf = new jsPDF('p', 'pt', 'letter');
+	
+	pdf.text( 'This text is normally\raligned.', 140, 50 );
+	
+	pdf.text( 'This text is centered\raround\rthis point.', 140, 120, 'center' );
+	
+	pdf.text( 'This text is rotated\rand centered around\rthis point.', 140, 300, 45, 'center' );
+	
+	pdf.text( 'This text is\raligned to the\rright.', 140, 400, 'right' );
+	
+	pdf.text( 'This text is\raligned to the\rright.', 140, 550, 45, 'right' );
+	
+	pdf.text( 'This single line is centered', 460, 50, 'center' );
+
+	pdf.text( 'This right aligned text\r\rhas an empty line.', 460, 200, 'right' );
+	
+	
+	pdf.save('Test.pdf');</pre>
+<a href="javascript:demoTextAlign()" class="button">Run Code</a></p></div>
+
 </div>
 	</div>
 

examples/js/basic.js

@@ -351,3 +351,32 @@ function demoFromHTML() {
     	margins
     )
 }
+
+function demoTextAlign() {
+	var pdf = new jsPDF('p', 'pt', 'letter');
+	
+	pdf.setFillColor(0);
+	pdf.circle( 140, 50, 2, "F" );
+	pdf.text( 'This text is normally\raligned.', 140, 50 );
+	
+	pdf.circle( 140, 120, 2, "F" );
+	pdf.text( 'This text is centered\raround\rthis point.', 140, 120, 'center' );
+	
+	pdf.circle( 140, 300, 2, "F" );
+	pdf.text( 'This text is rotated\rand centered around\rthis point.', 140, 300, 45, 'center' );
+	
+	pdf.circle( 140, 400, 2, "F" );
+	pdf.text( 'This text is\raligned to the\rright.', 140, 400, 'right' );
+	
+	pdf.circle( 140, 550, 2, "F" );
+	pdf.text( 'This text is\raligned to the\rright.', 140, 550, 45, 'right' );
+	
+	pdf.circle( 460, 50, 2, "F" );
+	pdf.text( 'This single line is centered', 460, 50, 'center' );
+
+	pdf.circle( 460, 200, 2, "F" );
+	pdf.text( 'This right aligned text\r\rhas an empty line.', 460, 200, 'right' );
+	
+	
+	pdf.save('Test.pdf');
+}

jspdf.js

@@ -1053,7 +1053,7 @@ var jsPDF = (function(global) {
 		 * @methodOf jsPDF#
 		 * @name text
 		 */
-		API.text = function(text, x, y, flags, angle) {
+		API.text = function(text, x, y, flags, angle, align) {
 			/**
 			 * Inserts something like this into PDF
 			 *   BT
@@ -1087,8 +1087,22 @@ var jsPDF = (function(global) {
 			// the user wanted to print multiple lines, so break the
 			// text up into an array.  If the text is already an array,
 			// we assume the user knows what they are doing.
-			if (typeof text === 'string' && text.match(/[\n\r]/)) {
-				text = text.split(/\r\n|\r|\n/g);
+			if (typeof text === 'string') {
+				if(text.match(/[\n\r]/)) {
+					text = text.split( /\r\n|\r|\n/g);
+				} else {
+					// Convert text into an array anyway
+					// to simplify later code.
+					text = [text];
+				}			
+			}
+			if (typeof angle === 'string') {
+				align = angle;
+				angle = null;
+			}
+			if (typeof flags === 'string') {
+				align = flags;
+				flags = null;
 			}
 			if (typeof flags === 'number') {
 				angle = flags;
@@ -1124,11 +1138,9 @@ var jsPDF = (function(global) {
 				this.lastTextWasStroke = false;
 			}
 
-			if (typeof text === 'string') {
-				text = ESC(text);
-			} else if (text instanceof Array) {
+			if (text instanceof Array) {
 				// we don't want to destroy  original text array, so cloning it
-				var sa = text.concat(), da = [], len = sa.length;
+				var sa = text.concat(), da = [], i, len = sa.length;
 				// we do array.join('text that must not be PDFescaped")
 				// thus, pdfEscape each component separately
 				while (len--) {
@@ -1138,7 +1150,40 @@ var jsPDF = (function(global) {
 				if (0 <= linesLeft && linesLeft < da.length + 1) {
 					todo = da.splice(linesLeft-1);
 				}
-				text = da.join(") Tj\nT* (");
+				
+				if( align ) {					
+					var prevX,
+						leading =  activeFontSize * lineHeightProportion,
+						lineWidths = text.map( function( v ) { 
+							return this.getStringUnitWidth( v ) * activeFontSize / k;
+						}, this );
+					// The first line uses the "main" Td setting,
+					// and the subsequent lines are offset by the
+					// previous line's x coordinate.
+					if( align === "center" ) {
+						// The passed in x coordinate defines
+						// the center point.						
+						x -= lineWidths[0] / 2;
+					} else if ( align === "right" ) {
+						// The passed in x coordinate defines the
+						// rightmost point of the text.											
+						x -= lineWidths[0];
+					} else {
+						throw new Error('Unrecognized alignment option, use "center" or "right".');
+					}
+					prevX = x;
+					text = da[0];
+					for ( i = 1, len = da.length ; i < len; i++ ) {
+						var delta = lineWidths[i-1] - lineWidths[i];
+						if( align === "center" ) delta /= 2;
+						// T* = x-offset leading Td ( text )
+						// PDF Spec 1.3 p.288
+						text += ") Tj\n" + delta + " -" + leading + " Td (" + da[i];
+						prevX += delta;
+					}			
+				} else {
+					text = da.join(") Tj\nT* (");
+				}
 			} else {
 				throw new Error('Type of text must be string or Array. "' + text + '" is not recognized.');
 			}