Guides and Sample Code

Developer

Apple News Format: Design Tutorial

On This Page

Style and Layout

Apple News Format uses styles and layouts to make it easy for you to edit in one place and affect multiple components. These concepts were covered earlier in this tutorial, in Default Text Style; Default, Role-Specific Text Styles; and Component Layout Objects.

For the photo, you’ll use a full-bleed layout to take advantage of display width. For the caption, you'll align caption text with article text and then create contrast using font and color.

Remember that throughout this tutorial, you’ll place component layout objects in the top-level componentLayouts property of the article, and you’ll place component text style objects in the top-level componentTextStyles property of the article.

For information on customizing style and layout, see Text Style, Component Text Style, and Component Layout in the Apple News Format Reference.

JSON Example: References to Component Layout Objects

Place references to component layout objects in the photo component and the caption component.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "components": [
  4. ...
  5. {
  6. "role": "photo",
  7. "layout": "fullBleedLayout",
  8. "caption": "A caption for the photo.",
  9. "URL": "bundle://header.jpg"
  10. },
  11. {
  12. "role": "caption",
  13. "layout": "halfMarginBothLayout",
  14. "text": "ABOVE: A caption for the photo. (Attribution)"
  15. },
  16. ...
  17. ],
  18. ...
  19. }

JSON Example: Component Layout Objects

Define the fullBleedLayout and halfMarginBothLayout component layout objects that are referred to in the example above.

In the fullBleedLayout object, specify that the image will span the entire display width, ignoring the margins of the document.

In the halfMarginBothLayout object, specify that there will be a 12-point gap above and below the caption. For the purposes of this tutorial, a “half” margin was considered to be a 12-point space above or below a component.

For more information about ignoreDocumentMargin and the capabilities of component layout objects, see Component Layout in the Apple News Format Reference.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "componentLayouts": {
  4. ...
  5. "fullBleedLayout": {
  6. "ignoreDocumentMargin": true
  7. },
  8. "halfMarginBothLayout": {
  9. "columnStart": 0,
  10. "columnSpan": 7,
  11. "margin": {
  12. "top": 12,
  13. "bottom": 12
  14. }
  15. }
  16. },
  17. ...
  18. }

JSON Example: Text Style

Define a default, role-specific component text style object for caption components. Use the name default-caption, so that this component text style object will be automatically used as the default for all caption components. Use a gray color (#53585F) and italic font to create contrast between the caption text and article text.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "componentTextStyles": {
  4. ...
  5. "default-caption": {
  6. "fontName": "IowanOldStyle-Italic",
  7. "fontSize": 12,
  8. "lineHeight": 16,
  9. "paragraphSpacingBefore": 12,
  10. "paragraphSpacingAfter": 12,
  11. "textColor": "#53585F"
  12. }
  13. }
  14. ...
  15. }

Further Exploration

At any time, you can try changing property values in your article.json file, and then use News Preview to see how these changes impact the look of your article.

For example, try changing the style of your caption component:

  1. In your code, find the default-caption component text style object.

  2. In default-caption, find the fontSize property.

  3. Replace the value of the fontSize property, 12, with a font size of your choice.

  4. Preview your article.json file in News Preview. See also: Updating Your Article Preview.

    The caption component in your article now uses the font size that you chose.