Object

TextStyle

The object for defining the text style (font family, size, color, and so on) that you can apply to ranges of text.

Properties

backgroundColor
*

The background color for text lines. The value defaults to transparent.

The none value is used for conditional design elements. Adding it here has no effect.

conditional
*

An instance or array of text style properties that can be applied conditionally, and the conditions that cause them to be applied.

fontFamily
*

The font family to use for text rendering, for example Gill Sans. Using a combination of fontFamily, fontWeight, fontWidth and fontStyle you can define the appearance of the text. News automatically selects the appropriate font variant from the available variants in that family.

See About Apple News Format Fonts.

fontName
string

The fontName to refer to an explicit font variant’s PostScript name, such as GillSans-Bold. Alternatively, you can use a combination of fontFamily, fontWeight, fontWidth and/or fontStyle to have News automatically select the appropriate variant depending on the text formatting used.

See About Apple News Format Fonts.

fontSize
integer

The size of the font, in points. By default, the font size will be inherited from a parent component or a default style. As a best practice, try not to go below 16 points for body text. The fontSize may be automatically resized for different device sizes or for iOS devices with Larger Accessibility Sizes enabled.

fontStyle
string

The font style to apply for the selected font.

Valid values:

  • normal. Selects from the font family a font that is defined as normal.

  • italic. Selects from the font family a font that is defined as italic. If the family does not contain an italic font variant, but contains an oblique variant, then oblique is selected instead.

  • oblique. Selects from the font family a font that is defined as oblique. If the family does not contain an oblique font variant, but contains an italic variant, then italic is selected.

fontWeight
*

The font weight to apply for font selection. In addition to explicit weights (named or numerical), lighter and bolder are available, to set text in a lighter or bolder font as compared to its surrounding text.

If a font variant with the given specifications cannot be found in the provided font family, an alternative is selected that has the closest match. If no bold/bolder font is found, News will not create a faux-bold alternative, but will fall back to the closest match. Similarly, if no italic or oblique font variant is found, text will not be slanted to make text appear italicized.

Valid values:

  • thin or 100. Thin/hairline weight.

  • extra-light, ultra-light or 200. Extra-light/ultra-light weight.

  • light or 300. Light weight.

  • regular, normal, book, roman or 400. Regular weight. This is the default weight if no weight is defined or inherited.

  • medium or 500. Medium weight.

  • semi-bold, demi-bold or 600. Semi-bold/demi-bold weight.

  • bold or 700. Bold weight. This is the default when using <strong> or <b> tags in HTML formatted text with default fontWeight.

  • extra-bold, ultra-bold or 800. Extra-bold/ultra-bold weight.

  • black, heavy or 900. Black/heavy weight.

  • lighter. A weight lighter than its surrounding text. When surrounding text is made bold, a value of lighter would make it medium.

  • bolder. A weight heavier than its surrounding text. When surrounding text is made light, a value of bolder would make it regular.

fontWidth
string

The font width for font selection (known in CSS as font-stretch). Defines the width characteristics of a font variant between normal, condensed and expanded. Some font families have separate families assigned for different widths (for example, Avenir Next and Avenir Next Condensed), so make sure that the fontFamily you select supports the specified fontWidth.

Valid values:

  • ultra-condensed. Specifies the most condensed variant.

  • extra-condensed.Specifies a very condensed variant.

  • condensed. Specifies a condensed variant.

  • semi-condensed. Specifies a semi-condensed variant.

  • normal (default). Specifies the font variant classified as normal.

  • semi-expanded. Specifies a semi-expanded variant.

  • expanded. Specifies an expanded variant.

  • extra-expanded. Specifies a very expanded variant.

  • ultra-expanded. Specifies the most expanded variant.

orderedListItems
*

An object for use with text components with HTML markup. You can create text styles containing an orderedListItems definition to configure how list items inside <ol> tags should be displayed.

The none value is used for conditional design elements. Adding it here has no effect.

strikethrough
*

The text strikethrough. Set strikethrough to true to use the text color inherited from the textColor property as the strikethrough color, or provide a text decoration definition with a different color. By default strikethrough is omitted (false).

stroke
*

The stroke style for the text outline. By default, stroke will be omitted.

The none value is used for conditional design elements. Adding it here has no effect.

textColor

The text color.

textShadow
*

The text shadow for this style.

The none value is used for conditional design elements. Adding it here has no effect.

textTransform
string

The transform to apply to the text.

Valid values:

  • uppercase

  • lowercase

  • capitalize. Capitalizes the first letter of all words in the string.

  • none (default)

tracking
number

The amount of tracking (spacing between characters) in text, as a percentage of the fontSize. The actual spacing between letters is determined by combining information from the font and font size.

Example: Set tracking to 0.5 to make the distance between characters increase by 50% of the fontSize. With a font size of 10, the additional space between characters is 5 points.

underline
*

The text underlining. This style can be used for links. Set underline to true to use the text color as the underline color, or provide a text decoration with a different color. By default underline is omitted (false).

unorderedListItems
*

An object for use with text components with HTML markup. You can create text styles containing an unorderedListItems definition to configure how list items inside <ul> tags should be displayed.

The none value is used for conditional design elements. Adding it here has no effect.

verticalAlignment
string

The vertical alignment of the text. You can use this property for superscripts and subscripts.

Overrides values specified in parent text styles.

Default value: baseline when unspecified, or the value specified in a TextStyle object applied to the same range.

The values superscript and subscript also adjust the font size to two-thirds of the size defined for that character range.

Discussion

A TextStyle object defines a style that you can apply to ranges of text. Include a property, with a name that you define and a TextStyle object for the value, in the ArticleDocument.textStyles object. Then, you can use that property’s name string together with HTML, Markdown, or InlineTextStyle to apply the style to a range of text.

If you’re using Markdown syntax to style your text, see the Inline Text Style section in Using Markdown with Apple News Format. If you’re using HTML, see Using HTML with Apple News Format.

This object can be used in ArticleDocument.textStyles

Example

{ "textStyles": { "default-tag-abbr": { "textColor": "#34af15" } }, "components": [ { "role": "body", "format": "html", "text": "<p>The <abbr>WWF</abbr> is an international wildlife fund.</p>" } ]}

See Also

Text Styles

Defining and Applying Text Styles

Define and apply custom, default, and inline text styles, or use HTML tags or Markdown syntax to style your text.

About Apple News Format Fonts

See the iOS font families supported in Apple News Format.

object ComponentTextStyle

The object for defining the style for a text component, including spacing, alignment, and drop caps.

object DropCapStyle

The object for defining the drop cap text style for use in the first paragraph in a text component.

object ListItemStyle

The object for defining the style for bulleted or numbered lists in an article.

object InlineTextStyle

The object for applying text styling when not using HTML or Markdown formatting.