Define and apply custom, default, and inline text styles, or use HTML tags or Markdown syntax to style your text.
- Apple News Format
- Apple News API
Text styles determine the look of text in your article. For example, text styles let you create drop caps and shadowing.
In Apple News Format, you can define:
Custom default text style for your article.
Custom role-based default text styles for components with a specific role. You can use this option for all components with the same role in an article.
Custom text styles that can apply to ranges of text. You use this option if you have only a portion of text that needs a specific style in a single component or in multiple components.
Custom component text style to use with multiple components.
Define a Custom Default Text Style
To create a custom default text style for your article, add a text style called
default in the ArticleDocument.componentTextStyles, as shown in this example.
Define a Custom, Role Based Default Text Style
To create a custom, role based, default text style for all components, add a text style to the ArticleDocument.componentTextStyles object, and name it
<role> is a valid component
role name). For an explanation of
role, see Components.
Role-based, default text styles take precedence over default text styles, but any properties not specified in the role-based default will continue to use the values from the article default. When you create a component that has the same role, the role-based default style is automatically applied to the new component. If you make changes to the style, those changes are propagated throughout your article.
Define Custom Text Styles for a Range of Text
To define a custom text style for a range of text to use with a single component, use HTML, Markdown, or the InlineTextStyle object. See Using HTML with Apple News Format and Using Markdown with Apple News Format.
You can also create a custom text style for a range of text that can be used by multiple components throughout your document by including a TextStyle object in the ArticleDocument.textStyles object to specify the properties of the text styles you want to apply, and name the text style. In the component's text, if you are using HTML, use
<span data-anf-textstyle='style with the name of the style you created to apply the text style to a range.
You can also apply a style to a range using Markdown or an
inline object. Inline text styles are ignored if the component’s
format property is set to
markdown. Only those text style properties that have a value that you've specified will override the component text style and default styles.
Define Custom Component Text Style to Use With Multiple Components
To create a custom component text style to use with multiple components, create and name a text style in the ArticleDocument.componentTextStyles object, and specify the properties you want for that style.
To apply this custom text style, put its name as the value for the TextStyle object in the properties of the component. Any properties that you don’t specify in your custom text style will use the settings from the article’s default text styles. Now, whenever you add another text component that should be displayed in that style, you can simply reference the style name in the
text property for that component as shown in this example.
Use HTML and Markdown with Text
You can use HTML tags and Markdown syntax to style text in your article and to apply Apple News Format text styles.
Use HTML tags with default styles for tags, references to
text, or a mix of both. To use HTML tags to style text in a component, set the component’s
html. See Using HTML with Apple News Format.
Use a subset of Markdown syntax to style text within paragraphs and to use a custom text style. To use Markdown to style text in a component, set the component’s
markdown. See Using Markdown with Apple News Format.