List-style-type Proposal for the Disclosure Triangle of <details>

Hi,
   For the new HTML <details> and <summary> elements, we are making use 
of the display: list-item and associated list-style-* properties to 
achieve the desired default rendering.  The rendering requires that a 
disclosure widget be rendered, typically a triangle arrow, and the 
'list-style-type' property and the ::marker pseudo element suits this 
use case well.

Full details of our proposal can be found on the whatwg list [1] (Scroll 
down to the section labelled "Proposed Solution").

However, list-style currently lacks a suitable set of glyphs that can be 
used to represent a disclosure triangle, and so we have created our own.

We have introduced '-o-disclosure-open' and '-o-disclosure-closed' 
values, which correspond to a down-pointing arrow, and a right- and 
left-pointing arrows (depending on writing direction), respectively.

We have opted to use these glyphs for this [2].

U+25B8 (▸) BLACK RIGHT-POINTING SMALL TRIANGLE
U+25C2 (◂) BLACK LEFT-POINTING SMALL TRIANGLE
U+25BE (▾) BLACK DOWN-POINTING SMALL TRIANGLE

We also think that these glyphs would be suitable for use as general 
purpose list markers too, and so it's worth standardising them as 
list-style-types.

A demo of how we intend to use these is available [3], illustrated using 
list-style-image with SVG images. (The demo works in Firefox and Opera. 
WebKit won't render the SVG for list-style-image).

[1] 
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-April/031132.html
[2] http://lachy.id.au/dev/2011/triangle.html
[3] http://lachy.id.au/dev/2011/details.html

-- 
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/

Received on Thursday, 7 April 2011 14:53:28 UTC