ConditionalComponentTextStyle
The object for defining conditional properties for a component text style, and when the conditional properties are in effect.
Declaration
object ConditionalComponentTextStyleProperties
| Name | Type | Description |
|---|---|---|
conditions Required | (Condition | [Condition]) | An instance or array of conditions that, when met, cause the conditional component text style properties to take effect. |
backgroundColor | (Color | string("none")) | The background color for text lines. This value defaults to transparent. To remove a previously set condition, use |
dropCapStyle | (DropCapStyle | string("none")) | The style of drop cap to apply to the first paragraph of the component. To remove a previously set condition, use |
firstLineIndent | integer | The indent, in points, of the first line of each paragraph. |
fontFamily | (string | string("system")) | The font family to use for text rendering; for example, You can use the value |
fontName | string | The font name to use to refer to an explicit font variant’s PostScript name, such as |
fontScaling | boolean | A Boolean value that indicates whether scaling of font sizes for various screen sizes is enabled. By default, all font sizes in Apple News Format are scaled down on smaller screen sizes. |
fontSize | integer | The size of the font, in points. By default, the font size is inherited from a parent component or a default style. As a best practice, try not to go below 16 points for body text. Apple News may automatically resize the |
fontStyle | string | The font style to apply for the selected font. Valid values:
|
fontWeight | (integer | string) | The font weight to apply for the selected font. In addition to explicit weights (named or numerical), If Apple News can’t find a font variant with the given specifications in the provided font family, it selects an alternative with the closest match. If Apple News doesn’t find a bold/bolder font, it doesn’t create a faux-bold alternative, and instead uses the closest match. Similarly, if Apple News can’t find an italic or oblique font variant, it won’t slant text or make it appear italicized. Valid values:
|
fontWidth | string | The font width for the selected font (known in CSS as font-stretch). This value defines the width characteristics of a font variant between normal, condensed, and expanded. Some font families are categorized by width (for example, Valid values:
|
hangingPunctuation | boolean | A Boolean that defines whether Apple News positions punctuation outside the margins of the body text. |
hyphenation | boolean | A Boolean that indicates whether Apple News hyphenates text when necessary. By default, only components with the role |
hyphenationMinimumCharactersAfter | integer | The minimum number of characters required after the hyphen to enable hyphenation. |
hyphenationMinimumCharactersBefore | integer | The minimum number of characters required before the hyphen to enable hyphenation for a word. |
hyphenationMinimumWordLength | integer | The minimum number of characters required to enable hyphenation for a word. |
hyphenationZone | integer | The area in points from the right edge of the text component before which a word needs to start to enable hyphenation. By default, the value is set to 18 points. A larger value reduces the allowable hyphenation area of a word, which can result in a more ragged appearance of the text along the right margin. |
lineBalancing | boolean | A Boolean value that defines whether the system enables line balancing for the text component. |
lineHeight | integer | The default line height, in |
linkStyle | (TextStyle | string("none")) | Text styling for all links within a text component. To remove a previously set condition, use |
orderedListItems | (ListItemStyle | string("none")) | An object for use with text components with HTML markup. You can create text styles containing an To remove a previously set condition, use |
paragraphSpacingAfter | integer | An object that defines the spacing, in points, after each paragraph, relative to the line height. |
paragraphSpacingBefore | integer | An object that defines the spacing, in points, before each paragraph, relative to the line height. |
strikethrough | (TextDecoration | boolean) | The text strikethrough. Set |
stroke | (TextStrokeStyle | string("none")) | The stroke style for the text outline. By default, Apple News omits To remove a previously set condition, use |
textAlignment | string | The justification for all text within the component. If Apple News omits |
textColor | Color | The text color to apply to the selected text. |
textShadow | (TextShadow | string("none")) | The text shadow for this style. To remove a previously set condition, use |
textTransform | string | The transform to apply to the text. Valid values:
|
tracking | number | The amount of tracking (spacing between characters) in text, as a percentage of the font size. The actual spacing between letters is determined by combining information from the font and font size. Example: Set |
underline | (TextDecoration | boolean) | The text underlining. You can use this style for links. Set |
unorderedListItems | (ListItemStyle | string("none")) | An object for use with text components with HTML markup. You can create text styles containing an To remove a previously set condition, use |
verticalAlignment | string | The vertical alignment of the text. You can use this property for superscript and subscript. To override values specified in parent text styles, use Defaults to The values |
Mentioned in
Discussion
Use the ConditionalComponentTextStyle object to define an array of conditional component text style properties and the conditions under which to apply them. When a condition is met, the value of a property in ConditionalComponentTextStyle overrides the value of the same property if you define it in the parent ComponentTextStyle object. See ComponentTextStyle.
Example
{
"components": [
{
"role": "title",
"text": "Lorem Ipsum Dolor Sit Amet",
"textStyle": "exampleTextStyle"
}
],
"componentTextStyles": {
"exampleTextStyle": {
"fontSize": 24,
"conditional": [
{
"fontSize": 24,
"conditions": [
{
"minViewportWidth": 0
}
]
},
{
"fontSize": 48,
"conditions": [
{
"minViewportWidth": 415
}
]
},
{
"fontSize": 64,
"conditions": [
{
"minViewportWidth": 769
}
]
}
]
}
}
}