<4D9DB7A4.50202@lachy.id.au>
Current votes: None.
On 2011-04-06 02:56, Lachlan Hunt wrote:
> To render this, the following CSS should be applied by the UA styleshee=
t.
>
> details>summary:first-of-type {
> display: list-item;
> margin-left: 1em; /* LTR-specific: use 'margin-right' for rtl element=
s */
> list-style-type: -o-disclosure-closed;
> }
>
> details[open]>summary:first-of-type {
> list-style-type: -o-disclosure-open;
> }
There are a few other issues that we have identified.
1. The rendering of details will, unfortunately, inherit the quirks mode=20
rendering of list-items, where the bullet is a fixed size in quirks=20
mode, and based on the font-size in standards mode. This is a quirk=20
implemented by Firefox, IE and Opera for display: list-item; though=20
WebKit doesn't seem to. We are not sure if this quirk is still required=20
for web compatibility.
2. If the author attempts to shoot their own foot off by using:
summary { display: none; }
This leaves an empty <details> box of zero height in the closed state=20
with no way to open it, and the renders the content without a summary or=20
disclosure widget in the <details open> state.
We think this is acceptable, and that we should not introduce the magic=20
that exists in Chrome's experimental implementation, where they render=20
the default summary that says "Details".
3. We'd like to get some feedback from web developers, and agreement=20
from other browser vendors, about exactly which glyphs are most=20
appropriate to use for these disclosure states. We considered two=20
alternatives, but we think these three glyphs are the most appropriate.
U+25B8 (=E2=96=B8) BLACK RIGHT-POINTING SMALL TRIANGLE
U+25C2 (=E2=97=82) BLACK LEFT-POINTING SMALL TRIANGLE
U+25BE (=E2=96=BE) BLACK DOWN-POINTING SMALL TRIANGLE
The other alternative we considered was a larger set of triangle glyphs=20
that were too big for this purpose.
We created a custom SVG font with these glyphs, and I've put up a page=20
illustrating how each of these look.
http://lachy.id.au/dev/2011/triangle.html
(Use Opera to see the SVG font)
Copies of these glyphs (rendered with list-style-image instead) are now=20
being used in the simulation I created before.
http://lachy.id.au/dev/2011/details.html
(Check the directory listing there to get all the image files if you=20
want them.)
--=20
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/