Guides and Sample Code


Apple News Format: Design Tutorial

On This Page

Drop Cap Style Override

A drop cap changes the size, position, and style of a component’s first character, or first few characters. Drop caps guide the reader to the start of an article or section. The larger character catches the reader’s eye and can provide welcome contrast in long stretches of text.

image: ../Art/dropcap_2x.png

To create a drop cap, you’ll make a special, non-default component text style object that can override the article-wide and role-specific text styles.

To create a non-default component text style object, you’ll create a name for the object that is not one of the names reserved for default styles. Within this style, you’ll include a special object that defines the drop cap. Then, you’ll place the component text style object within the top-level componentTextStyles property of the article. Finally, you’ll add a drop cap to a component by referring to the style in a component.

For information on component text style objects, including properties related to drop caps, see Component Text Style and Drop Cap Style in the Apple News Format Reference.

JSON Example: Body Component

Within a body component, use the textStyle property to refer to a component text style object with the name bodyFirstDropCap. You will define bodyFirstDropCap in the next example.

The name bodyFirstDropCap is not specified by Apple News Format; it was created for this tutorial. Any user-created name that follows JSON rules can be used for a non-default style.

Example Code

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

  1. {
  2. ...
  3. "components": [
  4. ...
  5. {
  6. "role": "body",
  7. "format": "html",
  8. "textStyle": "bodyFirstDropCap",
  9. "text": "<p>Nam libero tempore, 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=''>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>"
  10. },
  11. ...
  12. ],
  13. ...
  14. }

JSON Example: Component Text Style Object

Define the bodyFirstDropCap component text style object that is referred to in the example above. Within the component text style object, include a dropCapStyle object.

Example Code

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

  1. {
  2. ...
  3. "componentTextStyles": {
  4. ...
  5. "bodyFirstDropCap": {
  6. "dropCapStyle": {
  7. "fontName": "DINAlternate-Bold",
  8. "textColor": "#A6AAA9",
  9. "numberOfLines": 2
  10. }
  11. }
  12. }
  13. ...
  14. }

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 height of your article’s drop cap:

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

  2. In bodyFirstDropCap, find the numberOfLines property.

  3. Replace the value of the numberOfLines property, 2, with a number of your choice between 2 and 10.

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

    The drop cap in your article now uses the new height that you chose. If you chose a number less than 2 or greater than 10, the error console informs you that you chose an illegal value. See also: Debugging Your JSON. On some devices, the height of the drop cap may be adjusted automatically to ensure a good experience.