This question already has answers here:
Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?
(12 answers)
Closed 5 years ago.
how I can formate my text displayed in HTML like these:
1.1 cdashjkfhkdvfsdfjkvnjk
cnzxjkvnkncjkvjkxcvbkcbvk
1.2 cnzxjknvjn jvnxcjkcxcx
klczxkcnzxnclnxknckxnk
1.3 ....
and not like these:
1. cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk cnzxjkvnkncjkvjkxcvbkcbvk
cnzxjkvnkncjkvjkxcvbkcbvk cnzxjkvnkncjkvjkxcvbkcbvk cnzxjkvnkncjkvjkxcvbkcbvk cnzxjkvnkncjkvjkxcvbkcbvk
2. cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk
Any ideas????
Use an ordered list.
<ol>
<li>cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
<li>cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
</ol>
<ol>
<li>cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
<li>cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
</ol>
Edit:
If you don't care about IE6 the following will work =P
body {
counter-reset:section;
}
ol {
counter-increment:section;
counter-reset:subsection;
}
li:before {
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
Output:
1.1 cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
1.2 cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
2.1 cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
2.2 cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
http://jsfiddle.net/73vp5naf/
Browser's won't do decimals for you as far as I know.
You could use two ordered lists, one inside the other, and have the inner one with letters or roman numerals?
E.g.
<ol>
<li>Part 1</li>
<ol>
<li>Child 1 of Part 1</li>
<li>Child 2 of Part 1</li>
</ol>
<li>Part 2</li>
<ol>
<li>Child 1 of Part 2</li>
<li>Child 2 of Part 2</li>
</ol>
</ol>
Related
Hi I am try to amke regexp which extract only li tags in ul tags (no ol)
Text:
<ul><li>some text</li></ul>
<ol><li>some text</li></lo>
Extracted
<ul>**<li>**some text</li></ul>
<ol><li>some text</li></lo>
Could you help me ?
Solution 1
Regex solution
/(?<=<ul>\s*(?:<li>.*?<\/li>\s*)*)<li>.*?<\/li>/gi
Demo
If you work in a team and someone else may read your code I advise you to use Solution 2. It's more simple and easy to understand by code reading.
Solution 2
Do it in 2 steps:
Delete all <ol>...</ol> nodes;
Take all <li>...</li> nodes.
*I assume your html is valid and you have no <li> outside <ul> or <ol>.
Code example in JavaScript:
let html = `
<ul>
<li>take this node 1</li>
<li>take this node 2</li>
</ul>
<ol>
<li>exclude this node</li>
<li>exclude this node</li>
</ol>
<ul>
<li>take this node 3</li>
<li>take this node 4</li>
</ul>
<ol>
<li>exclude this node</li>
<li>exclude this node</li>
</ol>
`;
let htmlWithoutOl = html.replace(/<ol>.*?<\/ol>/gis, '');
let matches = htmlWithoutOl.matchAll(/<li>.*?<\/li>/gis);
for (const match of matches) {
console.log(match[0]);
}
I am attempting to obtain the plain text from a piece of HTML code but would like to retain the numberings of from the ordered or unordered list. So far, libraries such as node-html-parser and cheerio do not retain those information.
Meaning to say, given a HTML like so:
<ol>
<li>Number 1
<ol style="list-style-type: lower-alpha;">
<li>Number a</li>
<li>Number b</li>
</ol>
</li>
<li>Number 2
<ol style="list-style-type: lower-alpha;">
<li>Number a
<ol style="list-style-type: lower-roman;">
<li>Number i</li>
<li>Number ii</li>
</ol>
</li>
<li>Number b</li>
<li>Number c</li>
</ol>
</li>
</ol>
I would like to obtain:
1. Number 1
a. Number a
b. Number b
2. Number 2
a. Number a
i. Number i
ii. Number ii
b. Number b
c. Number c
I write in Nodejs.
import {
parse
} from 'node-html-parser';
var html = `<ol>
<li>Number 1
<ol style="list-style-type: lower-alpha;">
<li>Number a</li>
<li>Number b</li>
</ol>
</li>
<li>Number 2
<ol style="list-style-type: lower-alpha;">
<li>Number a
<ol style="list-style-type: lower-roman;">
<li>Number i</li>
<li>Number ii</li>
</ol>
</li>
<li>Number b</li>
<li>Number c</li>
</ol>
</li>
</ol>`
const root = parse(html);
var children = root.querySelector('ol')
var m = children.innerHTML
var lis = parse(m)
var m = lis.text
console.log(JSON.stringify(m))
output will be
Number 1
Number a
Number b
Number 2
Number a
Number i
Number ii
Number b
Number c
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.
I'm trying to create a recursive list using Thymeleaf. I'm using a simple Java object to model a node which has has two fields, a description and then an array list of child nodes. I'm using the following HTML/Thymeleaf to process the structure but it isn't recursively iterating through to the next level down.
My Java code looks as follows:
public class Node {
public String description;
public ArrayList<Node> children;
}
My Thymeleaf/HTML code is as follows:
<html>
...
<body>
<div th:fragment="fragment_node" th:remove="tag">
<ul th:if="${not #lists.isEmpty(node.children)}" >
<li th:each="child : ${node.children}"
th:text="${child.description}"
th:with="node = ${child}"
th:include="this::fragment_node">List Item</li>
</ul>
</div>
</body>
</html>
If my data structure looks as follows:
Main node 1
Child node 1
Child node 2
Main node 2
Child node 3
Child node 4
I'd expect to get:
<ul>
<li>Main Node 1</li>
<li>
<ul>
<li>Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Main Node 2</li>
<li>
<ul>
<li>Child node 3</li>
<li>Child node 4</li>
</ul>
</li>
</ul>
However, I only get:
<ul>
<li>Main Node 1</li>
<li>Main Node 2</li>
</ul>
Can anyone spot why this may not be working?
The cause of the problem is
You are trying to th:text and trying to add the description to a <li> as well as you are trying to th:include the fragment inside the same tag <li>.
Your th:include is replaced by the th:text as th:text is processed with priority by default.
Direct solution to your source code
.....
<li th:each="child : ${node.children}" th:inline="text" th:with="node = ${child}">
[[${child.description}]]
<ul th:replace="this::fragment_node">List Item</ul>
</li>
.....
Even thought the above will work as you want, personally I find some design issues in your thymeleaf page.
Better solution using fragment parameters
...
<ul th:fragment="fragment_node(node)" th:unless="${#lists.isEmpty(node.children)}" >
<li th:each="child : ${node.children}" th:inline="text">
[[${child.description}]]
<ul th:replace="this::fragment_node(${child})"></ul>
</li>
</ul>
...
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