From d73acb5497a435f64be3e7b30ef3bd0f0542d378 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Fri, 29 Jul 2016 14:15:23 +0300
Subject: [PATCH] Letter spacing in EM units

Resolves #2528
---
 apps/app/ui-tests-app/css/letter-spacing.xml  | 34 +++++++++----------
 apps/app/ui-tests-app/mainPage.ts             |  4 +--
 tns-core-modules/ui/button/button.ios.ts      |  4 +--
 tns-core-modules/ui/styling/styling.d.ts      | 15 ++++++++
 .../ui/text-base/text-base-styler.android.ts  |  2 +-
 .../ui/text-base/text-base-styler.ios.ts      |  4 +--
 6 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/apps/app/ui-tests-app/css/letter-spacing.xml b/apps/app/ui-tests-app/css/letter-spacing.xml
index 8f8803dae..49e984ced 100644
--- a/apps/app/ui-tests-app/css/letter-spacing.xml
+++ b/apps/app/ui-tests-app/css/letter-spacing.xml
@@ -2,12 +2,12 @@
   <ScrollView>
     <StackLayout>
       <WrapLayout>
-        <Label text="labelLabel" style="letter-spacing: -1;" />
+        <Label text="labelLabel" style="letter-spacing: -0.1;" />
         <Label text="labelLabel" style="letter-spacing: 0;" />
-        <Label text="labelLabel" style="letter-spacing: 1;" />
+        <Label text="labelLabel" style="letter-spacing: 0.1;" />
       </WrapLayout>
-      <Label text="labelLabel" style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;" />
-      <Label style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;">
+      <Label text="labelLabel" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
+      <Label style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
         <Label.formattedText>
           <FormattedString>
             <FormattedString.spans>
@@ -18,13 +18,13 @@
         </Label.formattedText>
       </Label>
       <WrapLayout>
-        <Button text="buttonButton" style="letter-spacing: -1;" />
+        <Button text="buttonButton" style="letter-spacing: -0.1;" />
         <Button text="buttonButton" style="letter-spacing: 0;" />
-        <Button text="buttonButton" style="letter-spacing: 1;" />
+        <Button text="buttonButton" style="letter-spacing: 0.1;" />
       </WrapLayout>
-      <Button text="buttonButton" style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;" />
+      <Button text="buttonButton" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
       <!--<android>-->
-      <Button style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;">
+      <Button style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
         <Button.formattedText>
           <FormattedString>
             <FormattedString.spans>
@@ -36,15 +36,13 @@
       </Button>
       <!--</android>-->
       <WrapLayout>
-        <ios>
-          <TextField text="textField" style="letter-spacing: -1;" />
-        </ios>
+        <TextField text="textField" style="letter-spacing: -0.1;" />
         <TextField text="textField" style="letter-spacing: 0;" />
-        <TextField text="textField" style="letter-spacing: 1;" />
+        <TextField text="textField" style="letter-spacing: 0.1;" />
       </WrapLayout>
-      <TextField text="textField" style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;" />
+      <TextField text="textField" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
       <!--<android>-->
-      <TextField style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;">
+      <TextField style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
         <TextField.formattedText>
           <FormattedString>
             <FormattedString.spans>
@@ -56,13 +54,13 @@
       </TextField>
       <!--</android>-->
       <WrapLayout>
-        <TextView text="textView" style="letter-spacing: -1;" />
+        <TextView text="textView" style="letter-spacing: -0.1;" />
         <TextView text="textView" style="letter-spacing: 0;" />
-        <TextView text="textView" style="letter-spacing: 1;" />
+        <TextView text="textView" style="letter-spacing: 0.1;" />
       </WrapLayout>
-      <TextView text="textView" style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;" />
+      <TextView text="textView" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
       <!--<android>-->
-      <TextView style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;">
+      <TextView style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
         <TextView.formattedText>
           <FormattedString>
             <FormattedString.spans>
diff --git a/apps/app/ui-tests-app/mainPage.ts b/apps/app/ui-tests-app/mainPage.ts
index 0f54b98b0..844ce05bf 100644
--- a/apps/app/ui-tests-app/mainPage.ts
+++ b/apps/app/ui-tests-app/mainPage.ts
@@ -169,7 +169,7 @@ export class MianPageViewModel extends observable.Observable {
     }
 
     public loadExample(exampleName: any) {
-        console.log("exampleName EXAMLE: " + exampleName);
+        console.log("exampleName EXAMPLE: " + exampleName);
         this.selectExample(exampleName);
     }
 
