Skip to content

Commit 9d58707

Browse files
hamorphishamorphis
authored
Merge pull request NativeScript#2531 from NativeScript/letter-spacing
Letter spacing in EM units
2 parents d64cbfa + a4dea1d commit 9d58707

10 files changed

Lines changed: 46 additions & 33 deletions

File tree

‎apps/app/ui-tests-app/css/letter-spacing.xml‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<ScrollView>
33
<StackLayout>
44
<WrapLayout>
5-
<Label text="labelLabel" style="letter-spacing: -1;" />
5+
<Label text="labelLabel" style="letter-spacing: -0.1;" />
66
<Label text="labelLabel" style="letter-spacing: 0;" />
7-
<Label text="labelLabel" style="letter-spacing: 1;" />
7+
<Label text="labelLabel" style="letter-spacing: 0.1;" />
88
</WrapLayout>
9-
<Label text="labelLabel" style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;" />
10-
<Label style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;">
9+
<Label text="labelLabel" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
10+
<Label style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
1111
<Label.formattedText>
1212
<FormattedString>
1313
<FormattedString.spans>
@@ -18,13 +18,13 @@
1818
</Label.formattedText>
1919
</Label>
2020
<WrapLayout>
21-
<Button text="buttonButton" style="letter-spacing: -1;" />
21+
<Button text="buttonButton" style="letter-spacing: -0.1;" />
2222
<Button text="buttonButton" style="letter-spacing: 0;" />
23-
<Button text="buttonButton" style="letter-spacing: 1;" />
23+
<Button text="buttonButton" style="letter-spacing: 0.1;" />
2424
</WrapLayout>
25-
<Button text="buttonButton" style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;" />
25+
<Button text="buttonButton" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
2626
<!--<android>-->
27-
<Button style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;">
27+
<Button style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
2828
<Button.formattedText>
2929
<FormattedString>
3030
<FormattedString.spans>
@@ -36,15 +36,13 @@
3636
</Button>
3737
<!--</android>-->
3838
<WrapLayout>
39-
<ios>
40-
<TextField text="textField" style="letter-spacing: -1;" />
41-
</ios>
39+
<TextField text="textField" style="letter-spacing: -0.1;" />
4240
<TextField text="textField" style="letter-spacing: 0;" />
43-
<TextField text="textField" style="letter-spacing: 1;" />
41+
<TextField text="textField" style="letter-spacing: 0.1;" />
4442
</WrapLayout>
45-
<TextField text="textField" style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;" />
43+
<TextField text="textField" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
4644
<!--<android>-->
47-
<TextField style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;">
45+
<TextField style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
4846
<TextField.formattedText>
4947
<FormattedString>
5048
<FormattedString.spans>
@@ -56,13 +54,13 @@
5654
</TextField>
5755
<!--</android>-->
5856
<WrapLayout>
59-
<TextView text="textView" style="letter-spacing: -1;" />
57+
<TextView text="textView" style="letter-spacing: -0.1;" />
6058
<TextView text="textView" style="letter-spacing: 0;" />
61-
<TextView text="textView" style="letter-spacing: 1;" />
59+
<TextView text="textView" style="letter-spacing: 0.1;" />
6260
</WrapLayout>
63-
<TextView text="textView" style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;" />
61+
<TextView text="textView" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
6462
<!--<android>-->
65-
<TextView style="text-transform: uppercase; text-decoration: underline line-through; letter-spacing: 10;">
63+
<TextView style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
6664
<TextView.formattedText>
6765
<FormattedString>
6866
<FormattedString.spans>

‎apps/app/ui-tests-app/mainPage.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export class MianPageViewModel extends observable.Observable {
169169
}
170170

171171
public loadExample(exampleName: any) {
172-
console.log("exampleName EXAMLE: " + exampleName);
172+
console.log("exampleName EXAMPLE: " + exampleName);
173173
this.selectExample(exampleName);
174174
}
175175

@@ -187,7 +187,7 @@ export class MianPageViewModel extends observable.Observable {
187187
}
188188

