Apple News Format: Text Styles (Character Formatting)

article.json

{
	"version": "1.1",
	"identifier": "sketchyTech_Demo",
	"title": "My First Article",
	"language": "en",
	"layout": {},
	"components": [{
		"role": "title",
		"text": "My First Article",
		"textStyle": "titleStyle",
		"inlineTextStyles": [{
			"rangeStart": 3,
			"rangeLength": 5,
			"textStyle": "redText"
		}]
	}, {
		"role": "body",
		"format": "markdown",
		"text": "This is just _over_ the minimum amount of JSON required to create a valid article in **Apple News Format**. If you were to delete the dictionary enclosing this text, you'd be there.",
		"textStyle": "bodyStyle"
	}],
	"componentTextStyles": {
		"titleStyle": {
			"textAlignment": "center",
			"fontName": "HelveticaNeue-Bold",
			"fontSize": 64,
			"lineHeight": 74,
			"textColor": "#000"
		},
		"bodyStyle": {
			"textAlignment": "left",
			"fontName": "Georgia",
			"fontSize": 18,
			"lineHeight": 26,
			"textColor": "#000"
		}
	},
	"textStyles": {
		"redText": {
			"textColor": "#FF00007F"
		}
	}
}

Once you have the basic structure in place for your Apple News Format article, and the component text styles for your paragraph style formatting, you can then use either markdown or inline text styles for local formatting. To use markdown in any of your components simply add a format key with the value markdown. To use inline text styles add an inlineTextStyles key to your text component, the value of which will be an array of inline text styles.

In order to separate out and repeat text styles, as you would with character styles in a word processor or typesetting app, you can use a textStyles key in the top level of your dictionary, the value of which is a dictionary holding a list of styles in a similar way to the componentTextStyles key.

Once you have a list of text styles these can be referenced by replacing the textStyle dictionary within you inline styles with a string referencing a key within the textStyles dictionary.

Note: local styles are only applied to components that have a component text style and when you have markdown applied all inline text styles are ignored for that component.