Adding Color to Text Ranges

Overview

On this page, you’ll learn how to apply text styles to ranges of characters by using HTML to refer to TextStyle objects.

You can then edit the TextStyle object in one place and affect multiple ranges of text.

[Image]

[Image]

Create TextStyle Objects with Different Colors

Create the TextStyle objects that you will refer to inline in the HTML.

1. Copy the example code Styles with Text Color: Copy This Code.

2. Paste the code inside your article’s ArticleDocument.textStyles object, inside the braces ({}).

Your code should look like the example code Styles with Text Color: Result.

Styles with Text Color: Copy This Code

    "lightGrayText": {
      "textColor": "#A6AAA9"
    },
    "whiteText": {
      "textColor": "#FFF"
    },
    "DINText": {
      "fontName": "DINAlternate-Bold",
      "tracking": 0.01
    },
    "mediumGrayText": {
      "textColor": "#53585F"
    }

Styles with Text Color: Result

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

{
  ...
  "textStyles": {
    "lightGrayText": {
      "textColor": "#A6AAA9"
    },
    "whiteText": {
      "textColor": "#FFF"
    },
    "DINText": {
      "fontName": "DINAlternate-Bold",
      "tracking": 0.01
    },
    "mediumGrayText": {
      "textColor": "#53585F"
    }
  },
  ...
}

Use Text Styles to Change Text Color

Create references to the TextStyle objects you just created.

1. In your article.json file, ensure that each of these components has a property named format with a value of "html": title, byline, all four caption components, all body components, and the first of the two pullquote components. See the example code Text Color: Result.

2. Copy the example code Title Text: Copy This Code, and then, inside your title component, select the value of the text property and paste the copied code, replacing the existing text property.

3. Copy the example code Byline Text: Copy This Code, and then, inside your byline component, select the value of the text property and paste the copied code, replacing the existing text property.

4. Copy the example code Floating Caption Text: Copy This Code, and then, inside your first caption component, select the value of the text property and paste the copied code, replacing the existing text property.

5. Copy the example code Body Text: Copy This Code, and then, inside your body component that uses the bodyFirstDropCap component text style, select the value of the text property and paste the copied code, replacing the existing text property.

6. Copy the example code Pull Quote Text: Copy This Code, and then, inside your pullquote component, select the value of the text property and paste the copied code, replacing the existing text property.

7. Copy the example code Gallery Caption Text: Copy This Code, and then, inside the caption component that follows your gallery, select the value of the text property and paste the copied code, replacing the existing text property.

8. Copy the example code Mosaic Caption Text: Copy This Code, and then, inside the caption component that follows your mosaic, select the value of the text property and paste the copied code, replacing the existing text property.

9. Copy the example code Inset Photo Caption Text: Copy This Code, and then, inside the caption component that accompanies your inset photo, select the value of the text property and paste the copied code, replacing the existing text property.

Your code should look like the example code Text Color: Result.

After you make these changes in your code, you can preview your working article.json file in News Preview to see the text ranges in color.

Title Text: Copy This Code

"<span data-anf-textstyle='lightGrayText'>ARTICLE TITLE</span> <span data-anf-textstyle='whiteText'>WITH INLINE TEXT STYLE REFERENCES</span>"

Byline Text: Copy This Code

"<span data-anf-textstyle='lightGrayText'>By</span> Urna Semper"

Floating Caption Text: Copy This Code

"<span data-anf-textstyle='DINText'>ABOVE:</span> Sed ut pers piciatis unde omnis iste error sit volup tatem accusa ntium dolor emque, totam rem. (Attribution)"

Body Text: Copy This Code

"<p><span data-anf-textstyle='DINText'>Bold lead-in,</span> cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, dolor repellendus. <a href='http://www.apple.com'>Link text</a> quibusdam et aut.</p><p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, adipisci velit.</p>"

Pull Quote Text: Copy This Code

"“QUIA CONSEQUUNTUR MAGNI DOLORES EOS <span data-anf-textstyle='mediumGrayText'>QUI RATIONE VOLUPTATEM SEQUI NESCIUNT.”</span>"

