I'm looking for the way to use nested numbering index of lists in MediaWiki pages. I want to get the following:
1 item "1"
2 item "2"
2.1 item "2.1"
2.2.1 item "2.2.1"
2.2.2 item "2.2.2"
2.2 item "2.2"
3 item "3"
I've found some CSS/HTML working code for HTML pages but I cannot fit it in a MediaWiki page.
Thanx in advance.
Something like this should work:
<ol class="nested-list">
<li>item "1"
<li>item "2"
<ol>
<li>item "2.1"
<li>item "2.2"
</ol>
</li>
</ol>
And then in MediaWiki:Commons.css (if $wgUseSiteCss is true, as per default), add something like this:
ol.nested-list { counter-reset: item }
ol.nested-list li { display: block }
ol.nested-list li:before { content: counters(item, ".") " "; counter-increment: item }
Related
I'm currently working on a project converting some training materials from one e-learning system to another, and I'm trying to preserve original formatting where I can (especially when lists tie into images), and this has involved picking up some HTML/CSS commands to help recreate formatting (I'm keeping notes for my colleagues on functions that I'm using so they can also understand it).
In the current lesson, the list of instructions I'm working with is spreading over multiple "cards." I've mostly been able to make this work, but the current card has a graphic tie-in that I'm having some difficulty puzzling out.
What I'm trying to do on this card:
4. Instruction item 4
5. Instruction item 5
5.1 Sub-instruction 1
5.2 Sub-instruction 2
5.3 Sub-instruction 3
Graphic referenced by above
6. Instruction item 6
etc.
The current code sections that I'm finding are not quite getting to that result, though.
I've been researching online (including here), and I'm finding information that helps me get to the X.Y formatting and information that gets me the changing start point, but not ways to use both in context of a multi-level list.
I can almost make this work using the below code snippet:
<style>
OL { counter-reset: item 3 }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
</style>
<ol>
<li><strong>Instruction 4</strong></li>
<li><strong>Instruction 5:</strong></li><strong>
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ol>
</strong></ol>
Instead of:
4. Instruction item 4
5. Instruction item 5
5.1 Sub-instruction 1
5.2 Sub-instruction 2
5.3 Sub-instruction 3
the above code section currently gives me:
4 Item 4
5 Item 5
5.4 Sub Item 1
5.5 Sub Item 2
5.6 Sub Item 3
If I substitute "counter-reset: item" for "counter-reset: item 3" I instead get:
1. Instruction item 4
2. Instruction item 5
2.1 Sub-instruction 1
2.2 Sub-instruction 2
2.3 Sub-instruction 3
Push comes to shove I could use separate lines of text and the appropriate line padding to get the desired effect (or try to change the graphics), but ideally I'd like to find a way to get the list to automatically format appropriately so we can use this for future lessons. Any assistance to help with where I'm going wrong would be greatly appreciated.
First of all, you should have your nested ol in a li.
The only allowed children of an ol are li.
Now, let's see what you can do with a second counter:
ol { counter-reset: item 3}
li { display: block }
ol > li:before {
content: counters(item, "") " ";
counter-increment: item
}
ol ol {
counter-reset: tata 0; /* Second counter */
}
ol ol li:before {
content: counters(item, "") "." counters(tata, "") " ";
counter-increment: tata;
}
<ol>
<li><strong>Instruction 1</strong></li>
<li>
<strong>Instruction 2:</strong>
<strong>
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ol>
</strong>
</li>
</ol>
Counters are confusing pains, but I've sorted it out for you:
CSS
body {
counter-reset: section;
}
ol {
counter-reset: section +3;
list-style-type: none;
}
li.heading::before {
counter-increment: section;
content: counter(section) '. ';
}
ol.sub-heading-wrapper {
counter-reset: subheading;
}
li.sub-heading::before {
counter-increment: subheading;
content: counter(section) "." counter(subheading) " ";
}
HTML
<ol>
<li class="heading"><strong>Instruction 4</strong></li>
<li class="heading"><strong>Instruction 5:</strong>
<ol class="sub-heading-wrapper">
<li class="sub-heading">Sub-item 1</li>
<li class="sub-heading">Sub-item 2</li>
<li class="sub-heading">Sub-item 3</li>
</ol>
</li>
<li class="heading"><strong>Instruction 6:</strong>
<ol class="sub-heading-wrapper">
<li class="sub-heading">Sub-item 1</li>
<li class="sub-heading">Sub-item 2</li>
<li class="sub-heading">Sub-item 3</li>
</ol>
</li>
</ol>
Basically, I create two counters. One is reset at the top of the HTML page. The second one resets for every "sub-heading-wrapper" class. Then they just increment and get squished together appropriately.
This question already has an answer here:
Continue ordered list numbering automatically
(1 answer)
Closed 4 years ago.
Looking for the following ordered
1a.milk
1b.bread
1c.butter
1d.coffee beans
The following syntax did not satisfy my requirement.
<ol>
<li>milk
<ol type="a">
<li>bread</li>
<li>butter</li>
<li>coffee beans</li>
</ol>
</li>
</ol>
Above syntax show bellow output
1.milk
a.bread
b.butter
c.coffee beans
You can use CSS counters and have 1a-1d for each of the lis (the 1 is from the ol counter and the a-d is from the li counter. CSS counters can be configured to show a number of different styles and types.
EDIT - as #Tomalak indicates in the comments - I have amended this to reset the li-index in the ol styles - and added a second list to demonstrate the result. The first list is showing 1a - 1d and the second list is showing 2a - 2d.
I also changed it to an ol structure to closer match the OP's request, but the concept works for any type of list (and any type of repeating element).
.list-wrapper {
counter-reset: ol-index;
counter-reset: li-index;
}
ol {
list-style: none;
counter-increment: ol-index;
counter-reset: li-index;
}
ol li {
counter-increment: li-index;
}
ol li::before {
content: counter(ol-index) counter(li-index, lower-alpha) ". ";
}
<div class="list-wrapper">
<ol>
<li>milk</li>
<li>bread</li>
<li>butter</li>
<li>coffee beans</li>
</ol>
<ol>
<li>paper</li>
<li>flour</li>
<li>jam</li>
<li>biscuits</li>
</ol>
</div>
I have several items in an outline each with similarly formatted section numbers.
Ex:
1.3.1
2.1.1
3.4.5
Is there a way to get my ordered lists to recognize "1.1.1" (and "2.1.1", etc) as the starting point?
So a list of releases would appear something like this:
1.1.1 mumbo jumbo
1.1.2 blah blah
1.1.3 something something
Using something like this as the HTML:
<ol start="1.1.1">
<li>mumbo jumbo
<li>blah blah
<li>something something
</ol>
Is this possible in native HTML/CSS? Obviously the HTML above doesn't work (the iterators revert back to 1, 2, 3).
See this fiddle
You can do it using CSS counter property
HTML
<ol class="custom">
<li>mumbo jumbo</li>
<li>blah blah</li>
<li>something something</li>
</ol>
CSS
.custom {
counter-reset: custom;
}
.custom li {
list-style-type: none;
}
.custom li::before {
counter-increment: custom;
content:"1.1." counter(custom)" ";
}
Read more about counter in the docs
and here is an example of counter from W3Schools.
How can i display custom ordered list ? Is it possible to get below output
Tour 1: Hello
Tour 2: Whats up ?
Tour 3: Bye
Tour 4: Test Tour
You can use CSS counters and content to prepend a word to an increment. Demo
HTML
<ol>
<li>Hello</li>
<li>Whats Up</li>
<li>Bye</li>
<li>How Are You</li>
</ol>
CSS
ol {
counter-reset: tour;
}
li:before {
counter-increment: tour;
content: "Tour " counter(tour) ": ";
}
Output
Tour 1: Hello
Tour 2: Whats up ?
Tour 3: Bye
Tour 4: Test Tour
Explanation
Using counter-reset sets the <ol> counter to your counter tour
Every <li> increments tour with counter-increment
Set the content of the pseudo element :before to "Tour " + counter value + ": "
You can use a pseudo element to do this effect, but I'm not sure as far as the colon goes:
<ol class="tour">
<li>First thing's first</li>
<li>Second's the best</li>
<li>Why not third?, Because I though it was the best.</li>
<li>How about fourth?</li>
</ol>
And the CSS (margins would need to be tweaked to your liking - although you could probably use positioning to achieve the same thing):
ol.tour li:before {
content:"Tour";
margin-left:-60px;
margin-right:30px;
}
ol.tour{
margin-left:40px;
}
Example Fiddle: http://jsfiddle.net/n4s8fo2q/
is it possible to have <li> numbers like this?:
1.1 First Item
1.2 Second Item
2.1 Other item
The proper way to do it is by using the CSS counter-increment property.
You could set sections and sub-sections as "Section 1", "1.1", "1.2", etc.
http://www.w3schools.com/cssref/pr_gen_counter-increment.asp
<style>
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
</style>
<ol>
<li>First level</li>
<li>First level 2
<ol>
<li>Second level</li>
<li>Second level 2
<ol><li>Third level</li></ol>
</li>
</ol>
</li>
</ol>
Another great explanation:
http://www.impressivewebs.com/css-counter-increment/
You can use CSS generated content and counters, however guess which browser doesn't support it...
If you need general support you'll need do it server-side or with JavaScript.
http://www.w3.org/TR/CSS21/generate.html
http://www.evotech.net/blog/2009/05/css-content-counter-increment-counter-reset/
This page lists all the available list style types in HTML (along with browser compatibility):
http://www.quirksmode.org/css/lists.html
As you can see, sub-pointed numbers are not a supported option, so if you want to do it exactly as you've suggested, then you'll have to do it manually - either plain text or javascript or possible using CSS before: (this last option could have been my preferred choice, except that it won't work in older versions of IE)
Alternatively, just accept that HTML doesn't support it, and go with an alternative numbering scheme that is supported. Using nested lists will allow you to have the outer list numbered 1,2,3, etc while the inner list is numbered I, II, III, IV, etc.
Hope that helps.
Just for fun, this little jQuery snippet
$("ol").each(function(i) {
$(this).children("li").not(":has(ol)").each(function(n, el) {
$(this).prepend("<span>" + i + "." + (n+1) + " </span>");
});
});
produces the desired effect, but only works with 2 levels given this type of layout:
<ol>
<li>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
</li>
<li>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
</li>
</ol