@@ -187,7 +187,7 @@ export class MianPageViewModel extends observable.Observable {
     }
 
     private selectExample(selectedExample: any) {
-        console.log(" EXAMLE: " + selectedExample);
+        console.log(" EXAMPLE: " + selectedExample);
 
         if (this.examples.has(selectedExample)) {
             frame.topmost().navigate("ui-tests-app/" + this.basePath + this.examples.get(selectedExample));
diff --git a/tns-core-modules/ui/button/button.ios.ts b/tns-core-modules/ui/button/button.ios.ts
index 3ff0fa1eb..3dd18d0fb 100644
--- a/tns-core-modules/ui/button/button.ios.ts
+++ b/tns-core-modules/ui/button/button.ios.ts
@@ -263,7 +263,7 @@ export class ButtonStyler implements style.Styler {
             
             if (hasLetterSpacing) {
                 let attrText = NSMutableAttributedString.alloc().initWithAttributedString(button.ios.attributedTitleForState(UIControlState.UIControlStateNormal));
-                attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing, { location: 0, length: attrText.length });
+                attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing * button.ios.font.pointSize, { location: 0, length: attrText.length });
                 button.ios.setAttributedTitleForState(attrText, UIControlState.UIControlStateNormal);            
             }
         } 
@@ -286,7 +286,7 @@ export class ButtonStyler implements style.Styler {
                 }
 
                 if (hasLetterSpacing) {
-                    dict.set(NSKernAttributeName, letterSpacing);
+                    dict.set(NSKernAttributeName, letterSpacing * button.ios.font.pointSize);
                 }
 
                 attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) });
diff --git a/tns-core-modules/ui/styling/styling.d.ts b/tns-core-modules/ui/styling/styling.d.ts
index a35554358..03612c6c5 100644
--- a/tns-core-modules/ui/styling/styling.d.ts
+++ b/tns-core-modules/ui/styling/styling.d.ts
@@ -207,9 +207,24 @@
          */
         opacity: number;
 
+        /**
+         * Gets or sets the text decoration style property. Possible values are contained in the [TextDecoration enumeration](../enums/TextDecoration/README.md).
+         */
         textDecoration: string;
+        
+        /**
+         * Gets or sets the text transform style property. Possible values are contained in the [TextTransform enumeration](../enums/TextTransform/README.md).
+         */
         textTransform: string;
+        
+        /**
+         * Gets or sets the whitespace style property. Possible values are contained in the [WhiteSpace enumeration](../enums/WhiteSpace/README.md).
+         */
         whiteSpace: string;
+        
+        /**
+         * Gets or sets the letter spacing style property. Values are in [EM units](https://en.wikipedia.org/wiki/Em_(typography)). Negative values tighten text.
+         */
         letterSpacing: number;
 
         //@private
diff --git a/tns-core-modules/ui/text-base/text-base-styler.android.ts b/tns-core-modules/ui/text-base/text-base-styler.android.ts
index d8b2e127b..a377ae913 100644
--- a/tns-core-modules/ui/text-base/text-base-styler.android.ts
+++ b/tns-core-modules/ui/text-base/text-base-styler.android.ts
@@ -115,7 +115,7 @@ export class TextBaseStyler implements style.Styler {
 
     private static setLetterSpacingProperty(view: view.View, newValue: any) {
         if(view.android.setLetterSpacing) {
-           view.android.setLetterSpacing(utils.layout.toDeviceIndependentPixels(newValue));
+           view.android.setLetterSpacing(newValue);
         }
     }
 
diff --git a/tns-core-modules/ui/text-base/text-base-styler.ios.ts b/tns-core-modules/ui/text-base/text-base-styler.ios.ts
index 9b3acb4b5..2b5b565fb 100644
--- a/tns-core-modules/ui/text-base/text-base-styler.ios.ts
+++ b/tns-core-modules/ui/text-base/text-base-styler.ios.ts
@@ -155,7 +155,7 @@ export class TextBaseStyler implements style.Styler {
             
             if (hasLetterSpacing) {
                 let attrText = NSMutableAttributedString.alloc().initWithAttributedString(nativeView.attributedText);
-                attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing, { location: 0, length: attrText.length });
+                attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing * (<UIFont>nativeView.font).pointSize, { location: 0, length: attrText.length });
                 nativeView.attributedText = attrText;
             }
         } 
@@ -178,7 +178,7 @@ export class TextBaseStyler implements style.Styler {
                 }
 
                 if (hasLetterSpacing) {
-                    dict.set(NSKernAttributeName, letterSpacing);
+                    dict.set(NSKernAttributeName, letterSpacing * (<UIFont>nativeView.font).pointSize);
                 }
 
                 attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) });