I've searched for this but I couldn't find anything similar to my problem.
Basically what I have is a counter called page and I'm setting up a page counter like this:
content: "Page " counter(page);
that is displayed like this on screen -> Page 1
Everything is working fine, but what I need is to set the page counter to start from 0 instead of 1
I'm using a Wiki (confluence) and I don't have access to where page is defined, because it's just a variable meant to be used for CSS counters like before.
I tried to following, but with no luck at all:
content: "Page " counter(page) - 1;
content: "Page " counter(page - 1);
content: "Page " calc(counter(page) - 1);
I've also tried to prepend counter-reset:
counter-reset: page -1;
content: "Page " counter(page);
Now my question is, can I set the counter to start from 0 without using any counter-reset property? Or, in the previous example where I actually tried to use the counter-reset, did I make any mistake? Am I missing something?
If you have landed on this page looking for help on usage of CSS counters with the confluence tool, please make note of the comment by Nick:
I wrote a thread in confluence support forum, but apparently what I want to do it's not possible.
Here is one way to make it start from 0 without using counter-reset: [counter-name] -1. Basically what we are doing is incrementing the counter only from the second occurrence of the div class='page' so that the counter value for the first instance always remains 0.
counter-reset does not seem to be a mandatory property*. When there is no reset mentioned, 0 is taken as the default value and the below code still works.
* - Can't find any reference in W3 docs or in MDN that counter-reset is optional but browsers seem to support it.
body {
counter-reset: page;
}
.page:before {
content: "Page " counter(page);
}
.page ~ .page {
counter-increment: page;
}
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
I have posted the above only for a sample and I don't think it is the correct way to do it. The recommended approach would be the below where while resetting the counter, we set the start value as -1.
body {
counter-reset: page -1;
}
.page {
counter-increment: page;
}
.page:before {
content: "Page " counter(page);
}
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
Create a var called Time or whatever, it will be your last number showed on your Timer, then after restart check the var and if it is 9 or the number before the restart number, then set the showing number to 0
Related
I am looking for a way to set a print-devoted css that shows a fixed title on every page.
Unfortunately, I couldn't manage to print this title nicely on the 2nd page, since it always "walks on " the table, ignoring declared body padding / margin ... though I am quite sure the body is not suited here, I couldn't find any working way.
Any idea?
<h2 id="tableTitle">Fixed title</h2>
<button class="noPrint" onclick="myFunction()">Print this table</button>
<table>...content fitting at least 2 pages ...</table>
...
body{
margin-top:100px;
}
#tableTitle {
position: fixed;
top : 0;
}
Here's the fiddle
I need to know if I can modify content on the last page with the :last selector.
I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page.
But I can't find it in the documentation and it does not work when I try to use it.
I'm trying to clear the content on the footer of my last page like this:
#page {
#bottom-right {
content: "Please turn over";
}
}
#page :last {
#bottom-right {
content: none;
}
}
It works when I use it with the :firstselector. How can I get the effect for the last page?
I'm using Weasyprint to print PDF files.
This can be achieved using named pages.
Create an element on the last page (or use an existing one that will appear on the last page) and assign it a last-page class.
Example below:
HTML
<div class="last-page"></div> <!-- Or add this class to an existing element that appears on the last page -->
CSS
.last-page {
page: last_page;
page-break-before: always; /* Use if your last page is blank, else omit. */
}
#page {
#bottom-right {
content: "Please turn over";
}
}
#page last_page {
#bottom-right {
content: none;
}
}
Tested with Weasyprint - worked a charm.
Based on the CSS3 Page docs it appears the :last pseudo-class was removed (or never included).
It might be possible to target the last page using the :blank pseudo-class if you can force a page break at the end of your document. This might have unwanted effects on other blank pages though.
I have a list with category headers, and items nested in those headers. If I do
#list .item:nth-child(1):before{content:"1";}
the first item in each category gets prefixed with a 1. This is somewhat unexpected. I guess I am looking for an nth-item() plugin.
What are my options given I do not control the html, its changing dynamically and I don't want to monitor it with jQuery. I was hoping for a CSS solution.
Link to Fiddle
You can alternatively use a CSS counter
http://jsfiddle.net/6tN5U/
body {
counter-reset: item;
}
.item{
margin-left:20px;
}
#items .item:before{counter-increment: item; content: counter(item) " ";}
This question concerns using the CSS counter feature in HTML5 inside a list (e.g. <ul>).
Given this in the .css file:
body {
counter-reset:figCounter;
counter-reset:figRefCounter;
counter-increment: figRefCounter;
}
.caption {
counter-increment: figCounter;
}
.figNumber:before {
content: "Figure";
}
.figNumber:after {
content: counter(figCounter);
}
The example below works correctly, that is, the divs generate "Figure 1" and "Figure 2" respectively:
<div class="caption">
<p><span class="figNumber"> </span>: First Caption</p>
</div>
<div class="caption">
<p><span class="figNumber"> </span>: Second Caption</p>
</div>
On the other hand, the counter does not increment -- both divs end up generating "Figure 1" -- if I put the first div inside a list, like so:
<ul>
<li>
<div class="caption">
<p><span class="figNumber"> </span>: First Caption</p>
</div>
</li>
</ul>
<div class="caption">
<p><span class="figNumber"> </span>: Second Caption</p>
</div>
How can I get the counter to increment inside a list, so that the second div generates "Figure 2" like it does without the list?
When using multiple Counter-resets, you should define them in one line:
body {
counter-reset:figCounter, figRefCounter;
counter-increment: figRefCounter;
}
jsFiddle
Note it is not neccesary to increase the counter at the body, it will be one by default for the first time
Your code as is working just fine.
See this fiddle: http://jsfiddle.net/SrewW
Moreover, if you make the list-style-type to none, then it looks seamless:
See this fiddle: http://jsfiddle.net/SrewW/1/
Result in both cases:
1 : First Caption
2 : Second Caption
And,
If you remove the trailing comma after .figNumber:before, then the result is like this:
Figure 1 : First Caption
Figure 2 : Second Caption
See this fiddle: http://jsfiddle.net/SrewW/2/
Update: (Moving the comments here for easy ref)
You do not actually need to put colons and spaces in your html markup. Also, you do not need counter-increment on caption. You can do that on your fignumber span itself.
Please understand the counters. This link will help you: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
You can have many counters. You can reset them anywhere, but safe would be to reset in body. But you increment those on an element where you want to show the counter.
Please see this fiddle for reference: http://jsfiddle.net/m6u6a/4/
For example:
body {
counter-reset: figCounter 10 figRefCounter 0;
}
.figNumber:before {
counter-increment: figCounter 2;
content: "Figure " counter(figCounter) ": ";
}
Here, figCounter is initialized to 10 and figRefCounter is initialized to 0 in body. However, on the span with class figNumber, the figCounter is incremented to 2 and displayed with supporting text in the:before` pseudo-class.
The result:
Figure 12: First Caption
Figure 14: Second Caption
Hope that makes it clear to you.
I generate content for a statement using xsl. Typically the length of a statement is determined by the number of items on it. This means it can run over multiple pages. The statements are quite complex with company details, account details, summary sections, detailed sections for each type summarized, etc.
I need to have a page header on each page containing multiple lines and the page number and put it all inside a frame.
I use page-break-before and page-break-after effectively to start new pages after for example a summary table of the statement and before a detailed table for each summarized item, but I'm struggling to add a page header across all pages and to add page numbers to each page.
This does nothing:
#page :header{
content: "this is my header";
}
Neither does this:
#page {
size: auto;
margin:10%;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
This does not work:
in .css:
#page {
#top-center{
contnent: element(pageHeader);
}
}
in .xsl:
<div id="pageHeader">
<!-- Content of the header here -->
</div>
This doesn't work either:
in .css:
#page {
#top-center {
content: element(pageHeader);
}
}
#pageHeader {
position: running(pageHeader);
}
in .xsl:
<div id="pageHeader">
<!-- content -->
</div>