Style Attributes in Communication Cloud Service

Communication Cloud Service provides a wide range of style attributes for designing contents, layouts and documents that you want to create.

The following table lists the style categories and the attributes that you can configure:

Table 2-1 Style Attributes in Communication Cloud Service

Category Style Attribute
Accessibility Ignore Content allows you to configure and apply to the content, such that the online reader tools exclude specific elements from processing. For example, barcodes, images and other non-essential visual components.
Additional Additional sets the spacing and stacking order of elements.
  • Collapse Space removes the empty space in the content. You can select Horizontal, Vertical, or None to keep the spacing unchanged.
  • Z Index sets the stacking order of positioned elements and their descendants, as well as flex and grid items, in the z-axis (depth). Elements with a higher z-index value appear in front of those with a lower z-index, when they overlap.
Background Background sets the properties such as color and background content.

  • Color sets the background color of the window. You can choose the color using its RGB value or by picking it from a color wheel.

  • Associations help you to decide where the background image appears, how it blends with other contents, whether it repeats or stretches, and how the background image fits in the space.

You can associate one or more Background Image with the style. Select the Background Image and set the Type, Position, Blend Mode, Repeat, and Size.

Border Border controls the appearance and behavior of an element's borders.
  • Border sets the style, color, and width of all the four borders of the document. You can apply it to all the borders, at once, or customize each border individually using the Target Individual Border slider.
    • Color sets the color of the border.
    • Styles sets the style of the border.
    • Border sets the width of the border using the unit selected in Unit.
  • Border Collapse determines whether the borders are collapsed into a single border or remain separate.
  • Border Spacing sets the horizontal and vertical spaces between the borders.
  • Border Radius sets the rounded corners using the selected value and the unit in the Unit. It can be applied on Content, Layout or Document. Border Radius is dependent on the Border Style (how?). You can apply it to all the corners, at once, or customize each corner individually using the Target Individual Border Radius slider.

    To know more about the behavior of border radius across different border styles in HTML and PDF outputs, refer to the Table 2-2.

Note:

For HTML output, using a percentage (%) as the unit for border size is not supported.
Grid Grid sets the layout structure using the grid area and gaps.
  • Grid Template Area defines the rows of named areas that define the grid pattern.

    Using the named grid items, you can define and preview the grid area structure by specifying how to display the rows and columns. If you repeat the name of a grid area, it results in spanning of content in those cells. You can add new rows and modify them.

  • Gap defines the space between rows and columns in a Grid layout.

    • Column Gap sets the space between columns in the grid in the specified Units.

    • Row Gap sets the gap size between rows in the grid in the specified Units.

List List sets the appearance and behavior of list elements.
  • List Level sets the level of the list element.
  • List Style Type sets the style type for the list element.
  • Start specifies the initial number the list begins with.
  • List Style Prefix sets whether the list needs to be continued sequentially across multiple list sections without restarting.
  • List Style Position sets the position for the list element.
  • List Text Prefix sets the string to place before the marker (circle, square, and so on) of a list item.

Note:

The default indent for a list is set to 40px.??
Margin Margin sets the space around the document using the specified unit. It defines the area outside the element's border. You can apply it to all the sides, at once, or customize each side individually using the Target Individual Margin slider.
Padding Padding sets the space inside the element’s border using the specified unit. It is the area between the content and the border of the element. You can apply it to all the sides, at once, or customize each side individually using the Target Individual Padding slider.

Note:

Default Table cell padding is set to 12px (left side and right side). ??
Page Page sets the page size, orientation, and controls where page breaks occur before or after the content.

  • Page Size sets the size and orientation of the box which is used to represent a page. This size corresponds to the target size of the printed page if applicable.

    You need to select either one of the following:
    • Page Size Name
    • Width, Height, and Unit
    • Orientation
  • Page Break sets when the content to start on a new printed or paginated page. Page Break Before always starts a new page before current element (Content or Layout), whereas, Page Break After always start a new page after current element (Content or Layout).
