Root level members

On root level, the file can have the following members:

Member

Description

content

An ordered list of components.

Example:

{
// The version of the Digital Article format. The version is defined using a major and minor version.
"version": "2.0",
// Object containing the content of the article. Currently has one member, content, which is an ordered list of components
"data":{
// Ordered list of components
"content":[
{
// first component data...
},
{
// second component data...
}
]
}
}

Components

Component objects have the following members:

The members that components can have are listed in the following table:

Member

Description

identifier

Contains the component type.

id

A randomly generated unique ID.

content

Contains the data for directives in the HTML template of the component.

The structure of the content object depends on the fields available in the component type. The fields for each component type are described in the Digital components definition file (see above).

containers

For nesting another ordered list of components.

styles

Contains the value of a component property that is added as a CSS style class to the component HTML element.

inlineStyles

Contains inline CSS styles added to the HTML element of the component.

data

Contains data for component properties that do not fit into any of the other categories.

Example:

{
// The identifier contains the component type
"identifier": "title",
// A randomly generated unique ID
"id": "doc-1bpqed8bn0",
// Contains the data for directives in the HTML template of the component
"content": {},
// Nests another ordered list of components
"containers": {}
// Contains the value of a component property that is added as a CSS style class to the component HTML element
"styles": {},
// Contains inline CSS styles added to the component HTML element
"inlineStyles": {},
// Contains data for component properties that do not fit into any of the other categories
"data": {}
}

Text

Text is stored in a format suitable for Operational Transformation (OT), using the rich-text library.

Text of a component is stored in the content object and may have multiple text fields. The digital components definition file (see above) describes this data with the field type 'editable'.

The format in which it stores text changes represents the text as a series of inserts with attributes:

Images

The data of images is also stored in the content object and may have multiple images depending on the component type. The Digital components definition file (see above) describes this data with the field type 'image'.

Style component properties

Values of style component properties are applied as CSS classes to the component HTML element.

// Object containing the data of a component
{
// Object containing data for inline style component properties
"styles":{
// Adjusts the position of the component in the text
// Possible values: ["_left", "_right"]
"position": "_left",
// Defines the caption position of an image
// Not set means the caption is outside the image at the bottom.
"inside-caption": "_caption-inside",
// Controls Hero component image behavior.
// When not set the Hero image is fixed with regard to the view port.
// When set to _fixed-background it will scroll with the page.
"fixed-background": "_fixed-background",
// Controls the alignment of text. Applies to all text fields within the component.
"text-align": "_align-middle",
// Generic option to apply different style variants to the component
// The possible values range from "_option1" to "_option20".
"style": "_option1",
// Defines the fitting behavior for an image in a component
// Not set: Fits content to frame
// "_fit-frame-to-content": Fits frame to content
// "_fit-frame-height-to-content": Fits frame height to content
"fitting": "_fit-frame-to-content",
// Changes the slideshow play orientation to vertical. Defaults to horizontal when not present.
"slideshow-play-orientation": "_vertical",
// Enables/disables the slideshow auto-play
"slideshow-autoplay": "_auto-play",
// Enables/disables showing the filmstrip of the slideshow
"slideshow-filmstrip": "_filmstrip",
// Disables full-screen on tap in Adobe AEM when set to the value "_disable-fullscreen"
"disable-fullscreen": "_disable-fullscreen"
}
}

Inline Style component properties

Inline style component properties are applied as inline CSS to the components main HTML element.

The available inline style component properties are listed in the following table:

Member

Description

letter-spacing

Overrides the spacing behavior between text characters

line-height

Sets the amount of space between lines.

background-color

Overrides the background color of the component element.

// Object containing the data of a component
{
// Object containing data for inline style component properties
"inlineStyles":{
// Overrides the spacing behavior between text characters
// https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
// This property is generally available for components with text
"letter-spacing": "2",
// Sets the amount of space between lines
// https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
// This property is generally available for components with text
"line-height": "1.5",
// Overrides the background color of the component element
// https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
// This property is currently only available for the container component
"background-color": "rgba(53,103,255,1)"
}
}