Using cm/mm on the CSS of a web app that replicates paper interaction is a good practice?
W3C has a great post on the subject of CSS units. In particular:
cm: Not recommended for screen / recommended for print
The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else. A length expressed in any of these will appear as exactly that size (within the precision of the hardware and software). They are not recommended for use on screen, because screen sizes vary so much. A big screen may be 60cm (24in), a small, portable screen is maybe only 8cm. And you don't look at them from the same distance.
The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.
Print page numbers on pages when printing html
As @page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
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>
This way you can customize your page number by editing parametrs to #pageFooter. My example:
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
This trick worked for me fine. Hope it will help you.
How to set font family and size in html/css
font-family: Arial
This means the browser will use Arial if you have it installed on your system. If not, it will use whatever the default font is for your browser.
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif
This means the browser will use Arial if you have it installed on your system. If not, it will use Helvetica Neue if you have it installed on your computer. If not, it will use Helvetica if you have it installed on your computer. If not, it will use whatever the default sans-serif font is for your browser.
Both are perfectly valid. They just do slightly different things.
and I am also not sure if I cam use "cm" in the code
Yes, cm is a valid CSS unit of measurement.
Weird table pixel bug in Chrome
mm
units do not convert into a whole number of pixels. For example, 12mm
is 45.354330709px
. Unfortunately, browsers handle rounding differently since no CSS spec is provided for how it should be done.
As an example, I have converted your mm
units to use px
. I scaled it up/down by a factor of 10 and no longer see a difference in where the borders are placed.
* { margin:0; padding:0;}#wrapper1 { padding-top: 5mm; background:lightblue;}#wrapper2 { display: flex; flex-direction: column; background:lightgrey;}table { border-collapse: collapse; border: 1px solid red; margin-top:70px;} td, .box { width:120px; height:120px;}td { background:grey;}.box { background:orange;}
<div id="wrapper1"> <div id="wrapper2"> <table> <tr> <td> <div class="box"></div> </td> <td></td> </tr> </table> </div></div>
Related Topics
Negative Margins Vs Relative Positioning
Prevent Ligatures in Safari (Mavericks/iOS7) via CSS
CSS Grids: Align Square Cells with Container Edges with Consistent Grid Gap
Best Practice for Using Svg Images
How to Change Font Size in a Textbox in HTML
CSS Background Image Not Displaying
Flex Items Not Centering Vertically
How to Get The Bullet Points of a <Ul> to Center with The Text
How Is CSS Applied by The Browser, and Are Repaints Affected by It
After Pseudo Element Not Appearing in Code
Making Buttons - <Button> or <Div>
Text-Align Justify Not Working
Table Columns, Setting Both Min and Max Width with CSS
What Happens If I Don't Put a <!Doctype HTML> in My Code? Will It Make Any Major Changes