Contents

Caption

The component for adding caption text.

Declaration

object Caption

Properties

NameTypeDescription
role Requiredstring

Always caption for this component.

text Requiredstring

The text to display in the article, including any formatting tags depending on the format property.

You can also use a subset of HTML tags or Markdown syntax by setting format to html or markdown, respectively. See Using HTML with Apple News Format. Alternatively, you can style ranges of text individually using the InlineTextStyle object.

additions[Addition]

An array of all the additions that you apply to ranges of the component’s text.

If you set format to html or markdown, Apple News Format doesnʼt support Additions or InlineTextStyles.

anchorAnchor

An object that defines vertical alignment with another component.

animation(ComponentAnimation | string("none"))

An object that defines an animation you apply to the component.

Use the none value for conditional design elements. Adding it here has no effect.

behavior(Behavior | string("none"))

An object that defines behavior for a component, like Parallax or Springy.

Use the none value for conditional design elements. Adding it here has no effect.

conditional(ConditionalText | [ConditionalText])

An instance or array of text components that you can apply conditionally, and the conditions that cause Apple News Format to apply them.

formatstring

The formatting or markup method applied to the text.

If you set format to html or markdown, Apple News Format doesn’t support Additions or InlineTextStyles.

hiddenboolean

A Boolean value that determines whether the component is hidden.

identifierstring

An optional unique identifier for this component. If you use identifier, it must be unique across the entire document. You need an identifier for your component if you want to anchor other components to it.

inlineTextStyles([InlineTextStyle] | string("none"))

An array of InlineTextStyle objects that you can use to apply different text styles to ranges of text. For each InlineTextStyle, you should supply a rangeStart, a rangeLength, and either a TextStyle object or the identifier of a TextStyle that you define at the top level of the document.

Apple News Format ignores inline text styles when format is set to markdown or html.

Use the none value for conditional design elements. Adding it here has no effect.

layout(ComponentLayout | string)

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that you define at the top level of the document.

If you don’t define layout, size and position are based on various factors, such as the device type, the length of the content, and the role of this component.

style(ComponentStyle | string | string("none"))

An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that you define at the top level of the document.

Use the none value for conditional design elements. Adding it here has no effect.

textStyle(ComponentTextStyle | string)

An inline ComponentTextStyle object that contains styling information, or a string reference to a ComponentTextStyle object that you define at the top level of the document.

Mentioned in

Discussion

Use a Caption component to include a description for media components like photo, gallery, video, map, and so on. Apple News displays captions under the media component, but you can also add them above.

Example

{
  "components": [
    {
      "role": "title",
      "text": "Apple News Format"
    },
    {
      "role": "body",
      "text": "Apple News Format allows publishers to craft beautiful editorial layouts. Galleries, audio, video, and fun interactions like animation make stories spring to life."
    },
    {
      "role": "photo",
      "URL": "bundle://image.jpg"
    },
    {
      "role": "caption",
      "text": "Failure is not an option"
    }
  ]
}

See Also

Related Documentation

Text