Skip to content

Instantly share code, notes, and snippets.

@Falsen
Created May 6, 2020 13:47
Show Gist options
  • Save Falsen/c2f0deb10a41b96bb0a58fd99c6554bd to your computer and use it in GitHub Desktop.
Save Falsen/c2f0deb10a41b96bb0a58fd99c6554bd to your computer and use it in GitHub Desktop.
Example of printer friendly css
body {
margin: 0;
width:29.7cm;
height: 21cm;
overflow-x: hidden;
overflow: hidden;
font-size: 0.31cm;
}
h2{
font-size: 0.45cm;
margin-block-start: 0.1cm;
margin-block-end: 0.1cm;
}
h3{
font-size: 0.37cm;
margin-block-start: 0.13cm;
margin-block-end: 0.13cm;
}
h4{
font-size: 0.33cm;
margin-block-start: 0.16cm;
margin-block-end: 0.16cm;
}
.small-text{
font-size: 0.32cm;
}
.r-small-text{
font-size: 0.29cm;
}
*{
border-spacing: 0.1cm;
}
.light{
background: white;
}
.dark{
background: #bcbfc4;
}
#listing{
width:100%;
margin-top:0cm;
background:red;
float: top;
display:inline;
}
#listing table{
margin-top: 1cm;
page-break-inside: avoid;
page-break-after: always;
}
.item{
position:relative;
width:100%;
height:10cm;
box-sizing: border-box;
/* display: inline-block; */
}
.longreceipt .item{
height: 20cm;
}
.item-border{
border: 1px dotted rgba(125,125,125, 0.3);
}
#items{
height:100%;
margin-top:0px;
}
.close{
display:inline;
}
.footer{
position: absolute;
text-align: center;
bottom:0;
width:100%;
}
.page{
position: relative;
height: 10cm;
}
.halfpage{
height: 10cm !important;
}
.longpage{
height: 20cm !important;
}
@media print and (width: 29.7cm) and (height: 21cm) {
@page {
size: landscape;
margin: 0;
}
}
@page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
@media print{
.noprint{
display:none;
}
}
#noprint{
position: absolute;
left: 45%;
top:45%;
width:450px;
height:175px;
}
#noprintbody{
font-size: 16px;
opacity:0.45;
position: relative;
left: -50%;
top:-70%;
border: dotted black 1px;
border-radius:5px;
background:white
}
#noprintbody:hover{
opacity:1;
}
.tabletop{
border: 1px solid black;
}
tr.border_bottom th {
border-bottom:1pt solid black;
}
tr.border_top th {
border-top:1pt solid black;
}
.itemtable{
margin: 0.25cm;
width: 29.2cm;
height: 20.5cm;
border-collapse: separate;
border-spacing: 0.25cm;
page-break-inside: avoid;
}
.itemtabletd{
height: 9cm;
width: 6.925cm;
}
.longreceipt{
height: 20.0cm !important;
}
.nobold{
font-weight: normal;
}
.cover{
top:0px;
left:0px;
width:100%;
height:100%;
position:absolute;
background:rgba(255,255,255,1);
z-index: 10;
}
.cover-img{
margin-top: 100px;
}
.container{
width: 2cm;
height: 2cm;
text-align: center;
line-height: 2cm;
}
.reference{
width: 1cm;
height: 1cm;
opacity: 1;
}
.qr{
width: 2.5cm;
height: 2.5cm;
text-align: center;
}
.ordertable{
width: 100%;
text-align: center;
}
.content_msg{
font-size: 55px;
display:inline;
}
.content_msg_2{
font-size: 35px;
display:inline;
}
.fee-view{
font-size: 0.30cm;
}
.printhelper{
position: fixed;
top: 100px;
margin-left:10px;
background:red;
width: calc( 50% - 530px );
border: 1px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment