recruit_man recruit_man - 4 months ago 15
CSS Question

Full Height Font for print?

I'm trying to design page for a4 portrait print size and I want to make a font full height as image;
click to see my example image (from left - 39)

my html structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A4 CAM YAZI</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<page size="A4" layout="portrait">
<div class="wrapper">
<div class="fiyat_sol">
<h1>39</h1>
</div>
<div class="icerik_sag">
<img src="logo.png" />
</div>
</div><!--wrapper-->

</page>
</body>
</html>


my css codes

@charset "utf-8";
/* CSS Document */
body {
background: rgb(204,204,204);
font-family:Arial, Helvetica, sans-serif;
}
body,html{
height: 100%;
font-size:100%;
}
page {
background: white;
display: block;
margin: 0 auto;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}

@media print {
body, page {
margin: 0;
box-shadow: 0;
}

}
.fiyat_sol{
float:left;
width:14cm;
}
.fiyat_sol h1{
width:14.6cm;
height:100%;
font-size:30em;
margin-top:-97px;
}
.icerik_sag{
float:right;
}


no need cross browser I will print it only

Answer
.fiyat_sol h1{
    width:14.6cm;
    height:100%;
    font-size:30em;
    margin-top:-97px;
}

height of 100% will only extend the size of element, will not increase the font, I would change the <h1> to:

.fiyat_sol h1{
  position: absolute;
  top: 0;
  left: 0;
  font-size: 21cm;
  margin: 0;
  padding: 0;
  transform: scaleX(.3);
  transform-origin: 0 0;
}