Guides and Sample Code


Apple News Format: Design Tutorial

On This Page

Pull Quote Style and Layout

You can use style and layout to create contrast between your pull quote and the article body.

In order to set a pull quote apart visually, you can use hangingPunctuation. This causes punctuation, such as opening and closing quotation marks, to appear outside of the component’s designated span.

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: Pull Quote and Divider Components

Add references to component layout objects and component text style objects in the pull quote and attribution, and add dividers to set the pull quote and attribution off from the article.

For the pull quote, use the default-pullquote component text style. For the attribution, use an overriding style called attribution. You will define these component text style objects later in this tutorial.

The components in the example code below refer to component layout objects with the user-created names fullMarginAboveLayout and halfMarginAboveQuarterBelowLayout. For the purposes of naming these component layout objects, a “full” margin was considered to be a 24-point space above or below a component, a “half” margin to be a 12-point space, and a “quarter” margin to be a 6-point space.

Example Code

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

  1. {
  2. ...
  3. "components": [
  4. ...
  5. {
  6. "role": "divider",
  7. "layout": "fullMarginAboveLayout",
  8. "stroke": {
  9. "width": 1,
  10. "color": "#D5B327"
  11. }
  12. },
  13. {
  14. "role": "pullquote",
  15. "layout": "halfMarginAboveQuarterBelowLayout",
  17. },
  18. {
  19. "role": "pullquote",
  20. "layout": "halfMarginBelowLayout",
  21. "textStyle": "attribution",
  22. "text": "— ATTRIBUTION"
  23. },
  24. {
  25. "role": "divider",
  26. "layout": "fullMarginBelowLayout",
  27. "stroke": {
  28. "width": 1,
  29. "color": "#D5B327"
  30. }
  31. },
  32. ...
  33. ],
  34. ...
  35. }

JSON Example: Component Layout Object

Define the fullMarginAboveLayout and halfMarginAboveQuarterBelowLayout component layout objects that are referred to in the example above.

Example Code

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

  1. {
  2. ...
  3. "componentLayouts": {
  4. ...
  5. "fullMarginAboveLayout": {
  6. "columnStart": 0,
  7. "columnSpan": 7,
  8. "margin": {
  9. "top": 24
  10. }
  11. },
  12. "halfMarginAboveQuarterBelowLayout": {
  13. "columnStart": 0,
  14. "columnSpan": 7,
  15. "margin": {
  16. "top": 12,
  17. "bottom": 6
  18. }
  19. },
  20. ...
  21. }

JSON Example: Component Text Style Objects

Define two component text style objects. In the first, default-pullquote, specify a large font and a light color to create contrast with the body text while maintaining overall balance in the design. In this default style, use hanging punctuation.

In the second component text style object, which is intended for attribution lines, specify a text color and font size at an intermediary level between the lighter, larger pull quote and the normal body text. Add tracking to take advantage of the fact that the attribution is unlikely to use the full component width.

Example Code

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

  1. {
  2. ...
  3. "componentTextStyles": {
  4. ...
  5. "default-pullquote": {
  6. "fontName": "DINAlternate-Bold",
  7. "fontSize": 30,
  8. "lineHeight": 36,
  9. "textColor": "#A6AAA9",
  10. "hangingPunctuation": true
  11. },
  12. "attribution": {
  13. "fontName": "DINAlternate-Bold",
  14. "fontSize": 12,
  15. "lineHeight": 16,
  16. "tracking": 0.12,
  17. "textColor": "#53585F",
  18. "textAlignment": "right"
  19. }
  20. }
  21. ...
  22. }

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 tracking of the text in your attribution:

  1. In your code, find the second pullquote component text style object.

  2. In the second pullquote object, find the tracking property.

  3. Replace the value of the tracking property, 0.12, with a tracking amount of your choice.

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

    The attribution below your pull quote now uses the tracking amount that you chose.