Add CSS support for line-height (#4534)

* Add CSS support for line-height (issue #1664)

* Implemented @vakrilov's feedback

* Implemented @vakrilov's feedback (changed Android default impl)

tests/app/ui/text-view/text-view-tests.ts

@@ -378,6 +378,18 @@ export var testNativeFontSizeFromLocal = function () {
     });
 }
 
+var expectedLineHeight = 10;
+export var testLocalLineHeightFromCss = function () {
+    helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
+        var textView = <textViewModule.TextView>views[0];
+        var page = <pagesModule.Page>views[1];
+
+        page.css = "textview { line-height: " + expectedLineHeight + "; }";
+        var actualResult = textView.style.lineHeight;
+        TKUnit.assert(actualResult === expectedLineHeight, "Actual: " + actualResult + "; Expected: " + expectedLineHeight);
+    });
+}
+
 var expectedColorHex = "#FFFF0000";
 var expectedNormalizedColorHex = "#FF0000";
 export var testLocalColorFromCss = function () {

tns-core-modules/ui/styling/style-properties.d.ts

@@ -86,6 +86,7 @@ export const minWidthProperty: CssProperty<Style, dip | LengthDipUnit | LengthPx
 export const minHeightProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
 export const widthProperty: CssProperty<Style, PercentLength>;
 export const heightProperty: CssProperty<Style, PercentLength>;
+export const lineHeightProperty: CssProperty<Style, number>;
 export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
 export const marginLeftProperty: CssProperty<Style, PercentLength>;
 export const marginRightProperty: CssProperty<Style, PercentLength>;

tns-core-modules/ui/styling/style/style.d.ts

@@ -96,6 +96,7 @@ export class Style extends Observable {
     public visibility: Visibility;
 
     public letterSpacing: number;
+    public lineHeight: number;
     public textAlignment: TextAlignment;
     public textDecoration: TextDecoration;
     public textTransform: TextTransform;

tns-core-modules/ui/styling/style/style.ts

@@ -68,6 +68,7 @@ export class Style extends Observable implements StyleDefinition {
     public visibility: Visibility;
 
     public letterSpacing: number;
+    public lineHeight: number;
     public textAlignment: TextAlignment;
     public textDecoration: TextDecoration;
     public textTransform: TextTransform;

tns-core-modules/ui/text-base/text-base-common.ts

@@ -55,6 +55,13 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition
         this.style.letterSpacing = value;
     }
 
+    get lineHeight(): number {
+        return this.style.lineHeight;
+    }
+    set lineHeight(value: number) {
+        this.style.lineHeight = value;
+    }
+
     get textAlignment(): TextAlignment {
         return this.style.textAlignment;
     }
@@ -203,3 +210,6 @@ textDecorationProperty.register(Style);
 
 export const letterSpacingProperty = new CssProperty<Style, number>({ name: "letterSpacing", cssName: "letter-spacing", defaultValue: 0, affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
 letterSpacingProperty.register(Style);
+
+export const lineHeightProperty = new CssProperty<Style, number>({ name: "lineHeight", cssName: "line-height", affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
+lineHeightProperty.register(Style);

tns-core-modules/ui/text-base/text-base.android.ts

@@ -5,7 +5,7 @@ import {
     TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, fontSizeProperty,
     textProperty, textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty,
     paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length,
-    whiteSpaceProperty, FormattedString, layout, Span, Color, isBold
+    whiteSpaceProperty, lineHeightProperty, FormattedString, layout, Span, Color, isBold
 } from "./text-base-common";
 
 export * from "./text-base-common";
@@ -218,6 +218,13 @@ export class TextBase extends TextBaseCommon {
         }
     }
 
+    [lineHeightProperty.getDefault](): number {
+        return this.nativeView.getLineSpacingExtra() / layout.getDisplayDensity();
+    }
+    [lineHeightProperty.setNative](value: number) {
+        this.nativeView.setLineSpacing(value * layout.getDisplayDensity(), 1);
+    }
+
     [fontInternalProperty.getDefault](): android.graphics.Typeface {
         return this.nativeView.getTypeface();
     }

tns-core-modules/ui/text-base/text-base.ios.ts

@@ -2,8 +2,8 @@
 import { Font } from "../styling/font";
 import {
     TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty,
-    textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, FormattedString,
+    textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, lineHeightProperty,
-    Span, Color, isBold
+    FormattedString, Span, Color, isBold
 } from "./text-base-common";
 
 export * from "./text-base-common";
@@ -92,6 +92,10 @@ export class TextBase extends TextBaseCommon {
         this._setNativeText();
     }
 
+    [lineHeightProperty.setNative](value: number) {
+        this._setNativeText();
+    }
+
     _setNativeText(reset: boolean = false): void {
         if (reset) {
             const nativeView = this.nativeView;
@@ -122,6 +126,12 @@ export class TextBase extends TextBaseCommon {
             attrText.addAttributeValueRange(NSKernAttributeName, this.letterSpacing * this.nativeView.font.pointSize, { location: 0, length: attrText.length });
         }
 
+        if (this.style.lineHeight) {
+            const paragraphStyle = NSMutableParagraphStyle.alloc().init();
+            paragraphStyle.lineSpacing = this.lineHeight;
+            attrText.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, { location: 0, length: attrText.length });
+        }
+
         if (this.nativeView instanceof UIButton) {
             this.nativeView.setAttributedTitleForState(attrText, UIControlState.Normal);
         }
@@ -154,6 +164,12 @@ export class TextBase extends TextBaseCommon {
             dict.set(NSKernAttributeName, style.letterSpacing * this.nativeView.font.pointSize);
         }
 
+        if (style.lineHeight) {
+            const paragraphStyle = NSMutableParagraphStyle.alloc().init();
+            paragraphStyle.lineSpacing = style.lineHeight;
+            dict.set(NSParagraphStyleAttributeName, paragraphStyle);
+        }
+
         const isTextView = this.nativeView instanceof UITextView;
         if (style.color && (dict.size > 0 || isTextView)) {
             dict.set(NSForegroundColorAttributeName, style.color.ios);