W3C home > Mailing lists > Public > www-style@w3.org > January 2016

[selectors4][css-round-display] Suggest a new type of pseudo class to support scrolling in rounded viewports

From: Jihye Hong <jh.hong@lge.com>
Date: Wed, 27 Jan 2016 11:46:17 +0900
To: "'www-style list'" <www-style@w3.org>
Message-ID: <004701d158ac$e535e9f0$afa1bdd0$@hong@lge.com>
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:35 UTC