- From: Jihye Hong <jh.hong@lge.com>
- Date: Wed, 27 Jan 2016 11:46:17 +0900
- To: "'www-style list'" <www-style@w3.org>
One of the issues in Round display is scrolling a long text or a list item in circular or rounded viewports. But when an element's width is fit to the diameter of a round display, some part of the item is clipped out of the display [1]. The first approach to solve this problem is creating a single-scroll layout for a group of elements on a page in the shape of the display. However, this approach is uncomfortable because it requires developers to layout every single page. The next method to deal with this problem is positioning elements in the area of an rectangle inscribed in the round display [2][3]. But it also has some drawbacks. There are some unfilled spaces between the edges of a inner rectangle and the edge of the display. The latest released smart watches, such as LG G watch Urbane LTE and Samsung Gear S2, use dynamic scaling and aligning when scrolling list items [4]. Specifically, an item in the middle of a list is center-aligned and has larger scale than the other. If it is scrolled to the upper part of the display, it becomes smaller and fading out. Whereas, when an item in the last part of the list is scrolled up to the middle part of the display, it will be getting bigger and fading in. This method gives users better scrolling UX. However the scrolling animation in this case is implemented by JS, so it triggers layout calculations which involve calculating the geometry (position and size) of all the elements for each frame. Therefore it has poor performance and may lead to skipped frames. To support the last approach which is used in general nowadays and the best solution for scrolling in the round display so far, I figured out an idea about a new type of pseudo-class, the regional pseudo-class. The regional pseudo-class is a functional pseudo class for selecting an element in a particular area of the round display. :region( [ center || left || top || right || bottom ]? ) The pseudo-class can have keyword values for parameters like above. Meaning of each keyword is: * center: matches if the element overlaps a center point of a containing block * left: matches if the element touches a left edge of a containing block * top: matches if the element touches a top edge of a containing block * right: matches if the element touches a right edge of a containing block * bottom: matches if the element touches a bottom edge of a containing block For implementing dynamic scaling and aligning in scrolling, we need to know the exact position of a target element and apply appropriate style on it depending the position. With the suggested pseudo-class, detecting the positions of elements can be implemented by CSS not by JS. Selecting the elements and applying appropriate styles on that could be done only with CSS. This is just a brief idea about the regional pseudo-class, but I think it can be useful for scrolling in rounded viewports. Thanks, Jihye [1] http://www.todaysiphone.com/wp-content/uploads/2015/05/Samsung-rotating-beze l-digital-crown-2-e1431552768383.png [2] http://l3.yimg.com/bt/api/res/1.2/8.od24bkzFwLTTs6maMPeQ--/YXBwaWQ9eW5ld3Nfb GVnbztxPTg1/http://media.zenfs.com/en-US/homerun/digital_trends_973/72ecac71 0482100c2e57d94239eda59e [3] http://developer.android.com/wear/images/02_uilib.png [4] https://github.com/jihyerish/jhRoundDisplay/blob/master/demo/garnet-datalist /dynamicScroll.png
Received on Wednesday, 27 January 2016 02:46:59 UTC