Learn how to make your content fit on your TV according to the purpose of the specific content, using Grid provided by webOS TV.
What is the Grid?
The layout grid provides consistent layout units used to declare panel width. The layout grid gives developers, and designers a common point of reference when designing application screens.
How Do I Use the Grid?
Use Grid Units to measure the panel width. Use the Gutter space between the panels and objects.
|20px width x 40px height||60px width x 40px height|
The safe area is an area where TV images appear. For this safe area, webOS TV screen has a 20 px margin area around the edges as below image.
Be careful not to place UI controls or icons outside of this area. You must place all selectable objects, text, and company branding logos within the safe area.
However, if you develop an app using the panel control provided by the Moonstone library, it maintains a 20 px padding inside of the panel as below, so controls don't get clipped at the edges of the webOS TV screen.