Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update the Rendering section for Lists to use the built-in 'list-item… #4816

Merged
merged 6 commits into from
Apr 28, 2021
Merged

Update the Rendering section for Lists to use the built-in 'list-item… #4816

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ba84eac
Update the Rendering section for Lists to use the built-in 'list-item…
Aug 3, 2019
328b21d
Formalize <ol start reversed> and <li value> as presentational hints
zcorpan Mar 4, 2021
76f7f4e
Remove unrelated text-align: match-parent
zcorpan Mar 4, 2021
734f073
fixup! Formalize <ol start reversed> and <li value> as presentational…
zcorpan Mar 4, 2021
9e7a72d
Soften language for referencing CSS Lists
zcorpan Mar 10, 2021
fbdae8d
Nits
zcorpan Mar 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 60 additions & 6 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3477,9 +3477,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">'aspect-ratio'</dfn> property</li>
</ul>

<p>The <dfn
data-x-href="https://drafts.csswg.org/css-lists/#propdef-list-style-type">'list-style-type'</dfn>
property is defined in <cite>CSS Lists and Counters</cite>. <ref spec=CSSLISTS></p>
<p>The following features are defined in <cite>CSS Lists and Counters</cite>. <ref spec=CSSLISTS></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-lists/#list-item" data-x="css-list-item">list item</dfn></li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-lists/#propdef-counter-reset">'counter-reset'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-lists/#propdef-counter-set">'counter-set'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-lists/#propdef-list-style-type">'list-style-type'</dfn> property</li>
</ul>

<p>The following features are defined in <cite>CSS Overflow</cite>. <ref spec=CSSOVERFLOW></p>

Expand Down Expand Up @@ -113249,6 +113254,7 @@ dir, dl, menu, ol, ul { margin-block-start: 1em; margin-block-end: 1em; }
dd { margin-inline-start: 40px; }
dir, menu, ol, ul { padding-inline-start: 40px; }

ol, ul, menu { counter-reset: list-item; }
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
ol { list-style-type: decimal; }

dir, menu, ul {
Expand Down Expand Up @@ -113280,9 +113286,57 @@ ul[type=square i], li[type=square i] { list-style-type: square; }</code></pre>
<span>ordinal value</span> of the <code>li</code> element to render the counter in the list item
marker.</p>

<p class="critical" id="css-list-rendering">This specification does not yet define the
CSS-specific rules for rendering <code>li</code> elements, because CSS doesn't yet provide
sufficient hooks for this purpose.</p>
<p id="css-list-rendering">For CSS user agents, some aspects of rendering <span
domenic marked this conversation as resolved.
Show resolved Hide resolved
data-x="css-list-item">list items</span> are defined by the <cite>CSS Lists</cite> specification.
Additionally, the following attribute mappings are expected to apply: <ref spec=CSSLISTS></p>

<p>When an <code>li</code> element has a <code
data-x="attr-li-value">value</code> attribute, and parsing that attribute's value using the
<span>rules for parsing integers</span> doesn't generate an error, the user agent is expected to
use the parsed value <var>value</var> as a <span data-x="presentational hints">presentational
hint</span> for the <span>'counter-set'</span> property of the form <code data-x="">list-item
<var>value</var></code>.</p>

<p>When an <code>ol</code> element has a <code data-x="attr-ol-start">start</code>
attribute or a <code data-x="attr-ol-reversed">reversed</code> attribute, or both, the user agent
is expected to use the following steps to treat the attributes as a <span data-x="presentational
hints">presentational hint</span> for the <span>'counter-reset'</span> property:</p>

<ol>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This algorithm is very nice and simple and clean. I worry a bit about whether it is in sync with the "ordinal value" definition. But, I can't think of any nice way to keep them in sync and make sure they reflect the same thing, because it's really comparing ordinal value to (this algorithm + CSS's automatic features like list-item incrementing).

Let me know if you have thoughts about ordinal value. Before, we spent effort defining ordinal value based on UA behavior to match the rendered output. Now that UA rendering is defined entirely in terms of CSS (and can, e.g., get out of sync with ordinal value via manually setting various CSS properties), it's not clear how to think of ordinal value's role. It gives a sense of what the semantics of the list are, but is it really OK for those semantics to drift visibly from the rendering? Which would we expect accessibility technology to use?

Copy link
Member

@zcorpan zcorpan Mar 10, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah ordinal value was indeed supposed to match browsers' rendering behavior, but now that mapping to CSS properties can do that, there's not so much of a need for ordinal value to do that. We could take the opportunity to completely decouple the semantic numbering from CSS. That CSS can be used to give a completely different visual compared to the semantics of the HTML is nothing new, and isn't an issue. On the contrary, having author CSS affect underlying semantics is against the spirit of CSS. I'll file an issue about ordinal value. (edit: #6473)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which would we expect accessibility technology to use?

ATs generally take CSS into account (e.g. don't expose display: none, do expose generated content), but there are tricky cases (like <td style="display: block"> should still be exposed cells in a data table, while <div style="display: table"> should not be exposed as a data table). For counters, I think users would expect the numbers to match visual rendering.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See https://www.w3.org/TR/css-counter-styles-3/#counter-style-speak-as

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fantasai interesting, thanks! Even with speak-as, though, the question is which number an AT should use -- the semantic number based on the HTML alone (or some combination of HTML+CSS), or the number the list item has per CSS counters?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can make it similar to the various bidi features, that have this language:

The following elements and attributes have requirements defined by the rendering section that, due to the requirements in this section, are requirements on all user agents (not just those that support the suggested default rendering)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@annevk I filed #6599 to track this

<li><p>Let <var>value</var> be null.</p></li>
domenic marked this conversation as resolved.
Show resolved Hide resolved

<li><p>If the element has a <code data-x="attr-ol-start">start</code> attribute, then set
<var>value</var> to the result of parsing the attribute's value using the <span>rules for
parsing integers</span>.</p></li>

<li>
<p>If the element has a <code data-x="attr-ol-reversed">reversed</code> attribute, then:</p>

<ol>
<li><p>If <var>value</var> is an integer, then increment <var>value</var> by 1 and return
<code data-x="">reversed(list-item) <var>value</var></code>.</p></li>

<li>
<p>Otherwise, return <code data-x="">reversed(list-item)</code>.</p>

<p class="note">Either the <code data-x="attr-ol-start">start</code> attribute was absent, or
parsing its value resulted in an error.</p>
</li>
</ol>
</li>

zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<li>
<p>Otherwise:</p>

<ol>
<li><p>If <var>value</var> is an integer, then decrement <var>value</var> by 1 and return
<code data-x="">list-item <var>value</var></code>.</p></li>

<li><p>Otherwise, there is no <span data-x="presentational hints">presentational
hint</span>.</p></li>
</ol>
</li>
</ol>


<h4>Tables</h4>
Expand Down