Skip to content

Add type="" and start="" to <ul> #4036

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

Closed
wants to merge 1 commit into from
Closed

Add type="" and start="" to <ul> #4036

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
159 changes: 138 additions & 21 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18227,16 +18227,16 @@ interface <dfn>HTMLOListElement</dfn> : <span>HTMLElement</span> {
the attribute is omitted, the list is an ascending list (1, 2, 3, ...).</p>

<p>The <dfn><code data-x="attr-ol-start">start</code></dfn> attribute, if present, must be a
<span>valid integer</span>. It is used to determine the <span data-x="concept-ol-start">starting
<span>valid integer</span>. It is used to determine the <span data-x="concept-list-start">starting
value</span> of the list.</p>

<div w-nodev>

<!-- https://github.com/whatwg/html/issues/1617
https://github.com/whatwg/html/issues/1911 -->

<p>An <code>ol</code> element has a <dfn data-x="concept-ol-start">starting value</dfn>, which is
an integer determined as follows:</p>
<p>An <code>ol</code> element has a <span data-x="concept-list-start">starting value</span>, which
is an integer determined as follows:</p>

<ol>
<li>
Expand Down Expand Up @@ -18334,7 +18334,7 @@ interface <dfn>HTMLOListElement</dfn> : <span>HTMLElement</span> {
the content attribute of the same name, with a default value of 1.</p>

<p class="note">This means that the <code data-x="dom-ol-start">start</code> IDL attribute does
not necessarily match the list's <span data-x="concept-ol-start">starting value</span>, in cases
not necessarily match the list's <span data-x="concept-list-start">starting value</span>, in cases
where the <code data-x="attr-ol-start">start</code> content attribute is omitted and the <code
data-x="attr-ol-reversed">reversed</code> content attribute is specified.</p>

Expand Down Expand Up @@ -18383,11 +18383,16 @@ I first lived there):&lt;/p>
<dd>Zero or more <code>li</code> and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-ul-start">start</code></dd>
<dd><code data-x="attr-ul-type">type</code></dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
<dd w-nodev>
<pre><code class="idl" data-x="">[Exposed=Window,
<span>HTMLConstructor</span>]
interface <dfn>HTMLUListElement</dfn> : <span>HTMLElement</span> {};</code></pre>
interface <dfn>HTMLUListElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] attribute long <span data-x="dom-ol-start">start</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-ol-type">type</span>;
};</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLUListElement</code>.</dd>
</dl>
Expand All @@ -18400,7 +18405,6 @@ interface <dfn>HTMLUListElement</dfn> : <span>HTMLElement</span> {};</code></pre
element.</p>

<div class="example">

<p>The following markup shows a list where the order does not matter, and where the
<code>ul</code> element is therefore appropriate. Compare this list to the equivalent list in the
<code>ol</code> section to see an example of the same items using the <code>ol</code>
Expand All @@ -18426,10 +18430,120 @@ interface <dfn>HTMLUListElement</dfn> : <span>HTMLElement</span> {};</code></pre
&lt;li>United Kingdom
&lt;li>United States
&lt;/ul></code></pre>
</div>

<p>The items of an unordered list can optionally be <em>labeled</em> using ordinal indicators,
even if that ordering is not semantically meaningful. The <code data-x="attr-ul-type">type</code>
and <code data-x="attr-ul-start">start</code> attributes can be used for the purpose of
controlling these labels.</p>

<div class="example">
<p>The following markup shows a list where the order does not matter, but also includes a
paragraph which <span data-x="referenced">references</span> those list items, so that their
labeling does matter:</p>

<pre><code class="html" data-x="">&lt;p>These are my favorite super heroes:&lt;/p>

&lt;ul type="a">
&lt;li>Spider-Man&lt;/li>
&lt;li>Batman&lt;/li>
&lt;li>Cyclops&lt;/li>
&lt;li>Doctor Manhattan&lt;/li>
&lt;/ul>

&lt;p>(a) and (c) are from the Marvel Universe, while (b) and (d) are from DC Comics.&lt;/p></code></pre>

<p>As with the previous example, changing the order of the list does not change the meaning of
the document:</p>

<pre><code class="html" data-x="">&lt;p>These are my favorite super heroes:&lt;/p>

&lt;ul type="a">
&lt;li>Spider-Man&lt;/li>
&lt;li>Cyclops&lt;/li>
&lt;li>Batman&lt;/li>
&lt;li>Doctor Manhattan&lt;/li>
&lt;/ul>

