Align article components with columns in your layout.
- Apple News Format
- Apple News API
You set the number of columns you want in your design using the
layout property of Article Document. To determine the position for a component, like a heading, you align the left edge of the component with a column in your layout. (The component will automatically line up with the left edge of the column.) See Layout and Planning the Layout for Your Article.
Layout columns are referred to by number—from left to right—starting with 0. You use this column system to figure out the positioning for all the components in your article and then, in your
article file, you’ll use a ComponentLayout object to specify the position settings.
Specify Positions for Components
Specify the starting column and how many columns you want a component to span. For example, in the previous figure, a pull quote component is positioned at column 0 and spans three columns. The figure also shows a caption component positioned at column 7 that spans three columns.
To specify the positioning for components, you create a component layout object at one of two levels. If you create a component layout object in ArticleDocument.componentLayouts, it can be referred to by multiple components. Two components that use the same component layout object start in the same column, span the same number of columns and so on.
If you create a component layout object as a property for a specific component, it can be used only by that component.
The following code example shows a component layout object called
heading1Layout. This component layout object has been created in ArticleDocument.componentLayouts so it can be used by other components in the article.
Fine-Tune the Position of Components
You can use the
margin property of a ComponentLayout object to specify the top and bottom margins (in points) for a component and to create space above and below the component. Specify a single number to use for both measurements, or—to specify different settings for the top and bottom margins—use the Margin object.
In addition to using
margin, you can also use the
padding property of the
Component object to define the space inside a component. With the
padding property, you can set spacing for both sides of the component, as well as for the top and bottom. The
padding property is different from margins in that it applies to the spacing inside the component; margins are applied to the spacing of the component within the article.
An Anchor object located within the component object lets you associate the placement of one component with another component so you can align components vertically in your layout. The position of the target component determines the position of the component that has the anchor.
You can further fine-tune the positioning of components in your article by creating component layout objects that: