Skip to content

Commit 81f9344

Browse files
tabatkinstabatkins
committed
Rewrite the list-style-position section.
1 parent c2c15c0 commit 81f9344

2 files changed

Lines changed: 132 additions & 111 deletions

File tree

‎css3-lists/Overview.html‎

Lines changed: 87 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,9 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
146146
<li><a href="#declaring-a-list-item"><span class=secno>2. </span>
147147
Declaring a List Item</a>
148148

149-
<li><a href="#marker-content"><span class=secno>3. </span> Marker Content:
150-
The ‘<code class=property>list-style-image</code>’ and ‘<code
151-
class=property>list-style-type</code>’ properties</a>
149+
<li><a href="#marker-content"><span class=secno>3. </span> Default Marker
150+
Contents: The ‘<code class=property>list-style-image</code>’ and
151+
‘<code class=property>list-style-type</code>’ properties</a>
152152

153153
<li><a href="#list-style-position-property"><span class=secno>4. </span>
154154
Marker Position: The ‘<code
@@ -409,13 +409,13 @@ <h2 id=declaring-a-list-item><span class=secno>2. </span> Declaring a List
409409
<p> The ‘<a href="#inline-list-item"><code
410410
class=css>inline-list-item</code></a>’ display value makes the element a
411411
<a href="#list-item"><i>list item</i></a>, with the effects described
412-
above. Additionally, the ‘<a href="#outside"><code
412+
above. Additionally, the ‘<a href="#list-style-position-outside"><code
413413
class=css>outside</code></a>’ value of ‘<a
414414
href="#list-style-position"><code
415415
class=property>list-style-position</code></a>’ computes to ‘<a
416-
href="#inside"><code class=css>inside</code></a>’ on this element.
417-
Otherwise, this display value is treated identically to ‘<code
418-
class=css>inline</code>’.
416+
href="#list-style-position-inside"><code class=css>inside</code></a>’ on
417+
this element. Otherwise, this display value is treated identically to
418+
‘<code class=css>inline</code>’.
419419

420420
<p class=note> This display value is silly, and only necessary because we
421421
haven't yet defined ‘<code class=property>display</code>’ to be split
@@ -424,8 +424,8 @@ <h2 id=declaring-a-list-item><span class=secno>2. </span> Declaring a List
424424
<!-- ====================================================================== -->
425425

426426

427-
<h2 id=marker-content><span class=secno>3. </span> Marker Content: The
428-
‘<a href="#list-style-image"><code
427+
<h2 id=marker-content><span class=secno>3. </span> Default Marker Contents:
428+
The ‘<a href="#list-style-image"><code
429429
class=property>list-style-image</code></a>’ and ‘<a
430430
href="#list-style-type"><code class=property>list-style-type</code></a>’
431431
properties</h2>
@@ -692,85 +692,95 @@ <h2 id=list-style-position-property><span class=secno>4. </span> Marker
692692
<td>specified value
693693
</table>
694694

695-
<p>This property specifies the position of the <code
696-
class=css>::marker</code> pseudo-element's box in the <a
697-
href="#list-item"><i>list item</i></a>. Values have the following
698-
meanings:
695+
<p> This property helps control the position of the ‘<code
696+
class=css>::marker</code>’ pseudo-element in the <a
697+
href="#list-item"><i>list item</i></a>. The values are defined as follows:
698+
699699

