Re: Defining safe areas for media devices and set top boxes

 João,


Could this not be achieved through a simple media query such as the following?


@media tv and (max-width: Npx) {}


Your aim appears to manually target the TV media with specific styles, and this would be achieved by hiding, resizing, or repositioning elements within the example above.


Have I missed the point?




Regards,

Nick Jones
Technical Director
Meanbee Internet Solutions Limited


On Thursday, 2 December 2010 at 17:45, João Eiras wrote:

> Hi gentlemen.
> 
> My team is working with set top boxes and other media devices which connect to TVs. Depending on how the device is connect to the TV (HDMI, RCA cable, etc), and depending on the TV itself, content might be cropped. Therefore, one needs to define the safe area, which is the part of the browser/application viewport that is not cropped and can be safely used to render meaningful content, while the parts that can be cropped should just have content that is not important or purely aesthetic, so the cropped parts will look smoothly integrated with the TV edges, instead of the browser just rendering a couple of black stripes.
> 
> So, there needs to be a way to detect when the user agent expects the web page/application to be safe/unsafe area aware. The most correct and straightforward way to accomplish this, would be to use a media query, for instance:
> 
> # @media unsafe-area {
> # :root { padding: 32px 64px }
> # }
> 
> where the "unsafe-area" would be a media query the user agent would apply if need be.
> Then, the configuration could require either a region of 32px or even 64px, or something in between, to be defined as unsafe, being, again, known by the user agent. There would be two ways to accomplish this:
> 
> a) defining keywords that could be used as valid length values
> # @media unsafe-area {
> # :root { padding: unsafe-area-top-height unsafe-area-right-width unsafe-area-bottom-height unsafe-area-left-width }
> # }
> Pros: would make everything much more flexible, and the keywords could be uses *anywhere* where a length is needed.
> Cons: Would probably be quite hard and awkward to specify and implement.
> 
> b) extend the media query
> # @media unsafe-area and (min-unsafe-area-top-height:32px){
> # :root { padding-top: 32px }
> # }
> # @media unsafe-area and (min-unsafe-area-bottom-height:32px){
> # :root { padding-bottom: 32px }
> # }
> Pros: no need to overload the meaning of a css length
> Cons: Would make css editing more hard due to all the possible combinations, instead of having a way to get a deterministic value.
> 
> This would also require some sort of scripting binding, but out of scope of this working group.
> 
> So, what do you think ?
> 
> Note: ideas for knowing the size of the edges are welcome, and if you don' t like "unsafe-area", any decent naming is fine by me.
> 
> Thank you for your time.
> 
> 
> 
> 
>