Gallery Caption Text: Copy This Code

"<span data-anf-textstyle='DINText'>ABOVE:</span> A caption for the entire gallery. Individual photos in the gallery also have their own captions. (Shared attribution)"

Mosaic Caption Text: Copy This Code

"<span data-anf-textstyle='DINText'>ABOVE:</span> A caption for the entire mosaic. Individual photos in the mosaic also have their own captions. (Shared attribution)"

Inset Photo Caption Text: Copy This Code

"<span data-anf-textstyle='DINText'>ABOVE:</span> A caption for the sidebar photo. (Attribution)"

Text Color: Result

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

{
   ...
  "components": [
    {
      "role": "section",
      ...
      "components": [
        {
          "role": "header",
          ...
          "components": [
            {
              "role": "container",
              ...
              "components": [
                ...
                {
                  "role": "title",
                  "textStyle": "heading1Light",
                  "format": "html",
                  "layout": "halfMarginBelowLayout",
                  "text": "<span data-anf-textstyle='lightGrayText'>ARTICLE TITLE</span> <span data-anf-textstyle='whiteText'>WITH INLINE TEXT STYLE REFERENCES</span>"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "role": "section",
      ...
      "components": [
        ...
        {
          "role": "byline",
          "format": "html",
          "layout": "fullMarginBelowLayout",
          "text": "<span data-anf-textstyle='lightGrayText'>By</span> Urna Semper"
        },
        ...
        {
          "role": "container",
          ...
          "components": [
            {
              "role": "caption",
              "format": "html",
              "layout": "fullBleedLayout",
              "text": "<span data-anf-textstyle='DINText'>ABOVE:</span> Sed ut pers piciatis unde omnis iste error sit volup tatem accusa ntium dolor emque, totam rem. (Attribution)"
            }
          ]
        },
        {
          "identifier": "body1",
          "role": "body",
          "format": "html",
          "layout": "noMarginLayout",
          "textStyle": "bodyFirstDropCap",
          "text": "<p><span data-anf-textstyle='DINText'>Bold lead-in,</span> cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, dolor repellendus. <a href='http://www.apple.com'>Link text</a> quibusdam et aut.</p><p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, adipisci velit.</p>"
        },
        ...
        {
          "role": "container",
          ...
          "components": [
            {
              "role": "pullquote",
              "format": "html",
              "layout": "halfMarginAboveQuarterBelowContainedLayout",
              "text": "“QUIA CONSEQUUNTUR MAGNI DOLORES EOS <span data-anf-textstyle='mediumGrayText'>QUI RATIONE VOLUPTATEM SEQUI NESCIUNT.”</span>"
            },
            ...
          ]
        },
        ...
        {
          "role": "caption",
          "format": "html",
          "layout": "halfMarginBothLayout",
          "text": "<span data-anf-textstyle='DINText'>ABOVE:</span> A caption for the entire gallery. Individual photos in the gallery also have their own captions. (Shared attribution)"
        },
        ...
        {
          "role": "caption",
          "format": "html",
          "layout": "halfMarginBothLayout",
          "text": "<span data-anf-textstyle='DINText'>ABOVE:</span> A caption for the entire mosaic. Individual photos in the mosaic also have their own captions. (Shared attribution)"
        },
        ...
            {
              "role": "caption",
              "format": "html",
              "layout": "halfMarginBothContainedLayout",
              "text": "<span data-anf-textstyle='DINText'>ABOVE:</span> A caption for the sidebar photo. (Attribution)"
            }
          ]
        },
        ...
      ]
    }
  ],
  ...
}

Previous

Creating an Inset Photo

Next

Adding Animations

See Also

Related Documentation

• Defining and Applying Text Styles
• Using HTML with Apple News Format
• TextStyle

Advanced Design Tutorial 2: Layout and Positioning

• Creating a Complex, Layered Header
• Creating a Floating Caption
• Creating an Inset Pull Quote
• Creating an Inset Photo
• Adding Animations
• Adding a Scene
• Viewing the Finished Article for Advanced Design Tutorial 2