700700
<dl>
701-
<dt><dfn id=inside>inside</dfn>
702-
703-
<dd>The <code class=css>::marker</code> pseudo-element is a ‘<code
704-
class=css>display:inline</code>’ element placed immediately before the
705-
‘<code class=css>::before</code>’ pseudo-element in the <a
706-
href="#list-item"><i>list item</i></a>‘<code class=css>s principle box,
707-
after which the element</code>’s content flows. Note that if there is
708-
no inline content, this will create a line box, just as content in an
709-
inline ‘<code class=css>::before</code>’ pseudo-element would. Also
710-
note that all the properties that apply to inline elements apply to the
711-
<code class=css>::marker</code> pseudo-element in this state, and this
712-
<code class=css>::marker</code> box participates in the inline box model
713-
in the normal manner.
714-
715-
<dt><dfn id=outside>outside</dfn>
716-
717-
<dd>As ‘<a href="#inside"><code class=css>inside</code></a>’, plus the
718-
‘<code class=property>position</code>’ property on the <code
719-
class=css>::marker</code> pseudo-element must computer to ‘<code
720-
class=css>marker</code>’. The section on the new ‘<code
721-
class=property>marker</code>’ value for ‘<code
722-
class=property>position</code>’ explains the consequences of this.
723-
Additionally, the base directionality of the <code
724-
class=css>::marker</code> pseudo-element (used as an input to the bidi
725-
resolution algorithm) must be taken from the marker's <a
701+
<dt><dfn id=list-style-position-inside>inside</dfn>
702+
703+
<dd> The ‘<code class=css>::marker</code>’ pseudo-element is an inline
704+
element placed immediately before where the ‘<code
705+
class=css>::before</code>’ pseudo-element would be placed in the <a
706+
href="#list-item"><i>list item</i></a>.
707+
708+
<dt><dfn id=list-style-position-outside>outside</dfn>
709+
710+
<dd> As ‘<a href="#list-style-position-inside"><code
711+
class=css>inside</code></a>’, plus the ‘<code
712+
class=property>position</code>’ property on the marker computes to
713+
‘<code class=css>marker</code>’. Additionally, the base
714+
directionality of the marker (used as an input to the bidi resolution
715+
algorithm) must be taken from the marker's <a
726716
href="#marker-positioning-reference-element"><i>marker positioning
727717
reference element</i></a>.
718+
<p> If the <a href="#list-item"><i>list item</i></a> is ‘<code
719+
class=css>display: inline-list-item</code>’, this value computes to
720+
‘<a href="#list-style-position-inside"><code
721+
class=css>inside</code></a>’.
728722
</dl>
729723

730-
<p>Note that a marker is only generated if the computed value of the
731-
‘<code class=property>content</code>’ property for the element's <code
732-
class=css>::marker</code> pseudo-element is not ‘<a
724+
<p class=note> Note that a marker is only generated if the used value of
725+
the ‘<code class=property>content</code>’ property for the ‘<code
726+
class=css>::marker</code>’ pseudo-element is not ‘<a
733727
href="#list-style-type-none"><code class=css>none</code></a>’.
734728

735-
<p class=issue>Should I make this always compute to ‘<a
736-
href="#inside"><code class=css>inside</code></a>’ when the list item is
737-
‘<code class=css>display:inline-list-item</code>’? See the thread at
738-
<a
739-
href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0232.html">http://lists.w3.org/Archives/Public/www-style/2011Jun/0232.html</a>.
740-
741-
742729
<div class=example>
743730
<p>For example:
744731

745-
<pre>
746-
&lt;style>
747-
ul.compact { list-style: inside; }
748-
ul { list-style: outside; }
749-
&lt;/style>
750-
&lt;ul class=compact>
751-
&lt;li>first "inside" list item comes first&lt;/li>
752-
&lt;li>second "inside" list item comes first&lt;/li>
753-
&lt;/ul>
754-
&lt;hr>
755-
&lt;ul>
756-
&lt;li>first "outside" list item comes first&lt;/li>
757-
&lt;li>second "outside" list item comes first&lt;/li>
758-
&lt;/ul></pre>
732+
<pre><!--
733+
-->&lt;style>
734+
<!--
735+
--> ul.compact { list-style: inside; }
736+
<!--
737+
--> ul { list-style: outside; }
738+
<!--
739+
-->&lt;/style>
740+
<!--
741+
-->&lt;ul class=compact>
742+
<!--
743+
--> &lt;li>first "inside" list item comes first&lt;/li>
744+
<!--
745+
--> &lt;li>second "inside" list item comes first&lt;/li>
746+
<!--
747+
-->&lt;/ul>
748+
<!--
749+
-->&lt;hr>
750+
<!--
751+
-->&lt;ul>
752+
<!--
753+
--> &lt;li>first "outside" list item comes first&lt;/li>
754+
<!--
755+
--> &lt;li>second "outside" list item comes first&lt;/li>
756+
<!--
757+
-->&lt;/ul></pre>
759758

