Basic Layout

From open-smil
Jump to: navigation, search

Basic Layout

SMIL Layout

SMIL layout is formed by media objects and layout elements. Layout elements will split a full screen display into multiple regions for displaying different media objects at the same time. There is no need to define any layout elements if a media object will be displayed in full screen.

Layout elements

Layout elements Description
layout The layout element determines how the elements in the document's body are positioned on an abstract rendering surface.
root-layout The root-layout element determines the value of the layout properties of the root element, which in turn determines the size of the window in which the SMIL presentation is rendered.
region The region element controls the position, size and scaling of media object elements.


  • root-layout sample:
  <root-layout width="1280" height="800"/>
The screen width is 1280 pixels and the screen height is 800 pixels, the SMIL presentation will be rendered at this screen size.
  • Region pixels and percentage sample:
  <root-layout width="1280" height="800"/>
  <region xml:name="regTop1" left="128" top="0" width="1024" height="400"/>
  <region xml:name="regTop2" left="10%" top="0" width="80%" height="50%"/>

The position of regTop1 and regTop2 are set as "128 pixels away from the left border of the rendering window", and both of their size are 1024x400 pixels.

Basic region attributes

Region attributes Description
width region's width
height region's height
left region's left offset
right region's right offset
top region's top offset
bottom region's bottom offset

Using layout element for media object

2-region example:

<?xml version="1.0"?>
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
  <head>
    <layout>
      <root-layout width="1920" height="1080"/>
      <region xml:id="topRegion"    left="0"   top="0"   width="100%" height="50%"/>
      <region xml:id="bottomRegion" left="0"   top="50%" width="100%" height="50%"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="video1.mp4" region="topRegion" repeatCount="indefinite"/>
      <img src="pic1.jpg" region="bottomRegion"/>
    </par>
  </body>
</smil>
The screen is split into 2 regions. A video will be displayed at the top region and a image will be displayed at the bottom region.
  • Result:

2region.jpg

Image 2

  • Screen layout explanations:

2regionWithText.jpg

Image 3

Layout related attributes

There are more parameters for media objects fitting:

Region layout attributes Description
fit This attribute specifies the behavior if the intrinsic height and width of a visual media object differ from the values specified by the height and width attributes in the region element. This attribute does not have a one-to-one mapping onto a CSS2 property, but may be simulated in CSS2.
regPoint This value uniquely identifies the registration point to be used for the placement of the object. The value should be an XML identifier of a regPoint element. The predefined registration points have the same meaning relative to the region as the regAlign attribute values have relative to the media. The default value is inherited from the regPoint value defined for the associated region. This implies a default behavior of center.
regAlign This attribute is identical to the regAlign attribute on media objects defined below, except that it defines a default alignment policy for all media objects placed in the region. The default value for this attribute when used on the region element is center.
mediaAlign This value uniquely identifies a short-hand notation for combining set combinations of regAlign and regPoint attributes.
z-index The use and definition of this attribute are identical to the "z-index" property in the CSS2 specification.

Layout "fit" attribute usage

"fit" value Description Scale Distort Crop
hidden(default) Has the following effect:
If the intrinsic height (width) of the media object element is smaller than the height (width) defined in the region element, render the object starting from center.
If the intrinsic height (width) of the media object element is greater than the height (width) defined in the region element, render the object starting from the top (left) edge until the height (width) defined in the region element is reached, and clip the parts of the object below (right of) the height (width).
No No Yes if media object size is larger than region size
meet Scale the visual media object while preserving its aspect ratio until its height or width is equal to the value specified by the height or width attributes, while none of the content is clipped. The object's left top corner is positioned at the top-left coordinates of the box, and empty space at the right or bottom is filled up with the background color. Yes if media object size is different from region size No No
meetBest The semantic of this value is identical to meet except that the image is not scaled to greater than 100% in either dimension. This limits degradation of upwardly-scaled media content. Yes if media object width is larger than region size width or media object height is larger than region height No No
slice Scale the visual media object while preserving its aspect ratio so that its height or width are equal to the value specified by the height and width attributes while some of the content may get clipped. Depending on the exact situation, either a horizontal or a vertical slice of the visual media object is displayed. Overflow width is clipped from the right of the media object. Overflow height is clipped from the bottom of the media object. Yes if media object size is different from region size No Yes if media object width-to-height ratio is different from region width-to-height ratio
fill Scale the object's height and width independently so that the content just touches all edges of the box. Yes if media object size is different from region size Yes No


This example display a 1920x600 pixels image at 300x300 pixels region and at 960x1080 pixels region with different fit attribute:

