Improve the appearance of the text and components in your article by using Apple News Format styles.
- Apple News Format
- Apple News API
In Apple News Format, you can use your own custom styles throughout an article to get precisely the look you want for your content and give your users a better experience.
You can create custom styles that are used by a single component (for example, a stylish drop cap used only at the beginning of your article) or by all components of a specific type (for example, a font used by all
body components). You can apply a style to a single word in a title or define a style for the entire document. The following table summarizes the styles in Apple News Format.
Apply style to
Text or a range of text in your content
Fonts (family, weight, style, width, name, and size), background color, ordered and unordered list items, strikethrough, text color, text shadow, tracking (spacing between letters), underline, and vertical alignment.
Text component (such as
Text style, drop caps, first-line indents, hanging punctuation, hyphenation, line height, link style, paragraph spacing, and text alignment.
Table (both JSON and HTML tables)
Styles for table rows, columns, and cells.
Component (such as
Background color, background fill, background image, background video, opacity, borders, and table styles.
Document (the whole article)
Define Custom Styles
In Apple News Format, you can create custom styles and custom text styles for a specific component or range of text. Or, if you want all components or text in your article to be able to use them, you can include them in one of the following objects:
Creating custom styles in one of these objects makes it easier to ensure a consistent look and feel for your article. For example, to add a line to the top and bottom of a pull quote, you might create a ComponentStyle object with top and bottom borders and use that object as the value of the
style property in the PullQuote component.
However, if you plan to have pull quotes throughout your article—all with a top and bottom border—then you can define a style named
Pull in the ArticleDocument.componentStyles object, so that it’s available to all other components in your document. When you want to use that same border style, you simply use the style name you created (
Pull) as the value of a component’s
style property instead of redefining the style every time.
Define a Custom Style for a Component
Include a ComponentStyle object as the value of the individual component's style property. To define a custom style that’s available to any component, include a property, with a name that you define, in the ArticleDocument.componentStyles object. Include a ComponentStyle object as the value of that property, and use that property’s name string as the value of the individual component’s style property.
Define a Custom Text Style for the Content of a Text Component
Include a ComponentTextStyle object as the value of the individual component’s
text property. To define a custom text style that’s available to any text components, include a property, with a name that you define, in the ArticleDocument.componentTextStyles object. Include a ComponentTextStyle object as the value of that property, and use the property’s name string as the value of the individual component’s