Now I know about the "normal" CSS list styles (roman, latin, etc) and certainly in years past they were somewhat inflexible in not allowing things like:
(a)
or
a)
only
a.
Now I believe that you can get an effect like the above with the :before and :after pseudo-elements. Is that correct? And whats the browser compatibility like if you can?
My main question however is that I want to have report style numbering:
Introduction
1.1 Objectives
1.2 Assumptions
1.3 Limitations
1.3.1 ...
New Section
...
and so on.
Can CSS do this and, if so, whats the browser compatibility like?
See Generated content, automatic numbering, and lists.
This example shows a way to number
chapters and sections with "Chapter
1", "1.1", "1.2", etc.
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
Edit: quirksmode.org has a better table of css supports on browsers. Almost all browsers, except pre IE8b2 IEs. So yes, totally useless.
Here's the W3C specification for CSS2's automatic numbering and incrementing, with an example of 1.1, 1.2, 1.3 type numbering.
http://www.w3.org/TR/CSS2/generate.html#counters
I can't help you with the support question.
Here is my complete version of the pure css solution which goes all the way to level h6.
Tested with IE9 and Firefox 28.
body {
counter-reset:level1Header;
}
h1 {
counter-reset:level2Header;
}
h2 {
counter-reset:level3Header;
}
h3 {
counter-reset:level4Header;
}
h4 {
counter-reset:level5Header;
}
h5 {
counter-reset:level6Header;
}
h1:before {
counter-increment:level1Header;
content:counter(level1Header) ". ";
}
h2:before {
counter-increment:level2Header;
content:counter(level1Header) "." counter(level2Header) " ";
}
h3:before {
counter-increment:level3Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) " ";
}
h4:before {
counter-increment:level4Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) " ";
}
h5:before {
counter-increment:level5Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) " ";
}
h6:before {
counter-increment:level6Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) "." counter(level6Header) " ";
}
A simple markup example would be:
<ol>
<li>level one</li>
<ol start="10">
<li>level two</li>
<li>level two</li>
<ol start="110">
<li>level three</li>
</ol>
<li>level two
</ol>
<li>level one</li>
</ol>
The result of this is:
1. level one
10. level two
11. level two
110. level three
12. level two
2. level one
Browser support is fairly wide: MSIE6 complies. This is HTML 4.0
Related
I am trying to include a price through a pseudo element
h3:after{
content: " (+ $75)";
}
<h3>price</h3>
But using CSS minifier prevents the "$75" to appear.
Is there a way to escape the compiler?
You can use the entity number. Although I must caution you, this looks like the beginnings of badly designed road that will lead to horrible code practices.
h3:after{
content: " (+ \0024 75)";
}
<h3>price</h3>
Use it as a data-attribute:
h3:after{
content: " (+ " attr(data-symbole)"75)";
}
<h3 data-symbole="$">price</h3>
Or use all the text as a data-attribute:
h3:after{
content: attr(data-content);
}
<h3 data-content=" (+ $75)">price</h3>
I'll preface this question by saying I know this question has been asked before, but all the answers I can find for these appear to reference an obsolete solution that no longer works (At least in Firefox 56 [64 bit])
The obsolete method is that there used to be an automatically instantiated CSS counter named pages, so a simple bit of CSS generated from this SASS:
footer {
position: fixed;
bottom: 0;
left: 20px;
&:after {
counter-increment: page;
content: "Page " counter(page) " of " counter(pages);
}
}
Used to do what I want. Now it displays "Page [x] of 0".
I have tried using this bit of CSS to recreate my own max-page counter:
#page {
counter-increment: maxpage;
}
However this also returns 0 when used in my footer.
Is there any reasonably cross-browser friendly means of getting this functionality?
As of CSS3 you can specify counters in the #page rule. Here is an example:
#page { counter-increment: page }
The above rule instructs the layout engine to create a counter called "page" (it is called page by convention, it can be anything). This counter is incremented for each page. As with any counter, you can then use the current value of the counter anywhere in the document
For example with this CSS rule:
#pageNumber { content: counter(page) }
and this piece of HTML:
<span id="pageNumber"></span>
You can use the current page number counter as content in the HTML document. You can even go further. Say you want to start your page number at 10. You can then use the #page:first rule to reset the counter for the first page to value 9.
#page { counter-increment: page }
#page:first { counter-reset: page 9 }
The combination of both rules will reset the counter for the first page to 9. Then for each page (including the first) it will increment the counter. This results in a counter value of 10 for the first page, 11 for the second and so on.
You can also use pure css
Example:
#page {
counter-increment: page;
counter-reset: page 1;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
... in theory. In real world only PrinceXML supports this.
Not using #page, but I have gotten pure CSS page numbers to work in Firefox 20:
The CSS is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And the HTML code is:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
It works on most major browsers
According to mozilla docs,
CSS counters let you adjust the appearance of content based on its
location in a document.
So, if your css rule applies to multiple element, it will count all that elements.
If you are using header and footer element which basically appear 1 time in document and multiple time in print, counter-increment won't work because in document it has only 1 appearance.
This question already has answers here:
How can I prefix ordered list item numbers with a static string using CSS?
(3 answers)
Closed 6 years ago.
I would like to create an ordered list like the one below. I appreciate your help.
We first collect the following equipments:
Equipment 1: Driver's license.
Equipment 2: Credit card.
Equipment 3: Laptop.
Equipment 4: ...
Then we check the car in the following steps:
Step 1: Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.
Step 2: Check the tires for proper inflation and any obvious damage or signs of excessive wear.
Step 3: Ask someone to stand behind your car to check the lights.
Step 4: ...
All you would have to do is set up an ordered list like this:
HTML:
<ol>
<li>Step 1: Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
<li>Step 2: Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
<li>Step 3: Ask someone to stand behind your car to check the lights.</li>
<li>Step 4: ...</li>
</ol>
CSS:
ol {
list-style-type: none;
}
But make sure in your CSS (whether it is your style tag in the <head></head> section or on a separate style sheet) that you add the list-style-type: none attribute, because that will remove the numbers on your list.
Give this a try
ol.step {
margin-left: 0;
counter-reset: list 0;
}
ol.step > li {
list-style: none;
}
ol.step > li:before {
counter-increment: list;
content: "Step " counter(list) ": ";
float: left;
width: 3.5em;
}
ol.equipment {
margin-left: 0;
counter-reset: equipment 0;
}
ol.equipment > li {
list-style: none;
}
ol.equipment > li:before {
counter-increment: equipment;
content: "Equipment " counter(equipment) ": ";
float: left;
width: 6em;
}
<h2>List 1</h2>
<ol class="equipment">
<li>Driver's license.</li>
<li>Credit card.</li>
<li>Laptop.</li>
</ol>
<h2>List 2</h2>
<ol class="step">
<li>I would like to create an ordered list like the one below. I appreciate your help.</li>
<li>Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
<li>Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
<li>Ask someone to stand behind your car to check the lights.</li>
</ol>
https://jsfiddle.net/3z7y7vjr/5/
I have a very simple list
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
I need to start each list with Step X:. I can of course just manually write that out, but I would prefer if it were built automatically by the CSS. Something like:
ol li:before {
content: "Step $";
}
... where it can acquire the list position and insert it to $. Ideally it would also appear like this:
Step X
Content for step. No extra line break above this line
...but what I need more than anything else is "Step X" to have the correct content.
Counters in CSS2.1:
ol {
counter-reset: step;
}
ol li:before {
counter-increment: step;
content: "Step " counter(step);
/* You may need to add : and/or space, e.g. "Step " counter(step) ": "; */
}
Decent browser support (IE8+ and all other major browsers), and you can still style the :before pseudo-element (the Step X text) separately. No line break will be present unless you display as a block as :before and :after pseudo-elements display inline by default.
Do you mean a counter?
Like this?
Step 1 bla bla bla
Step 2 bla bla bla
If that's so...
<body>
<ol>
<li></li>
<li></li>
</ol>
</body>
And CSS:
body
{
counter-reset: stepx;
}
li:before
{
counter-increment: stepx;
content: "Step "counter(stepx);
}
IE8 supports these properties only if a !DOCTYPE is specified.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Achieving sub numbering on ol items html
I'm trying to achieve something like this by using unordered list:
1. Title
Objective: some text here...
1.1 option1
1.2 option2
1.3 option3
2. Title
Objective: some text here...
2.1 option1
2.2 option2
2.3 option3
I tried using list-style: decimal; but that only achieves numbers like 1, 2, 3 etc whereas I need them to have format of 1.2 , 1.3 ... 2.1 ,2.3 etc. Also is this achievable by using one unordered list or will I need to use several?
In one of my projects, I used this code (demo)
(I don't remember where did I get it from, but it works)
ol{
counter-reset: listing ;
}
li {
display: block ;
}
li:before {
content: counters(listing, ".") " ";
counter-increment: listing ;
}
This method gives you controller over many other things of course: you can customize the counter as you pleased using the content property
I think it is impossible. See here all list-style possible types http://www.w3schools.com/Css/tryit.asp?filename=trycss_list-style-type_all
i think there might be browser compatibility issues with counter property in css.
Why not use jquery?
<style type="text/css">
ul
{
list-style-type: none;
}
</style>
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
<script>
var num = 1.0;
$( "li" ).each(function( index ) {
var text = $(this).text();
index++;
list = num + (index / 10);
$(this).html(list + " . " + text);
});
</script>