<?xml version="1.0"?>
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
  <head>
    <layout>
      <root-layout width="1920" height="1080"/>
      <region xml:id="reg1" width="300" height="300" fit="hidden"/>             <!-- change fit here for testing other case -->
      <region xml:id="reg2" left="960" width="960" height="1080" fit="hidden"/> <!-- change fit here for testing other case -->
    </layout>
  </head>
  <body>
    <par>
      <img src="pic2.jpg" region="reg1"/>
      <img src="pic2.jpg" region="reg2"/>
    </par>
  </body>
</smil>


  • pic1.jpg

Pic1.jpg

Image 4

  • fit="hidden": Image is not scaled, but cropped because region size is larger than image size:

Hidden.jpg

Image 5

  • fit="meet" or fit="meetBest": Image is scaled with original width-to-height ratio:

Meet.jpg

Image 6

  • fit="slice": Image is scaled with original width-to-height ratio and cropped:

Slice.jpg

Image 7

  • fit="fill": Image scaled and distorted:

Fill.jpg

Image 8

Layout "mediaAlign", "regPoint", and "regAlign" attributes usage

mediaAlign attribute defines a combination of regAlign and regPoint attributes:

mediaAlign Same as
topLeft regAlign="topLeft" regPoint="topLeft"
topMid regAlign="topMid" regPoint="topMid"
topRight regAlign="topRight" regPoint="topRight"
midLeft regAlign="midLeft" regPoint="midLeft"
center regAlign="center" regPoint="center"
midRight regAlign="midRight" regPoint="midRight"
bottomLeft regAlign="bottomLeft" regPoint="bottomLeft"
bottomMid regAlign="bottomMid" regPoint="bottomMid"
bottomRight regAlign="bottomRight" regPoint="bottomRight"

This example demosrates a 400x266 pixels image in a 1920x1080 pixels region with 9 different mediaAlign:

<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
  <head>
    <layout>
      <root-layout width="1920" height="1080"/>
      <region xml:id="reg1" width="100%" height="100%"/>
    </layout>
  </head>
  <body>
    <par>
      <img src="pic3.jpg" region="reg1" mediaAlign="topLeft"/>     <!-- topLeft -->
      <img src="pic3.jpg" region="reg1" mediaAlign="topMid"/>      <!-- topMid -->
      <img src="pic3.jpg" region="reg1" mediaAlign="topRight"/>    <!-- topRight -->
      <img src="pic3.jpg" region="reg1" mediaAlign="midLeft"/>     <!-- midLeft -->
      <img src="pic3.jpg" region="reg1" mediaAlign="center"/>      <!-- center -->
      <img src="pic3.jpg" region="reg1" mediaAlign="midRight"/>    <!-- midRight -->
      <img src="pic3.jpg" region="reg1" mediaAlign="bottomLeft"/>  <!-- bottomLeft -->
      <img src="pic3.jpg" region="reg1" mediaAlign="bottomMid"/>   <!-- bottomMid -->
      <img src="pic3.jpg" region="reg1" mediaAlign="bottomRight"/> <!-- bottomRight -->
    </par>
  </body>
</smil>
  • mediaAlign:

MediaAlign.jpg

Image 9

  • mediaAlign Screen layout explanations:

MediaAlignWithText.jpg

Image 10

This example demonsrates how to align the center of a 400x266 pixels image at region's topMid:

<?xml version="1.0"?>
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
  <head>
    <layout>
      <root-layout width="1920" height="1080"/>
      <region xml:id="reg1" width="100%" height="100%"/>
    </layout>
  </head>
  <body>
    <par>
      <img src="pic3.jpg" region="reg1" regAlign="center" regPoint="topMid"/>
    </par>
  </body>
</smil>
  • Result:

RegAlignPoint.jpg

Image 11

Layout "z-index" attribute usage

The use and definition of this attribute are identical to the z-index property in the CSS2 specification, with the following exception:

If two boxes generated by elements A and B have the same stack level, then:

  • If the display of an element A starts later than the display of an element B, the box of A is stacked on top of the box of B (temporal order).
  • Else, if the display of the elements starts at the same time, and an element A occurs later in the SMIL document text than an element B, the box of A is stacked on top of the box of B (document tree order as defined in CSS2).

Note: z-index only work with media objects which contain region attribute(s).

In this example, "video1" is needed to be displayed on top of the "pic1" image, so a higher z-index is set to the "video1" image:

<?xml version="1.0"?>
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
  <head>
    <layout>
      <root-layout width="1920" height="1080"/>
      <region xml:id="reg1" width="100%" height="100%"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="video1.mp4" region="reg1" z-index="4" repeatCount="indefinite"/>
      <img   src="pic1.jpg"   region="reg1" z-index="3"/>
    </par>
  </body>
</smil>
  • Result:

Zindex.jpg

Related