DropCapStyle

The object for defining the drop cap text style to use in the first paragraph in a text component.

Declaration

object DropCapStyle

Properties

Name	Type	Description
`numberOfLines` Required	integer	The approximate number of text lines this drop cap spans. For example, if `numberOfLines` is set to `3`, and the top of the drop cap is aligned with the top of the first line, the bottom of the drop cap drops to the bottom of the third line, although the actual drop amount can vary depending on the device and its orientation. Minimum: `2` Maximum: `10`
`backgroundColor`	`Color`	The background color of the drop cap. By default, no background color is applied, making the background effectively transparent.
`fontName`	string	The PostScript name of the font to use for the drop cap. By default, the drop cap inherits the font of the component it’s in.
`numberOfCharacters`	integer	A number that indicates the characters to render in the drop cap style. Minimum: `1` Maximum: `4` Default value`: 1`
`numberOfRaisedLines`	integer	The number of text lines this drop cap raises. For example: When `numberOfRaisedLines` is `3`, and `numberOfLines` is `5`, the top of the drop cap raises above the first line by 3 lines and and the bottom of the drop cap drops to the bottom of the second line.
`padding`	integer	A number that sets the padding of the drop cap in points. When padding is applied, the drop cap is smaller than the box that surrounds it. Default value: `0`
`textColor`	`Color`	The color of the drop cap. The color defaults to the color of the associated text.

Mentioned in

Defining and Applying Text Styles

Discussion

Use a DropCapStyle object to define a drop cap that a ComponentTextStyle object can use. You can apply drop caps to the first paragraph of the following components:

You can use this object in TextStyle and ComponentTextStyle.

Example

{
  "componentTextStyles": {
    "exampleStyle": {
      "fontName": "HelveticaNeue",
      "fontSize": 20,
      "dropCapStyle": {
        "numberOfLines": 5,
        "numberOfRaisedLines": 2,
        "numberOfCharacters": 1,
        "fontName": "HelveticaNeue",
        "textColor": "#FFF",
        "backgroundColor": "#000",
        "padding": 5
      }
    }
  }
}