Skip to content
Television Simulator

Horizontal Split

Horizontal split (h-split) is a layout that divides the screen into two or more side-by-side sections. Each section can contain any engine, including another layout, allowing for complex arrangements of content.

h-split:
  - image:
      src: placeholders/example-ad.webp
      aspectRatioBehavior: contain
  - generator: color-bars

This layout will display the example ad on the left side of the screen and color bars on the right side.

Use the object form when you need layout options such as gaps or a legacy splitPercentage:

h-split:
  gapSize: 8
  gapColor: black
  components:
    - image:
        src: placeholders/example-ad.webp
        aspectRatioBehavior: contain
    - generator: color-bars

Properties

Section titled “Properties”

components required since TVS 6.0.0

Section titled “components ”

Type: content engine[]

The content sections to display from left to right. The h-split value can be this array directly, or an object with a components array when you also need split layout options. Each component can be any engine, including another layout.

_split.weight since TVS 6.0.0

Section titled “_split.weight ”

Type: number

Default: 1

Description: The relative width of one component compared with the other components in the split. For example, a component with _split.weight: 2 takes twice as much available width as a component with the default weight of 1.

h-split:
  - image: placeholders/example-ad.webp
  - generator: color-bars
    _split:
      weight: 2
  - color: black

splitPercentage

Section titled “splitPercentage”

Type: number

Default: 0.5

Description: Legacy two-section split control. When exactly two components are present and neither component specifies _split.weight, this sets the percentage of the screen width allocated to the first component, ranging from 0.0 to 1.0. For example, 0.3 makes the first section 30% of the screen width and the second section 70%.

gapSize

Section titled “gapSize”

Type: number

Description: The pixel size of the gap between the left and right sections. The default value is 0.

gapColor

Section titled “gapColor”

Type: string

Description: The color of the gap between the left and right sections. Accepts any valid CSS color value. The default value is black.