760759
<p>The above example may be formatted as:
761760

762761
<pre>
763-
* first "inside" list
764-
item comes first
765-
* second "inside" list
766-
item comes second
767-
768-
========================
769-
770-
* first "outside" list
771-
item comes first
772-
* second "outside" list
773-
item comes second</pre>
762+
<!--
763+
--> * first "inside" list
764+
<!--
765+
--> item comes first
766+
<!--
767+
--> * second "inside" list
768+
<!--
769+
--> item comes second
770+
<!--
771+
-->
772+
<!--
773+
-->========================
774+
<!--
775+
-->
776+
<!--
777+
-->* first "outside" list
778+
<!--
779+
--> item comes first
780+
<!--
781+
-->* second "outside" list
782+
<!--
783+
--> item comes second</pre>
774784
</div>
775785
<!-- ====================================================================== -->
776786

@@ -3600,7 +3610,8 @@ <h2 class=no-num id=index>Index</h2>
36003610
<li>inline-list-item, <a href="#inline-list-item"
36013611
title=inline-list-item><strong>2.</strong></a>
36023612

3603-
<li>inside, <a href="#inside" title=inside><strong>4.</strong></a>
3613+
<li>inside, <a href="#list-style-position-inside"
3614+
title=inside><strong>4.</strong></a>
36043615

36053616
<li>list counter, <a href="#counters"
36063617
title="list counter"><strong>8.</strong></a>
@@ -3655,7 +3666,8 @@ <h2 class=no-num id=index>Index</h2>
36553666
title=none><strong>3.</strong></a>, <a href="#list-style-type-none"
36563667
title=none><strong>3.</strong></a>
36573668

3658-
<li>outside, <a href="#outside" title=outside><strong>4.</strong></a>
3669+
<li>outside, <a href="#list-style-position-outside"
3670+
title=outside><strong>4.</strong></a>
36593671

36603672
<li>prefix, <a href="#descdef-prefix"
36613673
title=prefix><strong>10.3.</strong></a>

‎css3-lists/Overview.src.html‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -362,54 +362,63 @@ <h2 id='list-style-position-property'>
362362
<td>specified value
363363
</table>
364364

365-
<p>This property specifies the position of the <code class=css>::marker</code> pseudo-element's box
366-
in the <i>list item</i>. Values have the following meanings:
365+
<p>
366+
This property helps control the position of the ''::marker'' pseudo-element in the <i>list item</i>.
367+
The values are defined as follows:
367368

368369
<dl>
369-
<dt><dfn>inside</dfn>
370-
<dd>The <code class=css>::marker</code> pseudo-element is a 'display:inline' element placed immediately before the ''::before'' pseudo-element in the <i>list item</i>'s principle box, after which the element's content flows. Note that if there is no inline content, this will create a line box, just as content in an inline ''::before'' pseudo-element would. Also note that all the properties that apply to inline elements apply to the <code class=css>::marker</code> pseudo-element in this state, and this <code class=css>::marker</code> box participates in the inline box model in the normal manner.
370+
<dt><dfn id='list-style-position-inside'>inside</dfn>
371+
<dd>
372+
The ''::marker'' pseudo-element is an inline element placed immediately before where the ''::before'' pseudo-element would be placed in the <i>list item</i>.
371373

