Object

Layout

The object for defining columns, gutters, and margins for your article’s designed width.

Properties

columns
integer
(Required)

The number of columns this article was designed for. You must have at least one column.

Using a 7-column design allows components to start in columns 0 to 6, and be between 1 and 7 columns wide. An article that is designed with 7 columns provides sufficient layout information to automatically resize for iPad and iPhone sizes. An article designed for 10 columns provides a little more detail for the layout system. Below 5 columns there may not be sufficient information for the layout system to automatically maintain your intended design when scaling down to smaller devices.

width
integer
(Required)

The width (in points) this article was designed for. This property is used to calculate down-scaling scenarios for smaller devices.

The width of the document must be sufficient to fit two margin values and the gutter values that will be needed between each of the columns.

The width cannot be negative or 0. As a best practice, set the width to the width of the iPad device. This helps you see the effects of positioning components in different columns.

This property is used to automatically scale down article content for smaller devices. With a 7-column design and a width of 1024 points, the design is optimal for a landscape aspect ratio on an iPad device and scales down on iPhones.

For an illustration of margins, gutters, and the document width, see Set Up the Layout for Your Article .

gutter
integer

The gutter size for the article (in points). The gutter provides spacing between columns. This property should always be an even number; odd numbers are rounded up to the next even number. If this property is omitted, a default gutter size of 20 is applied. If the gutter is negative, the number will be set to 0.

Note that the first column does not have a left gutter, and the last column does not have a right gutter.

The width of the document must be sufficient to fit two margin values and the gutter values that will be needed between each of the columns.

Note that when using a width of 1024, a margin of 60, and 7 columns, the gutter cannot be greater than 150.

margin
integer

The outer (left and right) margins of the article, in points. If this property is omitted, a default article margin of 60 is applied. If the margin is negative, the number is set to 0. If the margin is greater than or equal to the width/2, the article delivery fails.

The margins are sized down slightly when the article is automatically scaled down for smaller devices.

Discussion

The Layout object defines the column-system rules for the components in your document. The column system controls the horizontal position and spacing of your components. This information is used by the News app to automatically resize your article for different screen sizes.

After you define the layout for your article, add the components of your article to ArticleDocument.componentLayouts and then position each component using a ComponentLayout object.

This object can be used in ArticleDocument.

Example

{ "version": "1.7", "identifier": "SampleArticle", "language": "en", "title": "Apple News", "subtitle": "A look at the features of Apple News", "layout": { "columns": 7, "width": 1024, "margin": 75, "gutter": 20 },}

See Also

Article Layout

Planning the Layout for Your Article

Define a layout that supports the look you want for your article.

Positioning the Content in Your Article

Align article components with columns in your layout.

Wrapping Text Around a Component

Define the layout of a text component to wrap around another component.

object ComponentLayout

The object for defining the positioning for a specific component within the article’s column system.

object Anchor

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

object Margin

The object for defining the space above and below a component.

object ContentInset

The object for defining the space around the component content on one or more sides.

Deprecated
object AdvertisingLayout

The object for defining the margin above and below advertising components.

Deprecated
object AutoPlacementLayout

The object for defining the margin above and below advertising components.