Invoice printing form layout is generated using dynamically reated Razor view via RazorEngine. Generated code is below. It looks ugly for human inspection and debugging. Words top,left,width, height are repeated in every item.
<div style='top:3.58cm;left:11.27cm;height:0.53cm;width:1.03cm;font-size:12pt;text-align:right;;z-Index:1'>Tel.</div>
How to make it more readable. Is it possible to specify all dimendions together, something like
style='coordinates:3.58 11.27 0.53 1.03'
and set default unit to cm or to other unit so that unit does not need added to every coordinate ? Output is generated from designed report layout, it is difficult to avoid absolute positioning. This is ASP.NET/MONO MVC4 .NET 4 Razor MVC application.
Also border:1px is ignored, no border appears. This is used for layout verification and generator debugging. How to force border or background to appear ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
position: absolute;
margin: 0;
padding: 0;
vertical-align: top;
font-family: "Times New Roman";
font-size: 10pt;
overflow: hidden;
border: 1px;
}
</style>
</head>
<body>
<div style='top:3.58cm;left:11.27cm;height:0.53cm;width:1.03cm;font-size:12pt;text-align:right;;z-Index:1'>Tel.</div>
<div style='top:3.61cm;left:15.58cm;height:0.53cm;width:1.72cm;font-size:12pt;;z-Index:2'>Reg.Nr</div>
<div style='top:4.18cm;left:13.11cm;height:0.53cm;width:2.32cm;font-size:12pt;text-align:right;;z-Index:3'>Number nr</div>
<div style='top:4.87cm;left:12.16cm;height:0.53cm;width:1.50cm;font-size:12pt;;z-Index:4'>IBAN</div>
<div style='top:5.63cm;left:1.51cm;height:0.53cm;width:1.76cm;font-size:12pt;;z-Index:5'>Payer</div>
<div style='top:7.58cm;left:1.32cm;height:0.53cm;width:2.70cm;font-size:12pt;text-align:right;;z-Index:6'>Address</div>
<div style='top:8.87cm;left:1.32cm;height:0.53cm;width:2.99cm;font-size:12pt;;z-Index:7'>Duedate</div>
<div style='top:19.92cm;left:1.16cm;height:0.42cm;width:0.93cm;;z-Index:8'>NR.</div>
<div style='top:19.92cm;left:1.93cm;height:0.42cm;width:1.69cm;;z-Index:9'>Description</div>
<div style='top:19.92cm;left:10.87cm;height:0.42cm;width:1.44cm;;z-Index:10'>Quantity</div>
<div style='top:19.92cm;left:12.32cm;height:0.42cm;width:1.09cm;;z-Index:11'>Unit</div>
<div style='top:19.92cm;left:14.40cm;height:0.42cm;width:1.12cm;;z-Index:12'>Price</div>
<div style='top:19.92cm;left:16.95cm;height:0.42cm;width:1.60cm;;z-Index:13'> Sum</div>
<div style='top:19.92cm;left:18.29cm;height:0.42cm;width:1.41cm;;z-Index:14'> KM%</div>
<div style='top:21.61cm;left:0.01cm;height:0.53cm;width:1.31cm;font-size:12pt;;z-Index:15'>detail</div>
<div style='top:23.9cm;left:12.77cm;height:0.42cm;width:2.67cm;;z-Index:16'>Käibemaksuta</div>
<div style='top:24.45cm;left:12.79cm;height:0.42cm;width:2.13cm;;z-Index:17'>Käibemaks</div>
<div style='top:24.95cm;left:12.82cm;height:0.42cm;width:1.82cm;;z-Index:18'>Ümardus</div>
use JavaScript to remove all style attribute and add class to these divs. A loop may help as they are actually used as table cells. For example, add .tel class to every 5th div. And then load your own style sheet, write your rules here.
$("div").removeAttr("style");
for(var i=0; i<$("div").length;i++){
var j = i % 15;
switch(j) {
case 0:
$("div")[i].addClass(".tel");
break;
case 1:
//add other classes...
}
}
I use jQuery so it's easier for me to write example; You can load it as user script when you browse your pages.
Btw your should write
border: 1px solid black;