189189
private selectExample(selectedExample: any) {
190-
console.log(" EXAMLE: " + selectedExample);
190+
console.log(" EXAMPLE: " + selectedExample);
191191

192192
if (this.examples.has(selectedExample)) {
193193
frame.topmost().navigate("ui-tests-app/" + this.basePath + this.examples.get(selectedExample));

‎tests/app/ui/button/button-tests.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
306306
let view = new buttonModule.Button();
307307
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
308308
view.text = "NormalText";
309-
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;");
309+
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
310310

311311
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
312312
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
@@ -319,7 +319,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
319319
let formattedString = helper._generateFormattedString();
320320
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
321321
view.formattedText = formattedString;
322-
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;");
322+
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
323323

324324
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
325325
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");

‎tests/app/ui/label/label-tests.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -601,7 +601,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
601601
let view = new LabelModule.Label();
602602
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
603603
view.text = "NormalText";
604-
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;");
604+
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
605605

606606
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
607607
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
@@ -614,7 +614,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
614614
let formattedString = helper._generateFormattedString();
615615
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
616616
view.formattedText = formattedString;
617-
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;");
617+
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
618618

619619
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
620620
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");

‎tests/app/ui/text-field/text-field-tests.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -545,7 +545,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
545545
TKUnit.assertTrue(isNaN(view.style.letterSpacing), "LetterSpacing");
546546

547547
view.text = "NormalText";
548-
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;");
548+
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
549549

550550
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
551551
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
@@ -558,7 +558,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
558558
let formattedString = helper._generateFormattedString();
559559
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
560560
view.formattedText = formattedString;
561-
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;");
561+
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
562562

563563
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
564564
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -499,7 +499,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
499499
let view = new textViewModule.TextView();
500500
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
501501
view.text = "NormalText";
502-
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;");
502+
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
503503

504504
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
505505
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
@@ -512,7 +512,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
512512
let formattedString = helper._generateFormattedString();
513513
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
514514
view.formattedText = formattedString;
515-
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;");
515+
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
516516

517517
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
518518
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");

‎tns-core-modules/ui/button/button.ios.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ export class ButtonStyler implements style.Styler {
263263

264264
if (hasLetterSpacing) {
265265
let attrText = NSMutableAttributedString.alloc().initWithAttributedString(button.ios.attributedTitleForState(UIControlState.UIControlStateNormal));
266-
attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing, { location: 0, length: attrText.length });
266+
attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing * button.ios.font.pointSize, { location: 0, length: attrText.length });
267267
button.ios.setAttributedTitleForState(attrText, UIControlState.UIControlStateNormal);
268268
}
269269
}
@@ -286,7 +286,7 @@ export class ButtonStyler implements style.Styler {
286286
}
287287

288288
if (hasLetterSpacing) {
289-
dict.set(NSKernAttributeName, letterSpacing);
289+
dict.set(NSKernAttributeName, letterSpacing * button.ios.font.pointSize);
290290
}
291291

292292
attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) });

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,9 +207,24 @@
207207
*/
208208
opacity: number;
209209

210+
/**
211+
* Gets or sets the text decoration style property. Possible values are contained in the [TextDecoration enumeration](../enums/TextDecoration/README.md).
212+
*/
210213
textDecoration: string;
214+
215+
/**
216+
* Gets or sets the text transform style property. Possible values are contained in the [TextTransform enumeration](../enums/TextTransform/README.md).
217+
*/
211218
textTransform: string;
219+
220+
/**
221+
* Gets or sets the whitespace style property. Possible values are contained in the [WhiteSpace enumeration](../enums/WhiteSpace/README.md).
222+
*/
212223
whiteSpace: string;
224+
225+
/**
226+
* Gets or sets the letter spacing style property. Values are in [EM units](https://en.wikipedia.org/wiki/Em_(typography)). Negative values tighten text.
227+
*/
213228
letterSpacing: number;
214229

215230
//@private

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export class TextBaseStyler implements style.Styler {
115115

116116
private static setLetterSpacingProperty(view: view.View, newValue: any) {
117117
if(view.android.setLetterSpacing) {
118-
view.android.setLetterSpacing(utils.layout.toDeviceIndependentPixels(newValue));
118+
view.android.setLetterSpacing(newValue);
119119
}
120120
}
121121

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export class TextBaseStyler implements style.Styler {
155155

156156
if (hasLetterSpacing) {
157157
let attrText = NSMutableAttributedString.alloc().initWithAttributedString(nativeView.attributedText);
158-
attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing, { location: 0, length: attrText.length });
158+
attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing * (<UIFont>nativeView.font).pointSize, { location: 0, length: attrText.length });
159159
nativeView.attributedText = attrText;
160160
}
161161
}
@@ -178,7 +178,7 @@ export class TextBaseStyler implements style.Styler {
178178
}
179179

180180
if (hasLetterSpacing) {
181-
dict.set(NSKernAttributeName, letterSpacing);
181+
dict.set(NSKernAttributeName, letterSpacing * (<UIFont>nativeView.font).pointSize);
182182
}
183183

184184
attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) });

0 commit comments

Comments
 (0)