Text Text sets various font and text properties including font style, size, color, alignment, weight, spacing, and decorations to control how text appears in the content.
  • Font sets the specific style for the texts to display the content.
    • Font Family is a set of fonts that have a common design. Available Font Families are based on the fonts imported in Font configuration.
    • Font Style specifies the style for text. Available Font Styles are based on the fonts imported in Font configuration.
    • Color defines the color in which the text is displayed.
  • Text Align determines the positioning of text.
    • Text Indent sets the space before the first line of a paragraph, measured in the specified Unit.
    • Text Align determines how the text is positioned within a layout.
    • Vertical Align sets the vertical positioning of inline elements (like text or images) relative to the surrounding text.
    • Line Height sets the amount of space used for lines.
  • Font Size sets the size of the text.
    • Font Size Name sets the specific size for the texts, such as Small, Large, Medium and so on.
    • Font Size Number sets the font size in the specified Units.
  • Font Weight sets how thick or thin characters in text should be displayed.
    • Font Weight Name sets the weight of the font, such as Thick, Light, Bold, and so on.
    • Font Weight Number specifies the numeric value on how thick or thin the texts appear.
  • Text Decoration sets the decorative lines to text, and can also control the Style and Color of those lines.
    • Line specifies the decorative lines to text, such as Underline, Overline, or Line-through.
    • Style defines the appearance of the decorative line.
    • Color specifies the color of the decorative line.

Note:

The default font size is set to 10pt.??
See Maintaining a Font.
Transform
  • Scale lets you scale and resize the image or the barcode content in the specified Units. You can apply it to Width and Height, at once, or customize them individually using the Target Individual Scale slider.

    Note:

    You can select Unit as percentage (%) only.
  • Size defines the width and height of the image or the barcode.
    • Width sets the width of the object. If the width is not specified, the original width is used.
    • Minimum Width sets the minimum width of the object.
    • Maximum Width sets the maximum width of the object.
    • Height sets the height of the object. If the height is not specified, the original height is used.
    • Minimum Height sets the minimum height of the object.
    • Maximum Height sets the maximum height of the object.

  • Note:

    Selecting values for Scale and Size simultaneously can lead to styling conflicts.
Elements Paragraph sets the range of paragraphs to which the formatting needs to be applied. You can either select from the drop-down and/or enter paragraph number and/or paragraph range with hyphen as a delimiter.

For example: 3-10
Table decides how to apply styling to different parts of a table. This includes styling the table header, row header, individual cells, table rows, or table columns.
  • Table sets the styling for the entire table. Only All option is available for selection.
  • Table Row sets the styling for specific table rows. You can select a value from the drop-down or specify row number(s) and/or range(s), for example: 3-10.
  • Table Column sets the styling for specific table columns. You can select a value from the drop-down or specify column number(s) and/or range(s), for example: 3-10.
  • Table Cell sets the styling for specific cells. Enter individual cell numbers or ranges separated by commas. For example: 2,4 or 3-10,2-5 or 3-9,2 or 3,5-12.
  • Table Header Row sets the styling for the table header rows. Only All option is available for selection.
  • Table Header Column sets the styling for the table header columns. Only All option is available for selection.

Note:

For email distribution, check for the best practices and workarounds mentioned in the Email Configuration Matrix topic.
The following table lists the behavior of border radius across different border styles in HTML and PDF output:

Table 2-2 Border Radius across different border styles in HTML and PDF output

Border Style HTML PDF
Solid Border is displayed with radius. Border is displayed with radius.
Dashed Border is displayed with radius. Border is displayed with radius.
Dotted Border is displayed with radius. Border is displayed with radius.
Double Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Groove Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Inset Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Outset Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Ridge Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Hidden Border is not displayed. Border is not displayed.
None Border is not displayed. Border is not displayed.