javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 03:31:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2531 from NativeScript/letter-spacing

Browse Source 
Letter spacing in EM units
This commit is contained in:
Rossen Hristov
2016-07-29 15:22:51 +03:00
committed by GitHub
parent d64cbfaf52 a4dea1df2e
commit 9d58707da5
10 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/app/ui-tests-app/css/letter-spacing.xml
View File

@ -2,12 +2,12 @@
<ScrollView> <ScrollView>
<StackLayout> <StackLayout>
<WrapLayout> <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: 0;" />
<Label text="labelLabel" style="letter-spacing: 1;" /> <Label text="labelLabel" style="letter-spacing: 0.1;" />
</WrapLayout> </WrapLayout>
<Label text="labelLabel" 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: 10;"> <Label style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
<Label.formattedText> <Label.formattedText>
<FormattedString> <FormattedString>
<FormattedString.spans> <FormattedString.spans>
@ -18,13 +18,13 @@
</Label.formattedText> </Label.formattedText>
</Label> </Label>
<WrapLayout> <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: 0;" />
<Button text="buttonButton" style="letter-spacing: 1;" /> <Button text="buttonButton" style="letter-spacing: 0.1;" />
</WrapLayout> </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>--> <!--<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> <Button.formattedText>
<FormattedString> <FormattedString>
<FormattedString.spans> <FormattedString.spans>
@ -36,15 +36,13 @@
</Button> </Button>
<!--</android>--> <!--</android>-->
<WrapLayout> <WrapLayout>
<ios> <TextField text="textField" style="letter-spacing: -0.1;" />
<TextField text="textField" style="letter-spacing: -1;" />
</ios>
<TextField text="textField" style="letter-spacing: 0;" /> <TextField text="textField" style="letter-spacing: 0;" />
<TextField text="textField" style="letter-spacing: 1;" /> <TextField text="textField" style="letter-spacing: 0.1;" />
</WrapLayout> </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>--> <!--<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> <TextField.formattedText>
<FormattedString> <FormattedString>
<FormattedString.spans> <FormattedString.spans>
@ -56,13 +54,13 @@
</TextField> </TextField>
<!--</android>--> <!--</android>-->
<WrapLayout> <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: 0;" />
<TextView text="textView" style="letter-spacing: 1;" /> <TextView text="textView" style="letter-spacing: 0.1;" />
</WrapLayout> </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>--> <!--<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> <TextView.formattedText>
<FormattedString> <FormattedString>
<FormattedString.spans> <FormattedString.spans>

4
apps/app/ui-tests-app/mainPage.ts
View File

@ -169,7 +169,7 @@ export class MianPageViewModel extends observable.Observable {
} }
public loadExample(exampleName: any) { public loadExample(exampleName: any) {
console.log("exampleName EXAMLE: " + exampleName); console.log("exampleName EXAMPLE: " + exampleName);
this.selectExample(exampleName); this.selectExample(exampleName);
} }
@ -187,7 +187,7 @@ export class MianPageViewModel extends observable.Observable {
} }
private selectExample(selectedExample: any) { private selectExample(selectedExample: any) {
console.log(" EXAMLE: " + selectedExample); console.log(" EXAMPLE: " + selectedExample);
if (this.examples.has(selectedExample)) { if (this.examples.has(selectedExample)) {
frame.topmost().navigate("ui-tests-app/" + this.basePath + this.examples.get(selectedExample)); frame.topmost().navigate("ui-tests-app/" + this.basePath + this.examples.get(selectedExample));

4
tests/app/ui/button/button-tests.ts
View File

@ -306,7 +306,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
let view = new buttonModule.Button(); let view = new buttonModule.Button();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.text = "NormalText"; view.text = "NormalText";
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;"); view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform"); TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
@ -319,7 +319,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
let formattedString = helper._generateFormattedString(); let formattedString = helper._generateFormattedString();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.formattedText = formattedString; view.formattedText = formattedString;
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;"); view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform"); TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");

4
tests/app/ui/label/label-tests.ts
View File

@ -601,7 +601,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
let view = new LabelModule.Label(); let view = new LabelModule.Label();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.text = "NormalText"; view.text = "NormalText";
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;"); view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform"); TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
@ -614,7 +614,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
let formattedString = helper._generateFormattedString(); let formattedString = helper._generateFormattedString();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.formattedText = formattedString; view.formattedText = formattedString;
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;"); view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform"); TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");

