tormodh's wiki : NestedLists

Categories :: PageIndex :: RecentChanges :: RecentlyCommented :: Login/Register

Formatter fix up for nested lists


Here is a section for different cases involving nested lists. To the left there is the wiki markup for a list, with the actual (current) rendering to the right of it.

Below these there is also a block (right) depicting html and rendering of 1.1.6.5, and a block (left) depicting how I (ideally) would want html and rendering to be in 1.1.6.6 / 1.1.7.

Nested Lists


This section depicts how to markup nested (and therefore also simple) lists.

~1) This is an item
~1) This is another item
~~a) This is item in a sublist
~~a) This is another item, in the same sublist
~1) This is an item in the same list.
Actual rendering:
  1. This is an item
  2. This is another item
    1. This is item in a sublist
    2. This is another item, in the same sublist
  3. This is an item in the same list.
Generated HTML code:
<ol type="1">
    <li> This is an item</li>
    <li> This is another item</li>
    <ol type="a">
        <li> This is item in a sublist</li>
        <li> This is another item, in the same sublist</li>
    </ol>
    <li> This is an item in the same list.</li>
</ol>

 

AFTER?


<ol type="1">
<li>This is an item</li>
<li>This is another item</li>
<ol type="a">
<li>This is item in a sublist</li>
<li>This is another item, in the same sublist</li>
</ol>
<li>This is an item in the same list.</li>
</ol>


  1. This is an item
  2. This is another item
    1. This is item in a sublist
    2. This is another item, in the same sublist
  3. This is an item in the same list.

BEFORE


<ol type="1"><li> This is an item
</li><li> This is another item
</li></ol><ol type="a"><li><ol type="a"><li> This is item in a sublist
</li><li> This is another item, in the same sublist
</li></ol></li></ol><ol type="1"><li> This is an item in the same list.</li></ol>


  1. This is an item
  2. This is another item
    1. This is item in a sublist
    2. This is another item, in the same sublist
  1. This is an item in the same list.

 



Nested Lists with another type at the last line


~1) This is an item
~1) This is another item
~~a) This is item in a sublist
~~a) This is another item, in the same sublist
~- This is an item in a new list.
Actual rendering:
  1. This is an item
  2. This is another item
    1. This is item in a sublist
    2. This is another item, in the same sublist
Generated HTML code:
<ol type="1">
    <li> This is an item</li>
    <li> This is another item</li>
    <ol type="a">
        <li> This is item in a sublist</li>
        <li> This is another item, in the same sublist</li>
    </ol>
</ol>
<ul>
    <li> This is an item in a new list.</li>
</ul>

 

AFTER?


<ol type="1">
<li>This is an item</li>
<li>This is another item</li>
<ol type="a">
<li>This is item in a sublist</li>
<li>This is another item, in the same sublist</li>
</ol>
</ol>
<ul>
<li>This is an item in a new list.</li>
</ul>


  1. This is an item
  2. This is another item
    1. This is item in a sublist
    2. This is another item, in the same sublist

BEFORE


<ol type="1"><li> This is an item
</li><li> This is another item
</li></ol><ol type="a"><li><ol type="a"><li> This is item in a sublist
</li><li> This is another item, in the same sublist
</li></ol></li></ol><ul><li> This is an item in a new list.</li></ul>


  1. This is an item
  2. This is another item
    1. This is item in a sublist
    2. This is another item, in the same sublist

 



Nested Lists with another type of list in the middle


~1) This is an item
~1) This is another item
~~a) This is item in a sublist
~~i) This is another item, in a new sublist
~1) This is an item in the first list.
Actual rendering:
  1. This is an item
  2. This is another item
    1. This is item in a sublist
    1. This is another item, in a new sublist
  3. This is an item in the first list.
Generated HTML code:
<ol type="1">
    <li> This is an item</li>
    <li> This is another item</li>
    <ol type="a">
        <li> This is item in a sublist</li>
    </ol>
    <ol type="i">
        <li> This is another item, in a new sublist</li>
    </ol>
    <li> This is an item in the first list.</li>
</ol>

 

AFTER?


<ol type="1">
<li>This is an item</li>
<li>This is another item</li>
<ol type="a">
<li>This is item in a sublist</li>
</ol>
<ol type="i">
<li>This is another item, in the same sublist</li>
</ol>
<li>This is an item in a new list.</li>
</ol>


  1. This is an item
  2. This is another item
    1. This is item in a sublist
    1. This is another item, in the same sublist
  3. This is an item in a new list.

BEFORE


<ol type="1"><li> This is an item
</li><li> This is another item
</li></ol><ol type="a"><li><ol type="a"><li> This is item in a sublist
</li></ol></li></ol><ol type="i"><li><ol type="i"><li> This is another item, in a new sublist
</li></ol></li></ol><ol type="1"><li> This is an item in the first list.</li></ol>


  1. This is an item
  2. This is another item
    1. This is item in a sublist
    1. This is another item, in a new sublist
  1. This is an item in the first list.

 



Lists starting at a deeper level


This section depicts lists starting at a deeper level. I personally don't like this, but I guess it could occur.

I don't want to incur the cost of checking the type of list that might come further down in the page, so i guess ordinary indent (a class of div) should be used.

~~1) This is an item
~~1) This is another item
~~~a) This is item in a sublist
~~~a) This is another item, in the same sublist
~~1) This is an item in the same list.
Actual rendering:
    1. This is an item
    2. This is another item
      1. This is item in a sublist
      2. This is another item, in the same sublist
    3. This is an item in the same list.
Generated HTML code:
<ol type="1">
    <ol type="1">
        <li> This is an item</li>
        <li> This is another item</li>
        <ol type="a">
            <li> This is item in a sublist</li>
            <li> This is another item, in the same sublist</li>
        </ol>
        <li> This is an item in the same list.</li>
    </ol>
</ol>

 

AFTER?


<div class="indent">
<ol type="1">
<li>This is an item</li>
<li>This is another item</li>
<ol type="a">
<li>This is item in a sublist</li>
<li>This is another item, in the same sublist</li>
</ol>
<li>This is an item in the same list.</li>
</ol>
</div>


  1. This is an item
  2. This is another item
    1. This is item in a sublist
    2. This is another item, in the same sublist
  3. This is an item in the same list.

BEFORE


<ol type="1"><li><ol type="1"><li> This is an item
</li><li> This is another item
</li></ol></li></ol><ol type="a"><li><ol type="a"><li><ol type="a"><li> This is item in a sublist
</li><li> This is another item, in the same sublist
</li></ol></li></ol></li></ol><ol type="1"><li><ol type="1"><li> This is an item in the same list.</div></li></ol></li></ol>


    1. This is an item
    2. This is another item
      1. This is item in a sublist
      2. This is another item, in the same sublist
    1. This is an item in the same list.

 
There are no comments on this page.
Valid XHTML 1.0 Transitional :: Valid CSS :: Powered by WikkaWiki
Page was generated in 2.1842 seconds