Support pixels and percentage relative to container

dist/preview release/gui/babylon.gui.d.ts

@@ -525,7 +525,7 @@ declare module BABYLON.GUI {
         text: string;
         textHorizontalAlignment: number;
         textVerticalAlignment: number;
-        lineSpacing: number;
+        lineSpacing: string | number;
         constructor(name?: string | undefined, text?: string);
         protected _getTypeName(): string;
         private _drawText(text, textWidth, y, context);

dist/preview release/gui/babylon.gui.js

@@ -3160,7 +3160,7 @@ var BABYLON;
                 _this._textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
                 _this._textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
                 _this._resizeToFit = false;
-                _this._lineSpacing = 0;
+                _this._lineSpacing = new GUI.ValueAndUnit(0);
                 /**
                 * An event triggered after the text is changed
                 * @type {BABYLON.Observable}
@@ -3242,10 +3242,12 @@ var BABYLON;
             });
             Object.defineProperty(TextBlock.prototype, "lineSpacing", {
                 get: function () {
-                    return this._lineSpacing;
+                    return this._lineSpacing.toString(this._host);
                 },
                 set: function (value) {
-                    this._lineSpacing = value;
+                    if (this._lineSpacing.fromString(value)) {
+                        this._markAsDirty();
+                    }
                 },
                 enumerable: true,
                 configurable: true
@@ -3346,8 +3348,13 @@ var BABYLON;
                 var maxLineWidth = 0;
                 for (var i = 0; i < this._lines.length; i++) {
                     var line = this._lines[i];
-                    if (i !== 0 && this._lineSpacing > 0) {
-                        rootY += this._lineSpacing;
+                    if (i !== 0 && this._lineSpacing.internalValue !== 0) {
+                        if (this._lineSpacing.isPixel) {
+                            rootY += this._lineSpacing.getValue(this._host);
+                        }
+                        else {
+                            rootY = rootY + (this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height));
+                        }
                     }
                     this._drawText(line.text, line.width, rootY, context);
                     rootY += this._fontOffset.height;

dist/preview release/gui/babylon.gui.module.d.ts

@@ -530,7 +530,7 @@ declare module BABYLON.GUI {
         text: string;
         textHorizontalAlignment: number;
         textVerticalAlignment: number;
-        lineSpacing: number;
+        lineSpacing: string | number;
         constructor(name?: string | undefined, text?: string);
         protected _getTypeName(): string;
         private _drawText(text, textWidth, y, context);

gui/src/controls/textBlock.ts

@@ -9,7 +9,7 @@ module BABYLON.GUI {
 
         private _lines: any[];
         private _resizeToFit: boolean = false;
-        private _lineSpacing: number = 0;
+        private _lineSpacing: ValueAndUnit = new ValueAndUnit(0);
         /**
         * An event triggered after the text is changed
         * @type {BABYLON.Observable}
@@ -81,12 +81,14 @@ module BABYLON.GUI {
             this._markAsDirty();
         }
 
-        public set lineSpacing(value: number) {
-            this._lineSpacing = value;
+        public set lineSpacing(value: string | number) {
+            if (this._lineSpacing.fromString(value)) {
+                this._markAsDirty();
+            }
         }
 
-        public get lineSpacing(): number {
-            return this._lineSpacing;
+        public get lineSpacing(): string | number {
+            return this._lineSpacing.toString(this._host);
         }
 
         constructor(public name?: string, text: string = "") {
@@ -204,8 +206,14 @@ module BABYLON.GUI {
             for (let i = 0; i < this._lines.length; i++) {
                 const line = this._lines[i];
 
-                if (i !== 0 && this._lineSpacing > 0) {
-                    rootY += this._lineSpacing;
+                if (i !== 0 && this._lineSpacing.internalValue !== 0) {
+
+                    if (this._lineSpacing.isPixel) {
+                        rootY += this._lineSpacing.getValue(this._host);
+                    } else {
+                        
+                        rootY = rootY + (this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host,  this._cachedParentMeasure.height));
+                    }
                 }
 
                 this._drawText(line.text, line.width, rootY, context);