&lt;p>(a) and (b) are from the Marvel Universe, while (c) and (d) are from DC Comics.&lt;/p></code></pre>
</div>

<p>The <dfn><code data-x="attr-ul-start">start</code></dfn> attribute, if present, must be a
<span>valid integer</span>. It is used to determine the <span data-x="concept-list-start">starting
value</span> of the list.</p>

<div w-nodev>

<p>A <code>ul</code> element has a <span data-x="concept-list-start">starting value</span>, which
is an integer determined as follows:</p>

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

<ol>
<li><p>Let <var>parsed</var> be the result of <span data-x="rules for parsing integers">parsing
the value of the attribute as an integer</span>.</p></li>

<li><p>If <var>parsed</var> is not an error, then return <var>parsed</var>.</p></li>
</ol>
</li>

<li><p>Return 1.</p></li>
</ol>

</div>

<p>The <dfn><code data-x="attr-ul-type">type</code></dfn> attribute can be used to specify the
kind of marker to use in the list, in the cases where that matters (e.g. because items are to be
<span>referenced</span> by their number/letter). The allowed values for the attribute are the same
as those for <span data-x="attr-ol-type">the corresponding attribute of <code>ol</code></span>.
<span w-nodev>The state represented by the <code data-x="attr-ul-type">type</code> is determined
in the same way as for the <span data-x="attr-ol-type">the corresponding attribute of
<code>ol</code></span>, except that if none of the cells match or the attribute is omitted, then
the attribute represents the <dfn data-x="attr-ul-type-state-unlabeled">unlabeled</dfn>
state.</span></p>

<p class="note">For historical reasons, in CSS user agents the values "<code
data-x="">none</code>", "<code data-x="">disc</code>", "<code data-x="">circle</code>", and "<code
data-x="">square</code>" will change the presentation of the list's markers, when used in the
<code data-x="attr-ul-type">type</code> attribute. Nevertheless, using them is non-conforming;
authors ought to influence presentation via CSS, instead of abusing the <code
data-x="attr-ul-type">type</code> attribute.</p>

<div w-nodev>

<p>User agents should render the markers of the items of the list in a manner consistent with the
state of the <code data-x="attr-ul-type">type</code> attribute of the <code>ul</code> element.
When the attribute's state is not <span data-x="attr-ul-type-state-unlabeled">unlabeled</span>,
markers for list items with <span data-x="ordinal value">ordinal values</span> less than or equal
to zero should always use the decimal system regardless of the <code
data-x="attr-ul-type">type</code> attribute.</p>

<p class="note">For CSS user agents, a mapping for this attribute to the
<span>'list-style-type'</span> CSS property is given <a href="#decohints">in the rendering
section</a>.</p>

</div>

<p class="note">It is possible to redefine the default CSS list styles used to implement this
attribute in CSS user agents; doing so will affect how list items are rendered.</p>

<!-- v2: resuming numbering of lists from previous lists? -->

<div w-nodev>

<p>The <dfn><code data-x="dom-ul-type">type</code></dfn> IDL attributes must <span>reflect</span>
the content attribute of the same name.</p>

<p>The <dfn><code data-x="dom-ul-start">start</code></dfn> IDL attribute must <span>reflect</span>
the content attribute of the same name, with a default value of 1.</p>

</div>



<h4 id="the-menu-element">The <dfn id="menus"><code>menu</code></dfn> element</h4>

