Font Attributes Not Applying

[tsonevn]

From @Rjgoolsby on August 22, 2018 14:34

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo?

YES

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital letter.

Simple. Font Attributes styles aren't being applied.

Which platform(s) does your issue occur on?

Currently only developing for Android

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 4.2.1

• Cross-platform modules: (check the 'version' attribute in the node_modules/tns-core-modules/package.json file in your project) "4.2.0"

• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) "4.2.0"

• Plugin(s): (look for the version number in the package.json file of your project) { "description": "NativeScript Application", "license": "SEE LICENSE IN ", "readme": "NativeScript Application", "repository": "", "nativescript": { "id": "org.nativescript.sidedrawer", "tns-android": { "version": "4.2.0" }, "tns-ios": { "version": "4.2.0" } }, "scripts": { "lint": "eslint "app/**/*.js"" }, "dependencies": { "base-64": "^0.1.0", "nativescript-cache": "^1.0.0", "nativescript-floatingactionbutton": "^4.1.3", "nativescript-geocoder": "file:../nativescript-geocoder-1.0.0.tgz", "nativescript-geolocation": "^4.2.6", "nativescript-loading-indicator": "^2.4.0", "nativescript-pulltorefresh": "^2.1.1", "nativescript-theme-core": "~1.0.4", "nativescript-ui-listview": "^3.5.5", "nativescript-ui-sidedrawer": "^4.1.0", "tns-core-modules": "^4.2.0", "utf8": "^3.0.0" }, "devDependencies": { "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "copy-webpack-plugin": "~4.3.0", "css-loader": "~0.28.7", "eslint": "~4.9.0", "extract-text-webpack-plugin": "~3.0.2", "lazy": "1.0.11", "nativescript-dev-sass": "~1.3.5", "nativescript-dev-webpack": "^0.9.2", "nativescript-worker-loader": "~0.8.1", "raw-loader": "~0.5.1", "resolve-url-loader": "~2.2.1", "sass-loader": "~6.0.6", "uglifyjs-webpack-plugin": "~1.1.6", "webpack": "~3.10.0", "webpack-bundle-analyzer": "^2.9.1", "webpack-sources": "~1.1.0" } }

Please tell us how to recreate the issue in as much detail as possible.

The best approach would be to get your code running in the NativeScript Playground and share the link with us, along with any additional details or steps to reproduce needed for examining the issue there.

I copied and pasted this straight from the documents https://docs.nativescript.org/angular/ui/ng-ui-widgets/formatted-string Playground Demo Here: https://play.nativescript.org/?template=play-js&id=637TTY

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

See Playground demo.

<Label class="h3 p-15 m-15 text-left">
	<FormattedString>
		<Span text="Words " color="#006600" ></Span>
		<Span text="with " color="#990000" fontAttributes="Bold"></Span>
		<Span text="different " color="#ffcc00"></Span>
		<Span text="color."></Span>
	</FormattedString>
</Label>

fontAttributes Bold isn't working.

Copied from original issue: NativeScript/NativeScript#6207

[tsonevn]

Hi @Rjgoolsby, Thank you for the attached sample project. I checked the case. Currently, you should use fontWeightinstead of fontAttributes. For example:

 <Label class="h3 p-15 m-15 text-left">
            <FormattedString>
                <Span text="Words " color="#006600" ></Span>
                <Span text="with " color="#990000" fontWeight="Bold"></Span>
                <Span text="different " color="#ffcc00"></Span>
                <Span text="color."></Span>
            </FormattedString>
        </Label>

We will update the sample in the documentation.

[Z7i3]

Yeah it would be nice of you to update the documentation... a year later and I still had to come here for the answer...

[AsherThomasBabu]

@tsonevn @etabakov Could you guide me on where to make the changes in the docs?