CSS page counter in printed (or PDF) output - css

#page { #top-right { content: "Page " counter(page) " of " counter(pages); } }
This is the only way i found to display the page numbers as 'Page 5 of 10' for example. However it does not seem to be working. I tried it in a simple HTML page but it didn't work.
I want to display the page number any where in the page using plain html/css.
Did anyone succeed to make it work? If so, I appreciate your support.

You quote a (by and large correct) CSS snippet to create PDF- and print output ("paged media") from HTML input, but you say: "it does not seem to be working".
Then, two sentences further down, you say: "I want to display the page number any where in the page".
First, point two.
There is no way to put the page numbers into the HTML website itself. This feature is only for paged media, such as PDF or print output created from the HTML.
So, it's only for PDF or print output. But even there: there's also no way to put the page numbers on the PDF or print page at arbitrary positions. Your only choices are the top- and bottom -left/-right/-center margin boxes, nowhere on the main page.
Second, point one.
Now for putting the page number info into these spots where they are possible...
Since you do not elaborate what exactly does not work with your setup, let me give you a rundown:
Create a file my.css and put the following content into it (it's not the minimum required by your question, but adds a few more goodies for you to experiment with).
Also, at first I'll explain how to use it with PrinceXML.
#page { size: A4 landscape;
background: gray;
border: solid 1pt blue;
padding: 9pt;
margin: 18pt 18pt 18pt 18pt;
font-family: "Helvetica Narrow";
#top-left {
content: 'PrivateCopy';
color: red;
font-style: bolditalic;
}
#top {
content: string(doctitle);
}
#bottom-left {
content: 'My Super-Duper Manual';
font-style: bold;
}
#top-right {
content: "Page " counter(page) " of " counter(pages);
font-style: bold;
}
#bottom {
content: string(paratitle);
}
}
Save the file somewhere on your disk.
Now call the PrinceXML commandline and use -s my.css to apply the style sheet:
prince \
--verbose \
--javascript \
--style=/path/to/my.css \
http://stackoverflow.com/questions/12061835/css-page-counter \
--output=my-css-page-counter-question.pdf
(Obviously, you need to adapt your path to the my.css stylesheet file. But then...) Voila!, your Stackoverflow question in a PDF...
Of course you can extend my.css with many more features. And of course, you can use it for any conversion of HTML files, even local ones mixed with remote ones:
prince \
--verbose \
--javascript \
-s /path/to/my.css \
/home/nada.adly/Documents/title.html \
/home/nada.adly/Documents/chapter_1.html \
/home/nada.adly/Documents/chapter_2.html \
http://en.wikipedia.org/wiki/Cascading_Style_Sheets \
http://stackoverflow.com/questions/tagged/css \
-o random.pdf
Now for using CSS aside from and without PrinceXML, and for direct print output. (Of course you can always print the PDF generated by PrinceXML -- but maybe you don't want to use Prince at all?)
Again, you are not clear about the scope of your question:
Do you as a browser user want to get these page numbers into any website printout you may do?
Or do you as a webmaster responsible for a website want to make sure that these page numbers get in into the printouts your website visitors do from your content?
I'll not elaborate any of these two points here (since I may be completely missing your point), but...
...you should google for 'User Style Sheets' and for 'print.css' to find out where exactly to store this CSS code (because user style sheet locations are different from browser to browser);
...the CSS code is the same for any one of the two purposes (webmaster's style sheet or user style sheet).

This works only when HTML page is printed.
Try to print or save your HTML page as .xps . You will see the page numbers.

If you are using Prince, all will work fine and you can safely rely on the newest CSS3 standards which will allow you to produce print-quality PDFs.
If you are not using prince, you are out of luck. There are multiple options for working around, but none of the really do the job.
#page { anything }
is close to useless in the browser world when it comes to pagination. It seems fine for some margins in some browsers.
Another problem is the missing implementation of margin-box like "#top-right". None of the browser I tested even heard of them :-) Again, Prince knows them all.
Chrome doesn't use the whole #page approach and has a checkbox in the chrome-print dialog, which allows you to embed very crude pagination ("1/2"). It is not configurable in any way and completely ignores any page number related css.
Firefox is a much better candidate, at least there is a vaild workaround, but the problem here is, that the counters(pages) is always zero. So if you want to show the amount of total pages, this approach leads nowhere.
For browsers, it will utlimately boil down to the used HTML/CSS rendering engine. All libraries, stand-alone solutions and embedded browser rely on the underlying renderer and if the feature is not or badly support, the framework can'T do anything about it (like awesomoium, cefsharp etc.).

If you are printing using a browser, not many browsers (as of December 2013) support all of the CSS Paged Media specification. On the whole, you are usually pretty sure of getting page-breaks supported, but headers and footers don't work in any browser I have tested.
However, if I print using PrinceXML, it works fine:
"C:\...\prince.exe" http://localhost/Test/ -o C:\Pdf\prince.pdf
I get all my headers and footers, page numbers, dynamic content.
You'll find that more and more browsers / rendering engines will add full support as the specification matures.

Related

Mix Github markdown language with CSS

How can I add CSS to github's markdown language?
I've been able to do so by using the style property inside html tags, like:
<p style="text-align: center;">This is some random text</p>
But if I move the css to the beginning, like:
<style>
p {
text-align: center;
}
</style>
<p>This is some random text</p>
Github doesn't recognize it, and just writes to the screen the css code.
I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.
Is there a way to do this? Writing css within html tags just feels plain wrong.
After GitHub converts Markdown to HTML,
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.
In any case, GitHub does not permit arbitrary HTML to be included in Markdown.
Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.
|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|
Signal
Description
DOP
Horizontal Dilution of precision
FIX
GPS Fix Quality indicator: 0 - fix not available1 - GPS fix
You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).
Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.
E.g.
/* CSS as copied from github's own stylesheet here, which is all one line anyway */
...
/* And then your own CSS */
/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }
/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }
/* let's also give images a subtle border */
img { border: 1px solid #DDD; }

Disabling font ligatures CSS (letter combining)

Modern browsers automatically combine some letters, most commonly 'f' and 'i' to one single character called a ligature. This often optimizes legibility (i.e. easier to read), however sometimes this might not be what a designer wants.
Personally, I had this issue only in Chrome (Version 53.0.2785.101), I, although I cannot be sure, I believe this issue persists in all other versions of Chrome.
Chrome
f and i is combined multiple times
Edge
IE11
In this case I was looking for a way to turn it off.
As it turns out, it's definitely possible, it just required some digging. As mentioned on MDN, you can turn off common ligatures:
font-feature-settings: "liga" 0;
This, however, is done by using an obscure css property. Instead, you should use font-variant-ligatures, like so:
font-variant-ligatures: none;
These two properties does the exact same thing, however, the latter one is recommended one.
MDN:
Note: Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.
This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.
In particular, this CSS property shouldn't be used to enable small caps.
I encountered a similar problem and was directed here by Google.
I never want ligatures on any webpage.
(When I print a webpage to PDF and use the text-to-speech engine on my PDF reader, it skips speaking the ligatures.)
Here is one solution that works for me:
Open the webpage on Chrome/linux (may work on other desktop OSes too).
Install the StyleBot extension of Google Chrome. Then, in its options, click "styles" and then "edit global stylesheet". Enter the following (based on the answer of #AwesomeGuy).
body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}
Click "enable global stylesheet". Voila, Chrome never seems to render ligatures again (it renders the characters separately).
Also, when I ask Chrome to print web pages to PDFs, characters are rendered separately.
Add this as a bookmark and click once when printing.
javascript: void(function () {
var css = `
* {
font-variant-ligatures: none!important;
font-feature-settings: "liga" 0!important;
}
`;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
/*This is required for IE8 and below.*/
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
/*It is not necessary to set a delay.*/
setTimeout(function () {
window.print();
}, 2000);
})()
Adding Javascript Applets to Chrome’s Bookmarks
https://clicknathan.com/2010/07/12/how-to-add-javascript-applets-to-as-google-chrome-bookmarks/
Open a New Tab in Chrome. Command+T on a Mac, Ctrl+T on a Windows.
Google Toolbar as seen in Chrome's New TabRight click on the Bookmarks Toolbar. It’s a gray colored box like the one pictured here.
Select “Add Page” from the contextual menu that appears.
Give the Bookmark a name. You could Google “Baby Names” if you can’t come up with one. I like Shepherd or Samson or even Samsonite if you have aspirations of a career in luggage design, sales or airport security.
Paste the Javascript applet into the URL field.
Save that son of a gun and you’re on your way to finishing this tutorial!

Chrome does not support the css #page?

I have css for print as simple as this:
#page {
#top-left {
content: "TOP SECRET";
color: red
}
#bottom-center {
content: counter(page);
font-style: italic
}
}
But the Chrome print preview and save to pdf seems not to recognize this at all. How can I correctly set the header and footer when priting?
EDIT: #page is supported by none ref
However, do I have other choice to do this. I'm not working on websites. The product wants a pdf as result only. I can accept chrome, webkit, plantomjs etc.
You can use the open tool PagedJS to render iframes or whole pages using the CSS paged-media spec. https://pagedjs.org/
This tool is a polyfill that converts blocks like the one you posted (CSS Paged Media that isn't implemented by browsers) into browser-compliant html/css.
It also has a CLI alternative that sets up puppeteer & creates PDF outputs: https://gitlab.coko.foundation/pagedjs/pagedjs-cli
Near as I can determine, CSS features for paged media are primarily for systems that render for printing, rather than systems that render for the screen (browsers) or the print feature of browsers. An example of an HTML/CSS engine for printing is Prince. So, #page won't work in a browser, nor (as far as I know) was it intended to.

CSS editor which expands one-line declarations on editing

Is there a CSS editor which automatically expands one-line declarations as multi-line declarations on focus ? To clarify my thought, see example below:
Original CSS:
div#main { color: orange; margin: 1em 0; border: 1px solid black; }
But when focusing on it, editor automatically expands it to:
div#main {
color: orange;
margin: 1em 0;
border: 1px solid black;
}
And when it looses focus, editor again it automatically compresses it to one-line declaration.
Thanks.
If you are using Visual Studio you should be able to do a close approximation of this:
You can change how CSS is formatted
via the Tools -> Options menu.
Check 'Show all settings' if it is unchecked.
Go to Text Editor -> CSS -> Format and pick the semi-expanded option
Ok you changes.
Then ctrl+A, ctrl+K, ctrl+D should re-format your document
When you are finished editing just go back to the options and pick the compact CSS format then ctrl+A,ctrl+K,ctrl+D to re-format again.
Hope this helps.
I've not heard of one. If you're on a Mac I can definitely recommend CSSEdit. It does auto-formatting very nicely, amoungst other things.
EDIT: I originally said "though as the comment says it's a great idea" but, thinking about it, is that what you really want? I can see that it would be good to have expansion/contraction onClick (in which case TextMate - again Mac - though CSS suport isn't as good as CSSEdit), but onFocus?
Sorry. I don't know of any IDEs that explicitly do that.
But, there are quite a few external options:
CSSTidy (download)
Clean CSS (in-browser)
CSS Optimiser (in-browser)
others... (Google Search)
da5id, I actually don't care about implementation details (onclick or onhover, though onclick seems better when you say it ;), I'm just curious if there are any editors which supports this kind of feature in any way.
PS. I'm not on Mac but Windows.
Its not exactly what you want but try the windows port of textmate E Text Editor, for on click folding of css rules, auto formating and most other textmate functionality.
You can do that with the scripting language of your favorite editor.
For example in SciTE:
function ExpandContractCSS()
local ext = string.lower(props["FileExt"])
if ext ~= "css" then return end
local line = GetCurrentLine()
local newForm
if string.find(line, "}") then
-- On one line
newForm = string.gsub(line, "; *", ";\r\n ")
newForm = string.gsub(newForm, "{ *", "{\r\n ")
newForm = string.gsub(newForm, " *}", "}")
else
-- To contract
-- Well, just use Ctrl+Z!
-- Maybe not, code to come if interest
end
if newForm ~= nil then
ReplaceCurrentLine(newForm)
end
end
GetCurrentLine and ReplaceCurrentLine are just convenience functions from my collection, I can give them (and do the contraction part) if you are interested.
It's a good question. I'd love to see this in a CSS editor. TopStyle does this, but it isn't automatic; you have you use a hotkey.

CSS: Start numbering pages with 2 instead of 1

In CSS, with:
#page { #top-right { content: "Page " counter(page) " of " counter(pages); } }
I can have page numbers displayed at the top of every page when the page is printed. This works great. But now, how can I make it so the page number starts with 2 instead of 1? Can I do that by modifying the CSS rule above?
If you are using Flying Saucer (which was my case), use the following CSS:
table { -fs-table-paginate: paginate; }
It works like a charm. And Flying Saucer rocks :). Really highly recommended.
Try:
#page {
counter-increment: page;
counter-reset: page 1;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
using page 1 will reset the starting point of the counter. You can use any integer to start counting from. The default is 0.
After playing with Flying Saucer a bit, I guess there's no way to do this with CSS (or it's a very complicated one), as "page"/"pages" seem to be internal CSS variables. Perhaps it gets better with CSS 3, there seems to be a calc() function, so counter(calc(page+1)) could perhaps work...
But there is another way to get the PDF starting with page 2. You can add a blank first page to the PDF by adding this line to the xhtml file:
<h1 style="page-break-before:always"></h1>
Then you can either print only pages 2-... of the PDF when using a printer or remove the first page from the PDF with some PDF editor.
Have you seen the CSS documentation about counters? see here It seems to me that you can call the counter-reset. By default counters are set to 0. If in your Body tag you did a "content-reset: page 1;" then it should force the first page to start at 2 instead of 1.
Posting this for someone else viewing this page. You can also look into another stackoverflow post provided below. This has worked for me.
flying saucer - page count with css
.seq-start{
-fs-page-sequence: start;
}
Don't know if this works, but why don't you try counter(page+1)?

Resources