<dl class="element">
Expand Down Expand Up @@ -18538,9 +18652,9 @@ interface <dfn>HTMLLIElement</dfn> : <span>HTMLElement</span> {
<ol>
<li><p>Let <var>i</var> be 1.</p></li>

<li><p>If <var>owner</var> is an <code>ol</code> element, let <var>numbering</var> be
<var>owner</var>'s <span data-x="concept-ol-start">starting value</span>. Otherwise, let
<var>numbering</var> be 1.</p></li>
<li><p>If <var>owner</var> is an <code>ol</code> or <code>ul</code> element, let
<var>numbering</var> be <var>owner</var>'s <dfn data-x="concept-list-start">starting value</dfn>.
Otherwise, let <var>numbering</var> be 1.</p></li>

<li><p><i>Loop:</i> If <var>i</var> is greater than the number of <span
data-x="list owner">list items that <var>owner</var> owns</span>, then return; all
Expand Down Expand Up @@ -111722,11 +111836,12 @@ dir, menu, ul {

<pre><code class="css" data-x="">@namespace url(http://www.w3.org/1999/xhtml);

ol[type="1"], li[type="1"] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
ol[type=i], li[type=i] { list-style-type: lower-roman; }
ol[type=I], li[type=I] { list-style-type: upper-roman; }
:matches(ol, ul, li)[type="1"] { list-style-type: decimal; }
:matches(ol, ul, li)[type=a] { list-style-type: lower-alpha; }
:matches(ol, ul, li)[type=A] { list-style-type: upper-alpha; }
:matches(ol, ul, li)[type=i] { list-style-type: lower-roman; }
:matches(ol, ul, li)[type=I] { list-style-type: upper-roman; }

ul[type=none i], li[type=none i] { list-style-type: none; }
ul[type=disc i], li[type=disc i] { list-style-type: disc; }
ul[type=circle i], li[type=circle i] { list-style-type: circle; }
Expand Down Expand Up @@ -114142,7 +114257,6 @@ if (s = prompt('What is your name?')) {
<dt><dfn><code data-x="attr-tr-height">height</code></dfn> on <code>tr</code> elements</dt>
<dt><dfn><code data-x="attr-tr-valign">valign</code></dfn> on <code>tr</code> elements</dt>
<dt><dfn><code data-x="attr-ul-compact">compact</code></dfn> on <code>ul</code> elements</dt>
<dt><dfn><code data-x="attr-ul-type">type</code></dfn> on <code>ul</code> elements</dt>
<dt><dfn><code data-x="attr-background">background</code></dfn> on <code>body</code>, <code>table</code>, <code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>tr</code>, <code>td</code>, and <code>th</code> elements</dt>
<dd><p>Use CSS instead.</p></dd>

Expand Down Expand Up @@ -115150,11 +115264,10 @@ interface <dfn>HTMLFontElement</dfn> : <span>HTMLElement</span> {

<pre><code class="idl" data-x="">partial interface <span id="HTMLUListElement-partial">HTMLUListElement</span> {
[<span>CEReactions</span>] attribute boolean <span data-x="dom-ul-compact">compact</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-ul-type">type</span>;
};</code></pre>

<p>The <dfn><code data-x="dom-ul-compact">compact</code></dfn> and <dfn><code data-x="dom-ul-type">type</code></dfn> IDL attributes of the <code>ul</code> element must
<span>reflect</span> the respective content attributes of the same name.</p>
<p>The <dfn><code data-x="dom-ul-compact">compact</code></dfn> IDL attribute of the
<code>ul</code> element must <span>reflect</span> the content attribute of the same name.</p>

<hr>

Expand Down Expand Up @@ -117589,7 +117702,9 @@ interface <dfn>External</dfn> {
<td><span data-x="Flow content">flow</span></td>
<td><code>li</code>;
<span>script-supporting elements</span></td>
<td><span data-x="global attributes">globals</span></td>
<td><span data-x="global attributes">globals</span>;
<code data-x="attr-ul-start">start</code>;
<code data-x="attr-ul-type">type</code></td>
<td><code>HTMLUListElement</code></td>
</tr>

Expand Down Expand Up @@ -118899,7 +119014,8 @@ interface <dfn>External</dfn> {
<tr>
<th> <code data-x="">start</code>
<td> <code data-x="attr-ol-start">ol</code>
<td> <span data-x="concept-ol-start">Starting value</span> of the list
<code data-x="attr-ul-start">ul</code>
<td> <span data-x="concept-list-start">Starting value</span> of the list
<td> <span>Valid integer</span>
<tr>
<th> <code data-x="">step</code>
Expand Down Expand Up @@ -118991,7 +119107,8 @@ interface <dfn>External</dfn> {
<td> <span data-x="attr-input-type"><code>input</code> type keyword</span>
<tr>
<th> <code data-x="">type</code>
<td> <code data-x="attr-ol-type">ol</code>
<td> <code data-x="attr-ol-type">ol</code>;
<code data-x="attr-ul-type">ul</code>
<td> Kind of list marker
<td> "<code data-x="attr-ol-type-keyword-decimal">1</code>";
"<code data-x="attr-ol-type-keyword-lower-alpha">a</code>";
Expand Down