4
tests/app/ui/text-field/text-field-tests.ts
View File

@ -545,7 +545,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
TKUnit.assertTrue(isNaN(view.style.letterSpacing), "LetterSpacing"); TKUnit.assertTrue(isNaN(view.style.letterSpacing), "LetterSpacing");
view.text = "NormalText"; view.text = "NormalText";
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;"); view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform"); TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
@ -558,7 +558,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
let formattedString = helper._generateFormattedString(); let formattedString = helper._generateFormattedString();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.formattedText = formattedString; view.formattedText = formattedString;
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;"); view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform"); TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");

4
tests/app/ui/text-view/text-view-tests.ts
View File

@ -499,7 +499,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt
let view = new textViewModule.TextView(); let view = new textViewModule.TextView();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.text = "NormalText"; view.text = "NormalText";
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;"); view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform"); TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
@ -512,7 +512,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
let formattedString = helper._generateFormattedString(); let formattedString = helper._generateFormattedString();
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.formattedText = formattedString; view.formattedText = formattedString;
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 10;"); view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform"); TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");

4
tns-core-modules/ui/button/button.ios.ts
View File

@ -263,7 +263,7 @@ export class ButtonStyler implements style.Styler {
if (hasLetterSpacing) { if (hasLetterSpacing) {
let attrText = NSMutableAttributedString.alloc().initWithAttributedString(button.ios.attributedTitleForState(UIControlState.UIControlStateNormal)); 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); button.ios.setAttributedTitleForState(attrText, UIControlState.UIControlStateNormal);
} }
} }
@ -286,7 +286,7 @@ export class ButtonStyler implements style.Styler {
} }
if (hasLetterSpacing) { if (hasLetterSpacing) {
dict.set(NSKernAttributeName, letterSpacing); dict.set(NSKernAttributeName, letterSpacing * button.ios.font.pointSize);
} }
attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) }); attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) });

15
tns-core-modules/ui/styling/styling.d.ts vendored
View File

@ -207,9 +207,24 @@
*/ */
opacity: number; opacity: number;
/**
* Gets or sets the text decoration style property. Possible values are contained in the [TextDecoration enumeration](../enums/TextDecoration/README.md).
*/
textDecoration: string; textDecoration: string;
/**
* Gets or sets the text transform style property. Possible values are contained in the [TextTransform enumeration](../enums/TextTransform/README.md).
*/
textTransform: string; textTransform: string;
/**
* Gets or sets the whitespace style property. Possible values are contained in the [WhiteSpace enumeration](../enums/WhiteSpace/README.md).
*/
whiteSpace: string; 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; letterSpacing: number;
//@private //@private

2
tns-core-modules/ui/text-base/text-base-styler.android.ts
View File

@ -115,7 +115,7 @@ export class TextBaseStyler implements style.Styler {
private static setLetterSpacingProperty(view: view.View, newValue: any) { private static setLetterSpacingProperty(view: view.View, newValue: any) {
if(view.android.setLetterSpacing) { if(view.android.setLetterSpacing) {
view.android.setLetterSpacing(utils.layout.toDeviceIndependentPixels(newValue)); view.android.setLetterSpacing(newValue);
} }
} }

4
tns-core-modules/ui/text-base/text-base-styler.ios.ts
View File

@ -155,7 +155,7 @@ export class TextBaseStyler implements style.Styler {
if (hasLetterSpacing) { if (hasLetterSpacing) {
let attrText = NSMutableAttributedString.alloc().initWithAttributedString(nativeView.attributedText); 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; nativeView.attributedText = attrText;
} }
} }
@ -178,7 +178,7 @@ export class TextBaseStyler implements style.Styler {
} }
if (hasLetterSpacing) { if (hasLetterSpacing) {
dict.set(NSKernAttributeName, letterSpacing); dict.set(NSKernAttributeName, letterSpacing * (<UIFont>nativeView.font).pointSize);
} }
attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) }); attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) });