---
title: Anchor
framework: applenewsformat
role: symbol
role_heading: Object
path: applenewsformat/anchor
---

# Anchor

The object for anchoring one component to another component in your article’s layout.

## Declaration

```data
object Anchor
```

## Properties

targetAnchorPosition: Sets the anchor point in the target component, relative to the originAnchorPosition. Valid values: top: Align the top of the target component  with or near the originAnchorPosition. center: Align the middle of the target component with or near the originAnchorPosition. bottom: Align the  bottom of the target component with or near the originAnchorPosition. If a component is anchored to a range of text in a body component and is full-width (such as iPhone), the following rules determine the spacing before and after the anchored component: If the anchored component has explicitly defined margins, Apple News Format applies the defined margins to the component. If the anchored component doesn’t have explicitly defined margins, Apple News Format adds space equaling half of the document gutter before and after the component. Note the following: If you anchor the component to a range of text near the beginning of the component and it appears above all text in the body component, Apple News Format doesn’t add any space above it. If you anchor the component to a range of text near the end of the component and it appears after all text in the body component, Apple News Format doesn’t add any space  after it. If the component’s targetAnchorPosition is top, Apple News Format doesn’t add any space above it. If the component’s targetAnchorPosition is bottom, Apple News Format doesn’t add any space after it. Example: To align the bottom of a component with the bottom of another component, set both originAnchorPosition and targetAnchorPosition  to bottom. originAnchorPosition: Sets which point in the origin component gets anchored to the target component. The originating anchor is positioned as closely as possible to the intended targetAnchorPosition. If you omit this property, Apple News uses the value of targetAnchorPosition. rangeLength: The length of the range of text the component is anchored to. If you specify rangeLength, you must include rangeStart. Maximum value: (textLength - rangeStart) where textLength is the number of characters in the component, including spaces. The length of a text range can’t exceed the length of the text. rangeStart: The start index of the range of text the component is anchored to. When a component is anchored to a component with a role of body, Apple News Format might flow text around the component. If you specify rangeStart, you must include rangeLength. target: The id or name attribute of an HTML element in another component. Set the  component containing the target element to html. targetComponentIdentifier: The identifier of the component to anchor to. targetComponentIdentifier can’t refer to the current component’s parent, child components, or components in another container. If you omit this property, Apple News Format applies the anchor to the parent component, if one exists. If a parent component doesn’t exist and you don’t specify the targetComponentIdentifier, Apple News Format ignores the anchor.

## Mentioned in

Positioning the Content in Your Article Wrapping Text Around a Component

## Discussion

Discussion Use the Anchor object to anchor one component (called the origin) to another component (called the target). You can use an anchor to align components vertically. For example, you can anchor a caption component to a photo component and choose whether you want the caption aligned to the top, bottom, or center of the photograph. You can also use an anchor to position a child component within its parent container. For information about using anchors within containers, see Nesting Components in an Article. note: The vertical placement of the anchored components can vary on different devices depending on the size of the display area of the device. You can use this object in Component. Example {   "components": [     {       "role": "container",       "layout": {         "minimumHeight": 100       },       "style": {         "backgroundColor": "goldenrod"       },       "components": [         {           "role": "title",           "text": "Article Title",           "anchor": {             "targetAnchorPosition": "bottom"           }         }       ]     }   ] }

## See Also

### Related Documentation

- [Creating a Floating Caption](applenews/creating-a-floating-caption.md)
- [Creating an Inset Pull Quote](applenews/creating-an-inset-pull-quote.md)
- [Creating an Inset Photo](applenews/creating-an-inset-photo.md)
- [Creating a Sidebar](applenews/creating-a-sidebar.md)

### Article Layout

- [Planning the Layout for Your Article](applenews/planning-the-layout-for-your-article.md)
- [Positioning the Content in Your Article](applenews/positioning-the-content-in-your-article.md)
- [Wrapping Text Around a Component](applenews/wrapping-text-around-a-component.md)
- [Layout](applenewsformat/layout.md)
- [ComponentLayout](applenewsformat/componentlayout.md)
- [Margin](applenewsformat/margin.md)
- [AutoPlacementLayout](applenewsformat/autoplacementlayout.md)
- [AdvertisingLayout](applenewsformat/advertisinglayout.md)