javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Letter spacing in EM units

Browse Source 
Resolves #2528
This commit is contained in:
Rossen Hristov
2016-07-29 14:15:23 +03:00
parent d64cbfaf52
commit d73acb5497
6 changed files with 38 additions and 25 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
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) });