372-
<dt><dfn>outside</dfn>
373-
<dd>As ''inside'', plus the 'position' property on the <code class=css>::marker</code> pseudo-element must computer to ''marker''. The section on the new 'marker' value for 'position' explains the consequences of this. Additionally, the base directionality of the <code class=css>::marker</code> pseudo-element (used as an input to the bidi resolution algorithm) must be taken from the marker's <i>marker positioning reference element</i>.
374+
<dt><dfn id='list-style-position-outside'>outside</dfn>
375+
<dd>
376+
As ''inside'', plus the 'position' property on the marker computes to ''marker''.
377+
Additionally, the base directionality of the marker
378+
(used as an input to the bidi resolution algorithm)
379+
must be taken from the marker's <i>marker positioning reference element</i>.
380+
381+
<p>
382+
If the <i>list item</i> is ''display: inline-list-item'',
383+
this value computes to ''inside''.
374384
</dl>
375385

376-
<p>Note that a marker is only generated if the computed value of the 'content'
377-
property for the element's <code class=css>::marker</code> pseudo-element is not ''none''.
378-
379-
<p class='issue'>Should I make this always compute to ''inside'' when the list item is ''display:inline-list-item''? See the thread at <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0232.html">http://lists.w3.org/Archives/Public/www-style/2011Jun/0232.html</a>.
386+
<p class='note'>
387+
Note that a marker is only generated
388+
if the used value of the 'content' property for the ''::marker'' pseudo-element is not ''none''.
380389

381390
<div class=example>
382391
<p>For example:
383392

384-
<pre>
385-
&lt;style>
386-
ul.compact { list-style: inside; }
387-
ul { list-style: outside; }
388-
&lt;/style>
389-
&lt;ul class=compact>
390-
&lt;li>first "inside" list item comes first&lt;/li>
391-
&lt;li>second "inside" list item comes first&lt;/li>
392-
&lt;/ul>
393-
&lt;hr>
394-
&lt;ul>
395-
&lt;li>first "outside" list item comes first&lt;/li>
396-
&lt;li>second "outside" list item comes first&lt;/li>
397-
&lt;/ul></pre>
393+
<pre><!--
394+
-->&lt;style>&#xa;<!--
395+
--> ul.compact { list-style: inside; }&#xa;<!--
396+
--> ul { list-style: outside; }&#xa;<!--
397+
-->&lt;/style>&#xa;<!--
398+
-->&lt;ul class=compact>&#xa;<!--
399+
--> &lt;li>first "inside" list item comes first&lt;/li>&#xa;<!--
400+
--> &lt;li>second "inside" list item comes first&lt;/li>&#xa;<!--
401+
-->&lt;/ul>&#xa;<!--
402+
-->&lt;hr>&#xa;<!--
403+
-->&lt;ul>&#xa;<!--
404+
--> &lt;li>first "outside" list item comes first&lt;/li>&#xa;<!--
405+
--> &lt;li>second "outside" list item comes first&lt;/li>&#xa;<!--
406+
-->&lt;/ul></pre>
398407

399408
<p>The above example may be formatted as:
400409

401-
<pre>
402-
* first "inside" list
403-
item comes first
404-
* second "inside" list
405-
item comes second
406-
407-
========================
408-
409-
* first "outside" list
410-
item comes first
411-
* second "outside" list
412-
item comes second</pre>
410+
<pre>&#xa;<!--
411+
--> * first "inside" list&#xa;<!--
412+
--> item comes first&#xa;<!--
413+
--> * second "inside" list&#xa;<!--
414+
--> item comes second&#xa;<!--
415+
-->&#xa;<!--
416+
-->========================&#xa;<!--
417+
-->&#xa;<!--
418+
-->* first "outside" list&#xa;<!--
419+
--> item comes first&#xa;<!--
420+
-->* second "outside" list&#xa;<!--
421+
--> item comes second</pre>
413422
</div>
414423

415424
<!-- ====================================================================== -->

0 commit comments

Comments
 (0)